安装
-
关于旧版本
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,也可以选“手动选择特性”来选取需要的特性。

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

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

选用 dart-sass
的原因:
- https://www.dart-china.org/t/css-sass-dart-sass/146
-
node-sass
的安装很麻烦,经常会出问题,导致安装失败等
代码校验选择 ESLint + Standard config
,如果选择了ESLint + Prettier
,则 Prettier
的校验方式要和 VSCode 中的保持一致。具体配置请查看:VSCode 常用插件及配置

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

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

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

浏览器展示效果如下:

网友评论