vue（12）----cli

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插件

单文件组件使用：
1. 先创建.vue文件
2. 想在哪里使用就在哪里导入
import xxx from xxx
3. 在当前组件中注册导入的组件
export default {
components: {
xxx
}
}

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


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