Vue-cli3 安装及快速创建项目 详细步骤

 

Vue-cil是Vue的脚手架工具，可以帮助我们编写基础的代码，可以帮我们搞定目录结构、本地调试、代码部署、热加载、单元测试等工作

Vue-cli官网https://cli.vuejs.org/zh/

开始安装
 

1、先装node

Vue-cli是一个node包，首先要先装node.js，对版本也有些要求  (node.js具体流程安装看这里)

 

2、安装Vue-cli 3

装好node后，在命令行下输入 

npm install -g vue-cli

回车，如图，这就是正在安装了，需要稍等一会

 

 

3、创建一个项目

在命令行下输入  vue create 项目名 ,

vue create hello world

注意，vue create只有3.0以上的版本才可以使用，如果你的版本是低于3.0请先更新Vue-cli （如何更新看这里）

 

3.1、输入完命令后，如下图，它会让你去选择一个预设：

第一个是默认的，选了bable，eslint

第二个是手动选择，这里我是选了手动选择

 

3.2、选了手动选择，就会给你更多特性供你选择，如下图，

上下键可以切换，这里我多选一个CSS

 

3.4、这时它会问人预处理器有什么，这里我选的Stylus

 

4.5、下面是让你选择ESLint规则，这里我选的ESLint + Standard config

 

4.6、这是问你是在保存文件时lint 还是提交的时候 ，这里我选的保存文件

 

4.7、这里问你bable,postCss,ESLint,这些是放在配置文件中，还是放在package.json里，这里我选的相应的文件里

 

4.8、然后会问你上面的那些预设是否要保存，这里我选的不保存

忘了截图了，就是一句Save this as a preset for future projects(y/n)

保存：下次创建项目还是用这个预设

不保存：如果选择手机还要重新设置一遍

 

4.9、自动添加依赖

 

4.10 、安装好了

 

4.11、进入目录，开始编译 （就是图里那两行蓝色的命令）

先执行第一个进入目录，再执行第二个编译，如下图

 

4.12、编译成功啦

 

 

5、访问一下

在浏览器里输入本地地址就可以啦