vue-cli

什么是cli

cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack

cli的使用

1. cli安装
   • 安装：$ npm i @vue/cli @vue/cli-init -g
   • 验证安装成功：输入 $ vue
2. 创建项目
   • cli3版本创建
     • 命令创建 【 推荐 】
       • $ vue create 项目名称
         • 手动选择配置
         • 如果安装node-sass出问题，如何解决：
           • 先切换成npm源 nrm use npm
           • 使用cnpm 安装 cnpm i node-sass sass-loader -D
     • 图形界面创建
       • $ vue ui
       • 创建完成的结果和使用命令创建时一样的
     • cli3版本配置介绍
       • default 默认配置
       • Manually select features 手动选择配置
         • 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? 将上面所选的配置保存下来，以备将来的项目使用
   • cli2版本创建
     • 标准版
       • $ vue init webpack project
     • 简易版
       • $ vue init webpack-simple project
   • 如何判断cli版本
     • 如果有build/config那么基本上可以肯定是cli2
     • 如果看不到build/config那么就是cli新版本

cli目录结构

cli3

• node_modules 项目的依赖包
  • cli3 webpack配置放在node_modules中
• public 项目的静态资源文件夹 【 生产环境下的，webpack不编译 】
• src 源代码开发目录
  • assets 项目的静态资源文件夹 【 开发环境下的，webpack会编译 】
  • components 存放组件【 公共组件 】
  • App.vue [ App组件 ] ， 一个vue文件【 单文件组件 】就是一个组件
    • 单文件组件, [ xxx.vue 文件 ]
    • 构成
      • template 模板[ jsx ] 必须有
      • script 组件的选项 data methods computed watch 可以没有
      • style 组件的样式 可以没有
    • main.js 项目的入口文件
• .browserlistrc 浏览器列表兼容
• .gitignore git上传忽略文件配置
• babel.config.js/.babelrc 优雅降级配置文件
• package.json 项目的脚本启动记录文件和依赖记录形象
• postcss.config.js
  • css预处理器配置
• README.md 项目说明文件
• yarn.lock
  • 记录依赖包中的依赖的版本信息
  • 可以保证项目版本一致性

cli2标准版

• build webpack配置
• config webpack配置
• node_modules
• src
  • static 静态资源配置
  • .babelrc 优雅降级配置文件
  • .postcssrc css预处理配置文件
  • .editorconfig 编辑器配置文件

cli2简易版

• src 源代码开发目录
• webpack.config.js webpack 配置文件

单文件组件

• 文件的创建
  • 命名 - 大驼峰命名法
    • 有文件夹
      • index.vue
      • 其他文件是大驼峰命名法
    • 没有文件夹的
      • 大驼峰命名法
• 单文件组件的组成部分
  • template
  • script
  • style [ stylus ]
    • stylus
      • 它的语法和sass基本一致
      • 它去掉了css样式中的符号
      • 它严格要求缩进
    • scope
      • 对定了一个作用域，表示这个样式作用在当前组件中，如果不写就会成全局样式

assets

• 它是开发环境下的静态资源目录，这个目录会被webpack编译
  • 举例： 图片
    • 如果图片>4K 那么它会将这个图片拷贝到dist下，但是会给这个图片名称后面加一个hash值
      • hash值，可以防止图片覆盖
    • 如果图片<4K，那么这个图片会被编译为base64格式的图片
      • base64就是使用一串字符来代表一个图片的路径
• 关于背景图片
  • 背景可以使用assets下的或是pulic下的图片

webpack配置

cli4 webpack配置在node_modules下的@vue / cli-service 这里 ,如果我将来要修改呢？

• 解决： 使用覆盖性文件 vue.config.js
• vue.config.js
  • 这个文件的创建是在项目根目录的
  • 配置文件一旦修改，项目必须重启