webpack，cli安装步骤

webpack

webpack-dev-server

resolve 文件扩展名可以省略

es6 -> es5 ( 优雅降级 )

1. 什么叫做优雅降级， 什么叫做渐进增强？

• 优雅降级指的是， 先进行高版本开发， 然后向下兼容
• 渐进增强指的是， 先进行低版本稳定开发， 然后在进行高版本技术的引用

2. css代码抽离（将src目录css文件打包到dist目录中， 并且会自动在index.html中引入link）

• 先安装
  cnpm i extract-text-webpack-plugin -D
• 在webpack.config.js中引入
  var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
• 在css的loader转换器中进行使用

module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
use:'css-loader'
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin('css/[name]_[hash:6].css')
]

3. 图片打包

• base64 将数据量较小的图片（4K以下）转成 字符编码 ， 它可以减少http请求， 从而加快页面加载速度

4. 静态资源拷贝
5. 配置文件抽离

• 创建一个config目录，然后在里面新建两个webpack配置文件
• webpack.config.dev.js
• webpack.config.prod.js
• 修改package.json中npm脚本命令

"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

• 修改配置文件中的路径，
• 将相对路径， 修改为 磁盘路径

6. 错误资源定制
7. 精确找到错误源代码位置
   devtool: 'source-map'

cli

cli 别名： 脚手架
npm < cnpm < yarn

1. 作用：

• 快速构建vue项目， 底层配置使用的就是webpack

2. 版本

cli2 cli3

3. 安装

npm install @vue/cli -g cli3的版本
npm install vue-cli -g cli2的版本
yarn add @vue/cli global /

• 报错：有的网友的电脑使用yarn安装@vue/cli , vue命令未找到
• 解决：
• 使用npm / cnpm 安装@vue/cli
• 注意： 同一台电脑， 不兼容两个版本
• 但是我们想的是， 能不能有某一个工具， 既能让我们随意安装cli2有能随意安装cli3
• 调节工具
  npm install @vue/cli-init -g
yarn add @vue/cli-init global
  步骤：

1. 先安装cli3
2. 在安装@vue/cli-init
3. 那么我们就可以随意安装cli3 和 cli2
4. cli3安装
5. vue create project/ .
6. 选择你的项目中的webpack的一些配置项
7. babel
8. css-pre css预处理语言
9. less
10. sass
11. stylus
12. 上面所选的配置是往 In dedicated config files（生成的单独的配置性文件） 还是往 package.json放 ， 建议大家使用第一个
13. 目录基本介绍

• node_modules 项目的依赖包
• public 静态资源文件夹
• favicon.ico 浏览器标题的图标
• index.html 它是整个项目的入口文件（根实例）的模板
• src 源代码开发目录
• assets 当前项目开发的静态资源
• js
• css
• img
• components 项目的组件
• xxx.vue 一个.vue的文件， 它就是一个组件， 也是一个模块
• App.vue 入口的主组件
• main.js webpack中配置的主入口文件
• .browserslistrc 项目不支持 ie8及以下的
• .gitignore git上传时， 不上传的文件
• babel.config.js es6->es5 优雅降级
• package.json 当前项目的依赖包配置文件
• postcss.config.js 给css添加引擎头前缀
• readme.md 当前项目的说明文件
• yarn.lock 当前项目的依赖包的第三方库的详细信息记录

5. 安装 cli2
6. vue init webpack/webpack-simple app
7. 进行问题的选择
8. 不安装单元测试
9. 不安装e2e的测试
10. eslint自愿
11. 安装 cli2_simple版本

• 总结： 市面上可以见到4个版本
• cli2
• cli2简化版本
• cli3 独立性的配置型文件版本
• cli3 package.json配置项文件版本
• webpack自定义构建项目版本（自己做的）
• cli2 vs cli3
• cli2的webpack 配置是独立在外的
• cli3的webpack 配置是放在了node_modules中， 不建议我们修改原配置文件， 要进行覆盖文件的配置， 配置vue.config.js

7. 界面安装cli3 ( 不推荐 ) git( 界面化操作工具 不推荐 )
8. 使用：
9. 命令行输入 ： vue ui
10. 介绍cli3具体内容

• .vue的文件 —》 单文件组件
• 单文件组件由三部分构成，
• template 模板（必写）
• script
• style
• scoped 解决css命名冲突， 给css样式独立的作用空间

9. es6的模块化

• 定义 任意数据类型
• 导出 export || export default
• export vs export default
• export 可以批量导出
• export default 默认只能导出一个
• 引入
• export 导出 import {} from ‘文件路径’
• export default import 变量 from ‘文件路径’
• 自定义插件
• vue组件库的封装原理