cli 的安装,cli的目录介绍，安装问题解决，.vue文件--单文件组件

cli

1. cli是什么？

   • cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于我们之前所学的 express-generator
   • 用于Vue.js开发的标准工具

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. 如果有的人安装3失败了，那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
      1. $ cnpm i @vue/cli -g 这个是cli3的版本
         如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
      2. $ cnpm i @vue/cli-init -g
   4. 如果还有问题：
      那么你就不要使用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
     2. 简易版
        $ vue init webpack-simple project
   3. 目录介绍：
      1. package.json 整个项目的依赖配置文件，脚本命令运行的存储文件
      2. build 整个项目的配置性文件，比如webpack配置
      3. config 对整个项目的静态服务器配置
      4. dist 运行 npm build 打包出来的文件
         • js 项目的js文件
         • .map 文件 错误资源定制文件
         • html 整个项目的容器，也是根实例的模板
      5. node_modules 整个项目的依赖包文件
      6. src 源代码开发目录，也是开发者具体操作的目录
         • assets 开发环境的静态资源 ， webpack编译
         • components 组件存放目录
         • xxx.vue 一个.vue文件就是一个组件，我们称之为：单文件组件（template js style）
         • App.vue 根实例的直接子组件，其他组件往App.vue中放
         • main.js 整个项目的入口文件
      7. .babelrc 优雅降级
      8. .editorconfig 编辑器配置文件
      9. .gitignore 配置git上传时，不需要上传文件配置
      10. postcssrc.js css预处理器的配置
          • display: flex;
          • -webkit
          • -moz
          • -ms
      11. README.md 项目说明文件
      12. static 生产环境的静态资源 webpack不编译
   4. 总结：
      1. cli3 的 webpack 配置放在了node_modules 的 @vue/cli-server 中
      2. cli2 的配置
         • standard build目录中
         • simple webpack.config.js
   5. 问题1： 如果我们在cli3中要进行webpack配置，怎么办？
      • 分析： cli3的基础webpack 配置我们不要动 ， 将来node_modules会被删除
      • 解决： 新建一个vue.config.js文件进行webpack的覆盖配置
   6. 问题2：
      1. cli2 cli3 在一台电脑上不能同时装的
      2. cli3 不能装的话，装cli2
         • 先卸载cli3
           yarn remove @vue/cli global
cnpm uninstall @vue/cli global
         • 重启电脑
      3. 安装cli2
         cnpm i vue-cli -g
      4. 如果还不行，卸载node.js 重装

.vue文件 – 单文件组件

1. 包含部分
   • .vue文件包含三个部分
     1. template 模板：DOM结构
     2. script 组件的配置项
     3. style 样式
   • 注意：template是必须有的，script和style可以没有
   • 单文件组件： 一个组件就是一个文件
2. .vue 文件命名要使用大驼峰 【推荐】 或是 - 的形式
   • 举例：
     • Father
     • movie-box
     • ContentBox MovieBox
3. 要想在vscode编辑器中 .vue 文件代码高亮 ， 安装Vetur插件
4. 单文件组件使用：
   1. 先创建.vue文件
   2. 想在哪里使用就在哪里导入
   import xxx from xxx
   3. 在当前组件中注册导入的组件
   javascript export default { components: { xxx } }
5. 【HMR】 热重载： 文件修改，浏览器自动刷新
6. scoped 将当前组件的样式设立独立作用域，只在当前组件中有效