Vue高级 - cli
vue项目的快速构建工具 cli 【 脚手架 】
底层 webpack
-
什么是cli?
cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpack
-
cli目前有哪些版本?
cli2 cli3
cli3对电脑的配置有一定要求
-
cli如何使用?
-
cli的安装 【 推荐使用yarn 】
npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】$ cnpm i yarn -g
使用国内镜像加速npm和yarn
npm config set registry=https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
下载cnpm:npm install -g cnpm –registry=https://registry.npm.taobao.org-
$ yarn add @vue/cli global
这个是cli3的版本
如果我们还想使用cli2的脚手架,那么我们可以在安装一个包cli3 @vue/cli
cli2 vue-cli 【 不要安装 】
所以一个电脑只能装一个
问题: 如果我们同时想使用 cli2 和 cli3 怎么办呢?
-
$ yarn add @vue/cli-init global
如果安装3失败了,
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init$ cnpm i @vue/cli -g
这个是cli3的版本
如果我们还想使用cli2的脚手架,那么我们可以在安装一个包$ cnpm i @vue/cli-init -g
如果还有问题: 那么你就不要使用cli3了,你可以单独安装cli2 【 先卸载cli3,重启电脑 】
$ cnpm i vue-cli -g
-
-
验证是否安装成功
命令行输入:$ vue
看是否有东西输出,如果输出命令提示,证明安装成功 -
创建项目
cli3版本创建
-
命令创建 【 推荐 】
$ vue create project
- 手动选择配置
- 如果安装node-sass出问题,如何解决:
- 先切换成npm源 nrm use npm
- 使用cnpm 安装 cnpm i node-sass sass-loader -D
-
图形界面创建
$ vue ui
cli3两种形式创建的结果是一样的
cli2版本创建
- 标准版
$ vue init webpack project
- 简易版
$ vue init webpack-simple project
-
-