Vue CLI 3.0 快速创建项目

安装

• 关于旧版本
  Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

• Node 版本要求
  Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

创建一个项目

运行以下命令来创建一个新项目：

vue create demo01

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

选择特性.png

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

手动选择特性.png

CSS的预编译语言，我选择了 dart-sass

选择CSS预编译语言.png

选用 dart-sass 的原因：

• https://www.dart-china.org/t/css-sass-dart-sass/146
• node-sass 的安装很麻烦，经常会出问题，导致安装失败等

代码校验选择 ESLint + Standard config，如果选择了ESLint + Prettier，则 Prettier 的校验方式要和 VSCode 中的保持一致。具体配置请查看：VSCode 常用插件及配置

代码校验.png

完整的特性选择结果如下：

完整的特性选择结果.png

特性选择完成后，继续按回车键，将进行项目的初始化和依赖的安装：

WX20190323-145915.png

最后进入到 demo01 目录，并运行 yarn serve 或者 npm run serve 即可启动项目，启动成功后在浏览器输入 http://localhost:8080/ 就可以看到初始化的项目界面

运行成功.png

浏览器展示效果如下：

浏览器展示效果.png