cli的安装及介绍

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版本创建

1. 命令创建 【 推荐 】
   $ vue create project

   • 手动选择配置
   • 如果安装node-sass出问题，如何解决：
     • 先切换成npm源 nrm use npm
     • 使用cnpm 安装 cnpm i node-sass sass-loader -D

2. 图形界面创建
   $ vue ui
   cli2

3. 标准版
   $ vue init webpack project

4. 简易版
   $ vue init webpack-simple project

5. please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置

1. default 默认配置

2. 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配置文件