cli

5. cli

1. cli是什么？
   cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于之前所学的 express-generator

2. cli的版本
   目前最新 3.x
   老版本是 2.x

3. cli的底层的自动化工具是： webpack

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

   1. $ yarn add @vue/cli global 这个是cli3的版本
      如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
   2. $ yarn add @vue/cli-init global

   如果安装3失败了，
   那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
   1. $ cnpm i @vue/cli -g 这个是cli3的版本
   如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
   1. $ cnpm i @vue/cli-init -g

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

    `$ cnpm i vue-cli -g`
   

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

6. 创建项目

cli3版本创建

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

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

2. 图形界面创建
   $ vue ui

cli2

1. 标准版
   $ vue init webpack project

• 目录介绍：
  - package.json 整个项目的依赖配置文件，脚本命令运行的存储文件
  - build 整个项目的配置性文件，比如webpack配置
  - config 对整个项目的静态服务器配置
  - dist 运行 npm build 打包出来的文件
  - js 项目的js文件
  - .map 文件 错误资源定制文件
  - html 整个项目的容器，也是根实例的模板
  - node_modules 整个项目的依赖包文件
  - src 源代码开发目录，也是开发者具体操作的目录
  - assets 开发环境的静态资源 ， webpack编译
  - components 组件存放目录
  - xxx.vue 一个.vue文件就是一个组件，我们称之为：单文件组件（template js style）
  - App.vue 根实例的直接子组件，其他组件往App.vue中放
  - main.js 整个项目的入口文件
  - .babelrc 优雅降级
  - .editorconfig 编辑器配置文件
  - .gitignore 配置git上传时，不需要上传文件配置
  - postcssrc.js css预处理器的配置
  - display: flex;
  - -webkit
  - -moz
  - -ms
  - README.md 项目说明文件
  - static 生产环境的静态资源 webpack不编译

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

总结：

• cli3 的 webpack 配置放在了node_modules 的 @vue/cli-server 中

• cli2 的配置
  standard build目录中
  simple webpack.config.js

• 问题： 如果我们在cli3中要进行webpack配置，怎么办？

• 分析： cli3的基础webpack 配置我们不要动 ， 将来node_modules会被删除

• 解决： 新建一个vue.config.js文件进行webpack的覆盖配置

问题：
1. cli2 cli3 在一台电脑上不能同时装的
2. cli3 不能装 ， 装cli2
先卸载cli3
yarn remove @vue/cli global
cnpm uninstall @vue/cli global
重启电脑 安装cli2
cnpm i vue-cli -g
如果还不行，卸载node.js 重装

.vue文件 – 单文件组件

1. 包含部分
   .vue文件包含三个部分
   1. template 模板：DOM结构
   2. script 组件的配置项
   3. style 样式

• 注意：template是必须有的，script和style可以没有

• 单文件组件： 一个组件就是一个文件

vue 文件命名要使用大驼峰 【推荐】 或是 - 的形式
- 举例：
Father
movie-box
ContentBox MovieBox

要想在编辑器中 .vue 文件代码高亮 ， 安装Vetur插件

2. 单文件组件使用：

   1. 先创建.vue文件
   2. 想在哪里使用就在哪里导入
      import xxx from xxx
   3. 在当前组件中注册导入的组件

    export default {
      components: {
        xxx
      }
    }
   

   【HMR】 热重载： 文件修改，浏览器自动刷新

   <style scoped></style>
   scoped 将当前组件的样式设立独立作用域，只在当前组件中有效