cli
简介
cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpack
版本
cli2 cli3
cli3对电脑的配置有一定要求
一、cli的安装
npm/cnpm/yarn 都可以使用
yarn
1. $ yarn add @vue/cli global
这个是cli3的版本
如果我们还想使用cli2的脚手架,那么我们可以在安装一个包
2. $ yarn add @vue/cli-init global
如果安装3失败了, 那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
cnpm
1. $ cnpm i @vue/cli -g
这个是cli3的版本
果我们还想使用cli2的脚手架,那么我们可以在安装一个包
2. $ cnpm i @vue/cli-init -g
如果还有问题:
那么你就不要使用cli3了,你可以单独安装cli2
`$ 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
cli2 -
标准版
$ vue init webpack project
-
简易版
$ vue init webpack-simple project
-
please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置
default 默认配置
Manually select features 手动选择配置
配置指的是配置webpack
babel 优雅降级 es6 —> es5
eslint js语法检测
CSS Pre-processors css 预处理语言 less sass/scss stylus
Linter / Formatter eslint / jslint
Unit Testing 单元测试
E2E Testing 端到端的测试
In dedicated config files 将所选的每一个选项用一个文件来保存( 配置 )
Save this as a preset for future projects? 将上面所选的配置保存下来,以备将来的项目使用
我们cli3 使用的包管理器器建议 是 yarn 大家一定要记得配置国内镜像源
四、分析几个版本的目录
cli3
目录
- node_modules 项目的依赖包
- cli3webpack配置放在node_modules中
- public 静态资源目录
- img
- js
- css
- favicon.ico 项目标题的logo
- index.html 根实例组件的模板,也是整个项目的容器
- src 源代码开发目录( 也是开发者主要开发的目录文件夹 )
- .gitignore git上传忽略文件配置
- babel.config.js 优雅降级配置文件 用来将es6 --> es5
- package.json 整个项目的依赖配置文件
- README.md 整个项目启动的说明性文件
- yarn.lock 真个项目的依赖性文件的信息
- postcss.config.js 项目css预处理的配置
- .browserslistrc 浏览器版本的支持
cli2 标准版
build webpack配置
config webpack配置
node_modules
src
static 静态资源配置
js
css
img
.babelrc 优雅降级配置文件
.postcssrc css预处理配置文件
.editorconfig 编辑器配置文件
cli2 简易版
src 源代码开发目录
webpack.config.js webpack配置文件