什么是vue-cli

vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化项目的过程。

中文官网：https://cli.vuejs.org/zh/

一.安装和使用

1.安装

vue-cli是npm上的一个全局包，使用npm install 命令 ，即可方便地把它安装到电脑上。

在cmd上运行如下命令来安装vue-cli：

npm install -g @vue/cli

可以用下面这个命令来检查其版本是否正确：

vue -V

如果能打印出@vue/cli 版本号，就证明安装成功了。

2.使用

基于vue-cli快速生成工程化地vue项目,在要创建项目的文件夹下运行如下命令：

vue create 项目名称

如我们运行vue create demo-first ,生成一个项目，运行后首先会看到如下提示：

你会被提示选取一个 preset（预设）的选项，第一个选项表示创建的是vue2的项目，第二个选项表示创建vue3的项目，建议初学者选择第三项（手动自定义安装哪些功能，可定制性更高）

选择并运行后，会看到如下的选项：

我们根据自己的需要选择要安装的选项（按空格来选择）

初学vue要把css pre-processors（css预处理器，用于less等）勾上。前期建议把Linter/Formatter 这个去掉，因为它是用来约束代码风格的，如果勾选，你书写有一点不规范，就会报错。后期做项目时再勾选和配置。

所以建议初学，勾选如下三个就可以了：

回车运行代码：

会让我们选择要安装的vue的版本，自己学哪个就选哪个。我这里选2.x

继续回车：

选择Less

再回车：

会让你选择是为Babel和EsLint等创建自己的配置文件，还是把配置放到package.json项目配置文件里。我们选择第一项，创建他们自己的配置文件。

接下来会让你选择是否保存这个preset。下次创建项目时就可以不用配置了

然后就开始创建项目了

但是要注意，创建项目时不要点击cmd窗口，不然就会停止创建项目。

创建好项目后，就可以再项目的根目录下运行npm run serve把项目给跑起来了。

我们复制第一个local链接，在浏览器中打开就能访问到写的项目了

项目跑起来后，如果关掉了cmd窗口，那么项目就被关闭了。重新运行npm run serve就能再次跑起来了。