从0开始学Vue系列10--安装脚手架

153 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第11天,点击查看活动详情

我要一步一步往上爬~大家好,今天我们来一起学习一下Vue脚手架

定义

Vue CLI ( Command Line Interface),命令行接口工具,翻译委Vue脚手架更口语化,它是 Vue 官方提供的标准化开发工具,也可以称为开发平台。我们写完的.vue文件需要借助它做翻译,得以让浏览器识别我们的意图。

初始化具体步骤

1. 第一步(第一次执行时):全局安装 @vue/cli包

电脑上就会多出一个vue都命令,以后可以通过该命令直接创建脚手架。 安装命令:cmd中输入 npm install -g @vue/cli

  • 注意:最好配置淘宝的镜像,不然会出现下载缓慢或者终端的问题:npm config set registry https://registry.npm.taobao.org

安装成功后的提示,警告是可以不用管的: 图片1.png

2. 第二步:创建测试项目

关掉安装成功的界面,重新打开一个cmd界面,进入到你想创建项目的文件夹中,这里我新建里一个test文件夹并进入

图片2.png

输入vue create test命令,这里我们选择了Vue2版本,babel是用于ES6到ES5的转换的,eslint的作用是检查JS的语法合理性。

图片3.png

创建成功后,会出现如下界面:

图片4.png

3. 第三步:启动项目

通过npm run serve启动项目,现在就开始编译代码量,不用我们便携代码,里面是有提供一个helloworld的例子给我们的

启动成功后,出现如下界面

图片5.png

我们在浏览器输入它显示的网址:http://localhost:8080/就可以看到官网为我们提供的HelloWorld实例了。

图片6.png

总结

这一篇文章展示了如何安装脚手架,以及安装过程中的注意点,结合结果页面,可以一步步的跟着操作,如果有疑问,欢迎在评论区和我交流!~