什么是cli

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

cli的使用

cli安装 安装：$ npm i @vue/cli @vue/cli-init -g验证安装成功：输入 $ vue 创建项目 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 —> es5eslint js语法检测CSS Pre-processors css 预处理语言 less sass/scss stylusLinter / Formatter eslint / jslint Unit Testing 单元测试E2E Testing 端到端的测试 In dedicated config files 将所选的每一个选项用一个文件来保存（ 配置 ）PWA (web app ) 在浏览器中使用的appSave 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_modulessrc static 静态资源配置.babelrc 优雅降级配置文件.postcssrc css预处理配置文件.editorconfig 编辑器配置文件

cli2简易版

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

单文件组件

文件的创建 命名 - 大驼峰命名法 有文件夹 index.vue其他文件是大驼峰命名法 没有文件夹的 大驼峰命名法 单文件组件的组成部分 templatescriptstyle [ 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.jsvue.config.js 这个文件的创建是在项目根目录的配置文件一旦修改，项目必须重启