cli的搭建

cli

概念：
cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack
cli目前有两个版本：cli2和cli3 -----cli3对电脑的配置有一定要求

cli的使用

1.cli的安装-----npm/cnpm/yarn 都可以使用

$ yarn add @vue/cli global  //这个是cli3的版本

$ yarn add @vue/cli-init global  //这个是cli2的版本

如果安装3失败了话
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init

$ cnpm i  @vue/cli -g`    //这个是cli3的版本

$ cnpm i  @vue/cli-init -g  //这个是cli2的版本

如果还有问题
那么你就不要使用cli3了，你可以单独安装cli2

$ cnpm i vue-cli -g

2.验证是否安装成功

命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

3.创建项目

①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

4.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 将所选的每一个选项用一个文件来保存（ 配置 ）

PWA (web app ) 在浏览器中使用的app

Save this as a preset for future projects? 将上面所选的配置保存下来，以备将来的项目使用

cli3使用的包管理器建议是yarn大家一定要记得配置国内镜像源

5.分析几个版本的目录

①cli3目录

• node_modules 项目的依赖包

  • cli3的webpack配置放在node_modules中

• public 静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】

  • img
  • js
  • css
  • favicon.ico 项目标题的logo
  • index.html 根实例组件的模板，也是整个项目的容器

• src 源代码开发目录（ 也是开发者主要开发的目录文件夹 ）

  • assets 开发环境的静态资源目录 （ 这个目录中的资源会被webpack编译）
    • assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录
    • assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64
    • base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构
  • components 组件存储目录
    • xxx.vue文件 单文件组件 一个vue文件就是一个组件
      • 组成部分
        • template模板（ 必须写的 ）
        • script脚本 （ 可写可不写）
        • style样式 （ 可写可不写 ）
          • scoped 作用是可以减少命名冲突，规定一个样式的作用域

• .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
  • assets
• static 静态资源配置
  • js
  • css
  • img
• .babelrc 优雅降级配置文件
• .postcssrc css预处理配置文件
• .editorconfig 编辑器配置文件
• index.html
• .gitignore
• package.json
• yarn.lock
• README.md

③cli2简易版的目录

• src
  • assets
• .babelrc
• .editorconfig
• .gitignore
• index.html
• package.json
• README.md
• webpack.config.js

6.cli它是webpack + es6模块化来集中实现的
es6模块化
模块的定义

const obj = {}
const fn = function(){}

模块的导出

// 模块的导出有两种形式
export default //默认导出一个

//export // 批量导出，导出多个

模块的引入

// 如果是export  default 导出
import xxx from '../xxx.xx'

// 如果是export 导出

improt  { xx } from '../xx.xx'  || import * as xx from '../xx.xx'

• 在cli3中创建组件，然后导出组件，然后使用组件

• 在 vs code编辑器中安装一个插件（ Vetur ）,可以使用vue文件代码高亮还可以有代码提示

• 【HMR】 热重载 自动刷新 webpack配置

cli3将webpack配置放在 node_modules中,所以Vue并不希望大家去修改这部分webpack配置，如果我们将来需要更改webpack配置，那么我们需要在项目根目录下创建一个 vue.config.js文件