1.1 引入

1.1.1 网页中常见的静态资源

  • JS ： .js .jsx .coffee .ts（TypeScript 类 C# 语言）
  • CSS ： .css .less .sass .scss
  • Images ： .jpg .png .gif .bmp .svg
  • 字体文件（Fonts）： .svg .ttf .eot .woff .woff2
  • 模板文件 ： .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

1.1.2 静态资源带来的问题

  1. 网页加载速度慢， 因为我们要发起很多的二次请求；
  2. 要处理错综复杂的依赖关系

1.1.3 如何解决上述两个问题

  1. 合并、压缩、精灵图、图片的Base64编码
  2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

1.1.4 完美实现上述问题的2种解决方案

  1. 使用Gulp/Grunt， 是基于 task 任务的，是前端构建工具；
  2. 使用browserify/Webpack， 是预编译的模块化方案；

1.2 gulp介绍

gulp是基于Node.js的前端自动化构建工具，能自动化地完成 JavaScript/sass/html/image/css 等文件的的测试、检查、合并、压缩混淆、格式化、浏览器自动刷新、部署文件生成等操作，同时可以对文件进行监听，如果文件有改动，可以自动处理生成新的文件。

所以gulp解决了开发效率(修改代码后自动更新页面)、资源整合(代码的压缩合并)、代码质量(代码的检查 自动化测试)、代码转换(es6—>es5)等问题

官网
中文网

1.2.1 gulp的核心方法

  • gulp.task(‘任务名’,function(){}) // 创建任务。
  • gulp.src(‘./*.css’) // 指定想要处理的文件
  • gulp.dest() // 指定最终处理后的文件的存放路径
  • gulp.watch() // 自动的监视文件的变化，然后执行相应任务。
  • gulp.run(‘任务名’) // 直接执行相应的任务。

1.2.2 安装gulp使用

  • 1.通过npm安装:npm install gulp-cli -g 安装全局的命令行，可以在终端中使用gulp相关命令
  • 2.在当前项目中也要安装gulp: npm install gulp --save
  • 3.还需要在当前项目中新建一个文件: gulpfile.js
  1. var gulp =  require('gulp');
  3. // 创建任务
  4. // 第一个参数: 任务名
  5. // 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
  6. gulp.task('test', function(){
  7.     console.log(123)
  8.     return gulp.src('src/js2/*.js');
  9. })
  11. //执行任务: gulp 任务名
  12. gulp test

1.2.3 对js进行压缩混淆和合并

  • npm install gulp-uglify --save 压缩混淆
  • npm install gulp-concat --save 合并
  1. var gulp = require('gulp');
  2. var uglify = require('gulp-uglify');
  3. var concat = require('gulp-concat');
  4. gulp.task('script', function(){
  5.     // 1.要匹配到要处理的文件
  6.     // 指定指定的文件:参数是匹配的规则
  7.     // 参数也可以是数组，数组中的元素就是匹配的规则
  8.     return gulp.src('src/js2/*.js')
  9.             // concat 的参数是合并之后的文件名字
  10.         .pipe(concat('index.js'))
  11.         // 压缩混淆
  12.         .pipe(uglify())
  13.         // dest方法参数，指定输出文件的路径
  14.         .pipe(gulp.dest('dist/js2'))
  15. })
  16. gulp.run('script')

1.2.4 对css进行压缩操作

  • npm install gulp-cssnano --save
  1. var concat = require('gulp-concat');
  2. var cssnano = require('gulp-cssnano');
  3. // 新建一个任务，对css进行处理
  4. gulp.task('style', function(){
  5.     // 对项目中的2个css文件进行合并，压缩操作
  6.     // 1.匹配到要处理的文件
  7.     return gulp.src('src/css/*.css')
  8.         // 2.合并文件
  9.         .pipe(concat('index.css'))
  10.             // 3.压缩操作
  11.         .pipe(cssnano())
  12.             // 4.输出到指定目录
  13.         .pipe(gulp.dest('dist/css'))
  14. })
  15. gulp.run('style')

1.2.5 对html进行压缩

  • npm install gulp-htmlmin --save
  1. var htmlmin = require('gulp-htmlmin');
  2. // 新建一个任务，对html进行压缩
  3. gulp.task('html', function(){
  4.     // 1.匹配到要处理的文件
  5.     return gulp.src('src/index.html')
  6.         // 2.压缩操作
  7.         .pipe(htmlmin({collapseWhitespace:true}))
  8.             // 3.指定输出目录
  9.         .pipe(gulp.dest('dist'))
  10. })
  11. gulp.run('html')

1.2.6 gulp对图片压缩

  • npm install gulp-imagemin@3.0.0
  1. gulp.task('image',function(){
  2.     return gulp.src('./images/*.*')
  3.         .pipe(imageMin({progressive: true}))
  4.         .pipe(gulp.dest('./dist/images'))
  5. })

1.2.7 gulp.watch

  • 监视文件的变化，然后执行相应的任务
  1. // gulp.watch 监视文件变化，执行相应任务
  2. gulp.task('mywatch', function(){
  3.     // 1.监视js文件的变化，然后执行script任务
  4.     // 第一个参数：要监视的文件的规则
  5.     // 第二个参数：是要执行的任务
  6.     gulp.watch("src/js2/*.js",gulp.series("script"))
  7. })
  9. //然后使用gulp mywatch启动监听，然后一旦源文件修改了，会立刻同步编译新的目标文件

1.2.8 gulp解决浏览器缓存问题

  • npm install gulp-rev gulp-rev-rewrite
  1. var rev = require('gulp-rev');
  2. var revRewrite = require('gulp-rev-rewrite');
  4. //给js文件重命名 并且输出到dist目录下
  5. gulp.task('js', () =>
  6.     return gulp.src(['./js/c.js'])
  7.         .pipe(gulp.dest('dist')) // 将源文件拷贝到打包目录
  8.         .pipe(rev())  
  9.         .pipe(gulp.dest('dist')) // 将生成的hash文件添加到打包目录
  10.         .pipe(rev.manifest('js-rev.json'))
  11.         .pipe(gulp.dest('dist')) // 将map映射文件添加到打包目录
  12. );
  14. //将html中的js文件用重名后的名字替换
  15. gulp.task('html2', () => {
  16.     const jsManifest = gulp.src('dist/js-rev.json'); //获取js映射文件
  17.     return gulp.src('./html/a.html')
  18.       .pipe(revRewrite({manifest: jsManifest})) // 把引用的js替换成有版本号的名字
  19.       .pipe(gulp.dest('dist'))
  20. });
  22. //当c.js文件发生变化之后，会重新执行js和html2的任务
  23. gulp.task('mywatch', function(){
  24.     // 1.监视js文件的变化，然后执行script任务
  25.     // 第一个参数：要监视的文件的规则
  26.     // 第二个参数：是要执行的任务
  27.     return gulp.watch("./js/c.js",gulp.series(['js','html2']))
  28. })

1.3 webpack介绍

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

  • 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
  1. # 在没有使用webpack之前：
  2. 举个例子：index.html里面有一大堆的css和js文件，如a.js   b.js   c.js  d.js等等
  3. （1）a.js要用到b.js里面的一个函数，则a.js要放在b.js后面
  4. （2）c.js要用到a.js里面的一个函数，则c.js要放在a.js后面
  5. （3）b.js又要用到d.js文件里面的函数，则b.js就要放在d.js后面
  6. 如果有N多个js文件，需要手动处理他们的关系，即容易出错。
  8. # 使用webpack：
  9. webpack的理念就是一切皆模块化，把一堆的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个js文件，公共代码抽离成一个js文件、某些自己指定的js单独打包，模块可以是css/js/images/font等等。

webpack详解 - 图1

1.4 Gulp和webpack对比

gulp、grunt、webpack都是前端自动化构建工具。

a) gulp

gulp 和 grunt 非常类似，gulp强调的是前端开发的工作流程，核心都是基于一个个的任务(task)进行项目构建，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。 只是grunt 会频繁进行 IO 操作，而 gulp 则不需要(基于管道流)，可以更高效的完成操作。 PS：简单说就一个Task Runner

b) webpack

Webpack与Gulp、Grunt没有什么可比性，它把项目看成一个整体，是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。 PS：webpack is a module bundle

1.5 webpack的使用

WebPack官网

  1. 运行npm i webpack@4.27.1 -g全局安装webpack，这样就能在全局使用webpack的命令
    npm i webpack-cli@3.1.2 –g 全局安装webpack命令行工具
  1. 配置环境变量
  1. 在项目根目录中运行npm i webpack@4.27.1 --save-dev安装到项目依赖中
  1. npm info webpack //查看npm上的webpack的信息
  2. webpack -v   //查看当前安装的webpack的版本信息
  4. npm root -g  //查看全局装包路径

1.6 webpack打包构建

https://webpack.docschina.org/guides/getting-started

1.6.1 webpack 列表隔行变色案例

  1. 运行npm init -y初始化项目，使用npm管理项目中的依赖包
  2. 创建项目基本的目录结构
    webpack详解 - 图2
  3. 使用npm i jquery --save安装jquery类库
  4. index.html
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  7.         <!--不推荐这样用，这样使用会导致当前文件依赖于其他文件-->
  8.         <!--<script type="text/javascript" src="../node_modules/jquery/jquery.js"></script>-->
  10.         <!--所以我们把主要的逻辑代码写到main.js中，只要引入一个main.js就可以了-->
  11.         <!--<script type="text/javascript" src="main.js"></script>-->
  13.         <!--使用打包后的路径-->
  14.         <script type="text/javascript" src="../dist/bundle.js"></script>
  15.     </head>
  16.     <body>
  17.         <!--使用jquery实现隔行渐变-->
  18.         <ul>
  19.             <li>A</li>
  20.             <li>B</li>
  21.             <li>C</li>
  22.             <li>D</li>
  23.             <li>E</li>
  24.             <li>F</li>
  25.         </ul>
  26.     </body>
  27. </html>
  1. 创建main.js并书写各行变色的代码逻辑：
  1. // 1. 导入 Jquery
  2. // import *** from *** 是ES6中导入模块的方式
  3. // 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
  4. import $ from 'jquery'
  5. //const $ = require('jquery')   express导包的语法，vue中使用es6导包的语法，import .. from ..
  7. // 设置偶数行背景色，索引从0开始，0是偶数
  8. $(function () {
  9.   $('li:odd').css('backgroundColor', 'yellow')
  10.   $('li:even').css('backgroundColor', function () {
  11.     return '#' + 'D97634'
  12.   })
  13. })
  1. 注意点
  1. - 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
  2. - 运行webpack 入口文件路径 输出文件路径对main.js进行处理：
  3.     webpack ./src/main.js -o ./dist/bundle.js
  4. - webpack使用的是CommonJS模块化规范，即require引入模块，module.exports导出模块
  5.    Vue中使用的是ES6的模块化规范，即import ** from **引入模块，export /export default导出模块

1.6.2 webpack配置文件使用

  1. 在项目根目录中创建webpack.config.js
  2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：
  1. // 导入处理路径的模块
  2. var path = require('path');
  4. // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
  5. module.exports = {
  6.     entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
  7.     output: { // 配置输出选项
  8.         path: path.resolve(__dirname, 'dist'), // 配置输出的路径
  9.         filename: 'bundle.js' // 配置输出的文件名
  10.     }
  11. }
  1. 使用命令打包构建
  1. # 使用webpack命令即可打包项目、
  2. webpack   //没有指定webpack打包的配置文件，默认使用项目根路径下的webpack.config.js文件
  3. webpack --config webpack.config.js  //指定webpack打包的时候使用的配置文件
  5. // 当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
  6. //  1. 首先webpack 发现我们并没有通过命令的形式给它指定入口和出口
  7. //  2. webpack 就会去项目的根目录中查找一个叫做 `webpack.config.js` 的配置文件
  8. //  3. 当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
  9. //  4. 当 webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建；

1.6.3 webpack实时打包构建

  1. 由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。

  2. 安装webpack-dev-serverjavascript npm i webpack-dev-server@3.1.9 --save-dev npm i webpack@4.27.1 --save-dev //项目中安装webpack npm i webpack-cli@3.1.2 --save-dev

  3. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，因为它不是全局命令，不可以直接使用。

  4. 我们借助于package.json文件中的指令来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包javascript "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" }

  5. 运行项目```javascript npm run dev

    1. <br />但是dist目录下并没有生成`bundle.js`文件，这是因为`webpack-dev-server`将打包好的文件放在了内存中。把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快

    Project is running at [1m [34mhttp://localhost:8084/ [39m[22m webpack output is served from /

    1. <br />此时我们可以通过http://localhost:8083/bundle.js 文件，因为webpack-dev-server默认是将bundle.js文件打包到根路径，所以要能做到修改main.js之后页面也要同步变化，需要修改页面的script标签：

    ```
    6.指定启动参数：
    为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

  1.  "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "dev": "webpack-dev-server --open --port 3001 --contentBase src --hot"
  4.   },
  6.   //  --open含义：构建完成自动打开浏览器
  7.   //  --port 3001 : 指定运行的端口
  8.   //  --contentBase src   :  指定运行的根目录是src，即认为src就是项目根目录
  9.   //  --hot : 热更新，是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。
  1. 7.解决webpack4.0之后打包大小警告和热更新慢的问题
  3. [https://cloud.tencent.com/developer/section/1477466](https://cloud.tencent.com/developer/section/1477466)
  1. #main.js 
  2. const path = require('path')
  4. module.exports = {
  5.     //1.设置为开发模式，不然热更新会比较缓慢
  6.     mode:"development",
  7.     entry: path.resolve(__dirname, 'src/main.js'),
  8.     output: {
  9.         path: path.resolve(__dirname, 'dist'),
  10.         filename: 'bundle.js'
  11.     },
  12.     //2.打包文件大小警告和错误的问题
  13.     performance: {
  14.         hints:false
  15.     }
  16. }

1.6.4 配置文件生成webpack-dev-server参数(了解)

  1. const path = require('path')
  2. // 启用热更新的 第2步
  3. const webpack = require('webpack')
  5. module.exports = {
  6.   entry: path.join(__dirname, './src/main.js'),
  7.   output: { 
  8.     path: path.join(__dirname, './dist'), 
  9.     filename: 'bundle.js'
  10.   },
  11.   devServer: { 
  12.     // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
  13.     //  --open --port 3000 --contentBase src --hot
  14.     open: true, // 自动打开浏览器
  15.     port: 3000, // 设置启动时候的运行端口
  16.     contentBase: 'src', // 指定托管的根目录
  17.     hot: true // 启用热更新 的 第1步
  18.   },
  19.   plugins: [ // 配置插件的节点
  20.     new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
  21.   ],
  22. }

1.6.5 html-webpack-plugin插件配置启动页面

https://www.npmjs.com/package/html-webpack-plugin

html-webpack-plugin插件可以将指定页面配置生成到内存中，并且可以将打包的bundle.js配置到内存中生成的html页面中，使用步骤如下：

  1. 运行npm i html-webpack-plugin@3.2.0 --save-dev安装到开发依赖
  2. 修改webpack.config.js配置文件如下：
  1. const path = require('path')
  2. // 导入自动生成HTMl文件的插件
  3. var htmlWebpackPlugin = require('html-webpack-plugin');
  5. module.exports = {
  6.     entry: path.join(__dirname, './src/main.js'),
  7.     output: { 
  8.         path: path.join(__dirname, './dist'), 
  9.         filename: 'bundle.js' 
  10.     },
  11.     plugins: [ 
  12.         // 添加plugins节点配置插件
  13.         new htmlWebpackPlugin({
  14.             template:path.resolve(__dirname, 'src/index.html'),//模板路径
  15.             filename:'index.html'//自动生成的HTML文件的名称
  16.         })
  17.     ],
  18. }
  1. 修改package.json中script节点中的dev指令如下：
  1. "scripts": {
  2.     "test": "echo \"Error: no test specified\" && exit 1",
  3.     "dev": "webpack-dev-server --open --port 3001 --contentBase src --hot"
  4. },
  1. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

1.6.6 使用webpack打包css文件

一般情况下，我们并不推荐在html页面中直接引入其他css文件，这样会导致过多的请求。对应的，我们可以使用webpack来构建。使用步骤如下：

  1. 运行 npm i style-loader css-loader --save-dev
  2. main.js中引入index.css
  1. import "./css/index.css"
  1. 修改webpack.config.js这个配置文件：
  1. // 用来配置第三方loader模块的
  2. module: { 
  3.     rules: [ 
  4.         // 匹配以.css结尾的文件
  5.         { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
  6.     ]
  7. }
  1. webpack 处理第三方文件类型的过程
  1. 1. 发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方 loader 规则
  2. 2. 如果能找到对应的规则， 就会调用对应的loader处理这种文件类型；
  3. 3. 在调用loader的时候，use中相关loader模块的调用顺序是从后向前调用的；
  4. 4. 当最后的一个loader调用完毕，会把处理的结果直接交给 webpack 进行打包合并，最终输出到  bundle.js 中去

1.6.7 使用webpack打包less文件

  1. 运行npm i less-loader less，需要同时安装less-loader和less
  2. main.js中引入index.less
  1. import "./css/index.less"
  1. 修改webpack.config.js这个配置文件：
  1. module: { // 用来配置第三方loader模块的
  2.     rules: [ // 文件的匹配规则
  3.         { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
  4.         { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
  5.     ]
  6. }

1.6.8 使用webpack打包sass文件

  1. 运行npm i sass-loader@7.3.1 node-sass --save-dev
  1. npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
  1. main.js中引入index.scss
  1. //注意：文件名是scss结尾
  2. import "./css/index.scss"
  1. 在webpack.config.js中添加处理scss文件的loader模块：
  1. module: { // 用来配置第三方loader模块的
  2.     rules: [ // 文件的匹配规则
  3.         { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
  4.         { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  5.         { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
  6.     ]
  7. }

1.6.9 使用webpack处理css中的路径

  1. 运行npm i url-loader file-loader --save-dev
  2. 在webpack.config.js中添加处理url路径的loader模块：
  1. module: { // 用来配置第三方loader模块的
  2.     rules: [ // 文件的匹配规则
  3.         { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
  4.         { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  5.         { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  6.         { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader' }
  7.     ]
  8.  }
  1. index.css
  1. div{
  2.     width: 600px;
  3.     height: 450px;
  4.     background-image: url(../images/1.jpg);
  5. }
  1. //注意点：url-loader默认情况下会将图片转换为base64编码的图片，好处是可以减少图片的二次请求。但是这种方式一般情况下适用于小图，如果是大图，我们可以像下面这样去使用：
  3. module: { // 用来配置第三方loader模块的
  4.     rules: [ // 文件的匹配规则
  5.         { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
  6.         { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  7.         { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  8.         { test: /\.(png|jpg|gif|bmp|jpeg)$/,
  9.                  use: [
  10.                     {
  11.                         loader: 'url-loader',
  12.                         options: {
  13.                             limit: 8192,
  14.                             name:'[hash:8]-[name].[ext]'
  15.                         }
  16.                     }
  17.                 ]
  18.         }
  19.     ]
  20. }
  22. //limit ： 当图片大小小于等于指定的值时会进行base64编码
  23. //name =[name].[ext]： 不给图片重命名，还是使用原图名。如果没有这个属性，则默认会使用hashcode的方式来给图片重命名。
  24. //给图片重命名的好处是：如果在多个不同的目录下有两张同名的图片(内容不同)，不会产生冲突。(默认情况下webpack会将图片也打包到根路径下)
  25. //如果既想多个文件夹下的同名的图片被打包后不冲突，又想保留原来的图片名字，可以这样使用：name=[hash:8]-[name].[ext]  ，  [hash:8]表示保留8位hash值，然后再去追加原来的[name]

1.6.10 使用webpack处理字体图标

1.运行npm i bootstrap@3.3.5安装boostrap

2.main.js引入bootstrap

  1. //注意：这边import的时候不需要加上 node_modules目录，import前面没有路径的时候会自动从node_modules目录下去查找
  2. import "bootstrap/dist/css/bootstrap.css"

3.index.html

  1. <span class="glyphicon glyphicon-heart-empty"></span>

4.webpack.config.js修改匹配规则。因为boostrap的字体文件中也使用了url，所以字体文件的路径一样要处理

  1. module: { // 用来配置第三方loader模块的
  2.     rules: [ // 文件的匹配规则
  3.         { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
  4.         { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  5.         { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  6.         {
  7.                 test: /\.(png|jpg|gif|bmp|jpeg)$/,
  8.                 use: [
  9.                     {
  10.                         loader: 'url-loader',
  11.                         options: {
  12.                             limit: 8192,
  13.                             name:'[hash:8]-[name].[ext]'
  14.                         }
  15.                     }
  16.                 ]
  17.             },
  18.             {   test: /\.(ttf|eot|svg|woff|woff2)$/,
  19.                 use: [
  20.                     {
  21.                         loader:'url-loader'
  22.                     }
  23.                 ]
  24.             }, // 处理 字体文件的 loader
  25.     ]
  26. }

1.6.11 webpack中babel的配置

在 webpack 中，默认只能处理一部分 ES6 的新语法；这时候就需要借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader可以把高级语法转为低级的语法，然后再把结果交给 webpack 去打包到 bundle.js 中

  1. 运行npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev安装babel的相关loader包 (babel的转换工具)
  2. 运行npm i babel-preset-env babel-preset-stage-0 --save-dev安装babel转换的语法 (es6的语法和es5的语法的对应关系)
  3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
  1. module: { // 用来配置第三方loader模块的
  2.     rules: [ // 文件的匹配规则
  3.         { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
  4.         { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  5.         { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  6.         { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader?limit=1024&name=[hash:8]-[name].[ext]' },
  7.         { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
  8.         //配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉
  9.         { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  10.     ]
  11. }
  1. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下(这个文件必须符合json的语法，不能有注释。字符串必须使用双引号)：
  1. {
  2.   "presets": ["env", "stage-0"],
  3.   "plugins": ["transform-runtime"]
  4. }

注意：之前用的比较多的语法插件babel-preset-es2015更新为babel-preset-env，它包含了所有的ES相关的语法；

1.6.12 所有配置总结

  1. # 1.安装
  2. npm i webpack@4.20.1 --save-dev                   //安装webpack
  3. npm init -y                                                       //项目初始化
  4. npm i webpack-dev-server@3.1.9 --save-dev      //实时打包构建
  5. npm i webpack-cli@3.1.2      
  6. npm i html-webpack-plugin@3.2.0 --save-dev      //配置内存页面
  7. npm i style-loader css-loader --save-dev               //css加载器
  8. npm i less-loader less                                             //less加载器
  9. npm i sass-loader@7.3.1 node-sass --save-dev               //sass加载器
  10. npm i url-loader file-loader --save-dev                 //url加载器
  11. npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev    //babel转换工具
  12. npm i babel-preset-env babel-preset-stage-0 --save-dev           //babel转换的语法
  14. #2.webpack.config.js
  15. const path = require('path')
  16. // 导入自动生成HTMl文件的插件
  17. var htmlWebpackPlugin = require('html-webpack-plugin');
  19. module.exports = {
  20.     entry: path.join(__dirname, './src/main.js'),
  21.     output: {
  22.         path: path.join(__dirname, './dist'),
  23.         filename: 'bundle.js'
  24.     },
  25.     plugins: [
  26.         // 添加plugins节点配置插件
  27.         new htmlWebpackPlugin({
  28.             template:path.resolve(__dirname, 'src/index.html'),//模板路径
  29.             filename:'index.html'//自动生成的HTML文件的名称
  30.         })
  31.     ],
  32.     module: { // 用来配置第三方loader模块的
  33.         rules: [ // 文件的匹配规则
  34.             { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
  35.             { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  36.             { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  37.             { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader?limit=1024&name=[hash:8]-[name].[ext]' },
  38.             { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
  39.             //配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉
  40.             { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  41.         ]
  42.     }
  43. }
  45. #3.项目入口文件
  46. import "./css/index.css"
  48. console.log("ok");
  50. class Person{
  51.     constructor(name,age){
  52.         this.name = name;
  53.         this.age = age;
  54.     }
  55.     showInfo(){
  56.         console.log(this.name);
  57.     }
  58. }
  59. var p = new Person("xiaoming",18);
  60. console.log(p.name);
  63. #4.package.json
  64.  "scripts": {
  65.     "test": "echo \"Error: no test specified\" && exit 1",
  66.     "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  67.   }
  69. #5.项目根目录 .babelrc
  70. {
  71.   "presets": ["env", "stage-0"],
  72.   "plugins": ["transform-runtime"]
  73. }

1.7 相关文章

babel-preset-env：你需要的唯一Babel插件
Runtime transform 运行时编译es6

2.Vue结合webpack的使用

2.1 基本使用

  1. #1.安装vue
  2.    运行npm i vue@2.6.11将vue安装为运行依赖
  4. #2.main.js
  5. /*
  6.  注意：在webpack中使用 import Vue from 'vue'导入的Vue构造函数功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式；
  7.  import Vue from 'vue' 导入包的规则：
  8.    1. 找项目根目录中有没有 node_modules 的文件夹
  9.    2. 在node_modules中根据包名，找对应的vue文件夹
  10.    3. 在vue文件夹中，找一个叫做 package.json 的包配置文件
  11.    4. 在package.json文件中，查找一个 main 属性【main属性指定了这个包在被加载时候的入口文件】，这里我们发现入口文件为vue.runtime.common.js，并不是vue.js文件
  13.  解决方案有两种：
  14.    1.在webpack.config.js下新增配置：
  15.        resolve: {
  16.             alias: {
  17.                 'vue$': 'vue/dist/vue.js'
  18.             }
  19.         }
  21.         然后使用 import Vue from 'vue'  就可以了
  23.    2.手动修改导包的路径为：import Vue from 'vue/dist/vue''，此时无需修改配置文件
  24. */
  26. import Vue from 'vue'
  28. var login = {
  29.    template: '<h1>这是login组件，是使用网页中形式创建出来的组件</h1>'
  30. }
  32. var vm = new Vue({
  33.     el: '#app',
  34.     data: {
  35.         msg: '123'
  36.     },
  37.     components:{
  38.         login
  39.     }
  40. })
  42. #3.index.html
  43. <div id="app">
  44.     <p>{{msg}}</p>
  45.     <login></login>
  46. </div>
  48. #4.webpack.config.js
  49. resolve: {
  50.     alias: {
  51.         'vue$': 'vue/dist/vue.js'
  52.     }
  53. }
  55. #5.package.json、.babelrc还有webpack的所需要安装的内容和之前一致

2.2 使用.vue文件的方式生成组件

vscode中安装vetur插件，可以格式化html、标准css（有分号 、大括号的那种）、标准js（有分号 、双引号的那种）、vue文件

  1. #1. 新建login.vue文件
  3. <template>
  4.   <div>
  5.     <h1>这是登录组件，使用 .vue 文件定义出来的 </h1>
  6.   </div>
  7. </template>
  10. #2.main.js引入.vue文件，并使用
  11. import Vue from 'vue'
  13. import login from './login.vue'
  15. var vm = new Vue({
  16.     el: '#app',
  17.     data: {
  18.         msg: '123'
  19.     },
  20.     components:{
  21.         login
  22.     }
  23. })
  25. #3. index.html
  26. <div id="app">
  27.     <p>{{msg}}</p>
  28.     <login></login>
  29. </div>
  31. #4.安装vue-loader和 vue-template-compiler(默认情况下不支持import方式引入.vue文件，需要安装下面两个文件)
  32. npm i vue-loader@15.4.2 vue-template-compiler@2.6.11
  33. //注意：这里vue-template-compiler版本需要和当前使用的vue版本一致
  35. #5.webpack.config.js
  36. const path = require('path')
  37. var htmlWebpackPlugin = require('html-webpack-plugin');
  38. //1.引入VueLoaderPlugin插件(在vue-loader15版本以后需要配置这个)
  39. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  41. module.exports = {
  42.     entry: path.join(__dirname, './src/main.js'),
  43.     output: {
  44.         path: path.join(__dirname, './dist'),
  45.         filename: 'bundle.js'
  46.     },
  47.     plugins: [
  48.         new htmlWebpackPlugin({
  49.             template:path.resolve(__dirname, 'src/index.html'),//模板路径
  50.             filename:'index.html'  //自动生成的HTML文件的名称
  51.         }),
  52.         // 2.配置VueLoaderPlugin插件
  53.         new VueLoaderPlugin()
  54.     ],
  55.     module: { 
  56.         rules: [ 
  57.             { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  58.             { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  59.             { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  60.             { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader?limit=1024&name=[hash:8]-[name].[ext]' },
  61.             { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, 
  62.             { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  63.             //3.处理 .vue 文件的 loader
  64.             { test: /\.vue$/, use: 'vue-loader' } 
  65.         ]
  66.     },
  67.     resolve: {
  68.         alias: {
  69.            'vue$': 'vue/dist/vue.js'
  70.         }
  71.     }
  72. }

2.3 render渲染组件

  1. #main.js
  3. import Vue from 'vue'
  5. import login from './login.vue'
  7. var vm = new Vue({
  8.     el: '#app',
  9.     data: {
  10.         msg: '123'
  11.     },
  12.     render: c => c(login)
  13. })
  15. //注意：此种方式会替换页面内容

2.4 .vue组件中的数据

2.4.1 模块的导出

a) ES6语法

  1. 在ES6中使用 export default 和 export 导出模块中的成员;
  2. 使用 import from 和 import ‘路径’ 还有 import {a, b} from ‘模块标识’ 导入其他模块
  1. #1. 新建test.js
  2. // 在 ES6 中，使用 export default 和 export 向外暴露成员：
  3. var info = {
  4.   name: 'zs',
  5.   age: 20
  6. }
  8. export default info
  10. /* 注意：
  11.    export default 向外暴露的成员，可以使用任意的变量来接收
  12.    在一个模块中，export default 只允许向外暴露1次
  13.    在一个模块中，可以同时使用 export default 和 export 向外暴露成员
  14. */
  17. export var title = '小星星'
  18. export var content = '哈哈哈'
  20. /*注意：
  21.      使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式叫做 【按需导出】
  22.      export 可以向外暴露多个成员， 同时如果某些成员在我们import 的时候不需要，则可以不在 {}  中定义
  23.      使用 export 导出的成员，必须严格按照导出时候的名称来使用  {}  按需接收；
  24.      使用 export 导出的成员，如果想换个名称来接收，可以使用 as 来起别名；
  25. */
  27. #2. main.js
  28. import minfo3, { title as title123, content } from './test.js'
  29. console.log(minfo3)    //这里的minfo3就是test.js中所暴露出来的default info
  30. console.log(title123 + ' --- ' + content)

注意点：

  1. #1.import命令具有提升特性
  2. foo();
  3. import { foo } from 'my_module'; // 会提升到顶部
  5. #2.import命令会执行所加载的代码，多次import同一个文件只会执行一次
  6. import 'lodash'
  7. import 'lodash'

b) CommonJS模块导出

  1. //1.导出单个成员
  2. var foo = 'bar'
  3. function add(x, y) {
  4.   return x + y
  5. }
  6. exports.foo = 'hello'
  7. exports.add = add
  9. //2.导出多个成员
  10. // 如果一个模块需要直接导出某个成员，而非挂载的方式
  11. module.exports = {
  12.   add: function () {
  13.     return x + y
  14.   },
  15.   str: 'hello'
  16. }
  18. //3.引入模块
  19. const lib = require('./test');

c) es6模块和CommonJS模块区别

1.ES6模块导入是编译时加载，CommonJS模块导入是运行时加载

  1. const lib = require('./test');                                 //运行时加载，后执行
  2. import { number, incCounter } from './test2';    //编译时加载，先执行

2.ES6模块输出的是值的引用，CommonJS模块输出的是一个值的拷贝

  1. #1.CommonJS
  2. // 01-require-lib.js
  3. //CommonJS模块化规范
  4. console.log("testtesttesttest")
  6. var counter = 3;
  7. var obj = {
  8.     name:"zhangsan"
  9. }
  10. function incCounter() {
  11.   counter++; 
  12.   obj.name = "lisi"
  13. }
  15. //导出模块 
  16. //模块输出的是值的拷贝，一旦输出一个值，模块内部的变化就影响不到这个值。
  17. module.exports = {
  18.   counter: counter,  //拷贝
  19.   obj:obj,  //引用
  20.   incCounter: incCounter,
  21. };
  24. // 01-require.js
  25. //如果多次通过require方式去引入同样的模块，模块的代码只会在初次引入的时候执行一次
  26. const test1 = require("./test")   //运行时
  27. console.log(test1);  // 3
  28. test1.incCounter();
  29. console.log(test1); // 3)
  31. const test2 = require("./test") 
  33. #2.ES6
  34. // lib.js
  35. export let number= 3;
  36. export function incCounter() {
  37.     number++;
  38. }
  39. // main.js
  40. import { counter, incCounter } from './lib';
  41. console.log(counter); // 3
  42. incCounter();
  43. console.log(counter); // 4

CommonJS多次加载同一模块的时候，只有第一次加载会运行一次，以后加载同一模块就直接从缓存取出该模块的module.exports属性。ES6多次加载同一模块的时候，只有第一次加载会执行一次，ES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块

2.4.2 .vue中的数据导出

  1. #login.vue
  3. <template>
  4.   <div>
  5.     <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
  6.     <button @click="show">点我</button>
  7.   </div>
  8. </template>
  10. <script>
  11.   export default {
  12.     data() {
  13.       // 注意：组件中的 data 必须是 function
  14.       return {
  15.         msg: "123321"
  16.       };
  17.     },
  18.     methods: {
  19.       show() {
  20.         console.log("调用了 login.vue 中的 show 方法");
  21.       }
  22.     }
  23.   };
  24. </script>

2.5 vue-router使用

vue-router官网

2.5.1 基本使用

  1. #1. 安装路由模块
  2. npm install vue-router --save
  4. #2.login.vue
  5. <template>
  6.   <div>
  7.     <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
  8.     <button @click="show">点我</button>
  9.   </div>
  10. </template>
  12. <script>
  13.   export default {
  14.     data() {
  15.       // 注意：组件中的 data 必须是 function
  16.       return {
  17.         msg: "123321"
  18.       };
  19.     },
  20.     methods: {
  21.       show() {
  22.         console.log("调用了 login.vue 中的 show 方法");
  23.       }
  24.     }
  25.   };
  26. </script>
  28. <style>
  29. </style>
  31. #3.register.vue
  32. <template>
  33.     <div>
  34.         <h1>这是注册组件</h1>
  35.     </div>
  36. </template>
  38. #4.main.js
  39. import Vue from 'vue'
  41. //1.导入VueRouter并且安装
  42. import VueRouter from 'vue-router'
  43. Vue.use(VueRouter)
  45. //2.导入组件
  46. import login from './login.vue'
  47. import register from './register.vue'
  49. //3.创建路由对象
  50. var router = new VueRouter({
  51.     routes: [
  52.         { path: '/', redirect: '/login' },
  53.         { path: '/login', component: login },
  54.         { path: '/register', component: register }
  55.     ]
  56. });
  59. var vm = new Vue({
  60.     el: '#app',
  61.     data: {
  62.         msg: '123'
  63.     },
  64.     //4.挂载路由
  65.     router:router
  66. })
  68. #5.index.html
  69. <div id="app">
  70.     <router-link to="/login">登陆</router-link>
  71.     <router-link to="/register">注册</router-link>
  72.     <router-view></router-view>
  73. </div>
  75. #6.webpack.config.js参照之前的配置

2.5.2 vue-router和render结合使用

  1. # 在上面案例的基础上
  2. #1.新增App.vue
  3. <template>
  4.     <div>
  5.         <h1>账户组件</h1>
  6.         <!--组件中的路由-->
  7.         <router-link to="/login">登陆</router-link>
  8.         <router-link to="/register">注册</router-link>
  9.         <router-view></router-view>
  10.     </div>
  11. </template>
  13. #2.main.js
  14. import app from './App.vue'
  15. var vm = new Vue({
  16.     el: '#app',
  17.     data: {
  18.         msg: '123'
  19.     },
  20.     //渲染组件替换el
  21.     render:e=>e(app),
  22.     router:router
  23. })
  25. #3.index.html
  26. <div id="app">
  28. </div>

2.5.3 路由嵌套

  1. # 在上面案例的基础上
  2. #1. 新建subcom/findpwd.vue
  3. <template>
  4.     <div>
  5.         <h1>找回密码</h1>
  6.     </div>
  7. </template>
  9. #2. 新建subcom/thirdpartlogin.vue
  10. <template>
  11.     <div>
  12.         <h1>微信登陆</h1>
  13.     </div>
  14. </template>
  16. #3.修改login.vue
  17. <template>
  18.   <div>
  19.     <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
  20.     <button @click="show">点我</button>
  22.     <router-link to="/login/findpwd">找回密码</router-link>
  23.     <router-link to="/login/thirdpartlogin">第三方登陆</router-link>
  24.     <router-view></router-view>
  25.   </div>
  26. </template>
  28. <script>
  29.   export default {
  30.     data() {
  31.       // 注意：组件中的 data 必须是 function
  32.       return {
  33.         msg: "123321"
  34.       };
  35.     },
  36.     methods: {
  37.       show() {
  38.         console.log("调用了 login.vue 中的 show 方法");
  39.       }
  40.     }
  41.   };
  42. </script>
  44. #4.在main.js中配置子路由
  45. var router = new VueRouter({
  46.     routes: [
  47.         { path: '/', redirect: '/login' },
  48.         { path: '/login',
  49.           component: login,
  50.           children:[
  51.               {path:'findpwd',component:findpwd},
  52.               {path:'thirdpartlogin',component:thirdpartlogin}
  53.           ]
  54.         },
  55.         { path: '/register', component: register }
  56.     ]
  57. });

2.6 组件样式

  1. # 在上面代码的基础上
  2. #login.vue新增样式
  3. <style scoped>
  4.   /*scoped作用域，如果不加scoped，则h1的样式会默认使用为全局而非当前组件*/
  5.   h1{
  6.     color: red;
  7.   }
  8. </style>
  10. #account.vue新增样式
  11. <style lang="scss" scoped>
  12.     /*要编译sass只需要lang="scss"就可以
  13.       scoped 推荐使用*/
  14.     body{
  15.         h1{
  16.             background-color: blue;
  17.         }
  18.     }
  19. </style>
  22. //scoped的原理：scoped实际上是给当前组件的所有元素加上data-v-f626523的属性来实现的样式隔离

2.7 抽离路由为单独的模块

  1. #1.main.js
  2. import Vue from 'vue'
  3. //导入VueRouter并且安装
  4. import VueRouter from 'vue-router'
  5. Vue.use(VueRouter)
  7. import account from './account.vue'
  8. //导入路由模块
  9. import router from './router.js'
  11. var vm = new Vue({
  12.     el: '#app',
  13.     data: {
  14.         msg: '123'
  15.     },
  16.     render:e=>e(account),
  17.     //挂载路由
  18.     router:router
  19. })
  22. #2.router.js
  23. import VueRouter from 'vue-router'
  24. //导入组件
  25. import login from './login.vue'
  26. import register from './register.vue'
  28. import findpwd from './subcom/findpwd.vue'
  29. import thirdpartlogin from './subcom/thirdpartlogin.vue'
  31. //创建路由对象
  32. var router = new VueRouter({
  33.     routes: [
  34.         { path: '/', redirect: '/login' },
  35.         { path: '/login',
  36.           component: login,
  37.           children:[
  38.               {path:'findpwd',component:findpwd},
  39.               {path:'thirdpartlogin',component:thirdpartlogin}
  40.           ]
  41.         },
  42.         { path: '/register', component: register }
  43.     ]
  44. });
  46. //导出路由对象
  47. export default router;

3.vuex介绍

3.1 vuex概念

https://vuex.vuejs.org/zh/installation.html

vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据；

3.2 vuex的基本使用

  1. #1.拷贝原项目中除了node_modules之外的其他信息，运行npm install安装模块 
  3. #2.安装vuex
  4.  npm i vuex -S
  6. #3.main.js
  7. import Vue from 'vue'
  8. import Vuex from 'vuex'
  10. // 注册vuex到vue中
  11. Vue.use(Vuex)
  13. // new Vuex.Store()实例，得到一个数据仓储对象
  14. // 可以在组件中通过this.$store.state.xx 来访问store中的数据
  15. var store = new Vuex.Store({
  16.     //state相当于组件中的data
  17.     state: {
  18.         count: 0
  19.     },
  20.     //如果要修改store中state的值，需要调用 mutations提供的方法，可以通过this.$store.commit('方法名')来调用
  21.     mutations: {
  22.         increment(state) {
  23.             state.count++
  24.         },
  25.         //mutations函数参数列表中最多支持两个参数，其中参数1是state； 参数2是通过commit提交过来的参数；
  26.         subtract(state, obj) {
  27.             console.log(obj)
  28.             state.count -= obj.step;
  29.         }
  30.     },
  31.     getters: {
  32.         //这里的getters只负责对外提供数据，不负责修改数据，如果想要修改 state 中的数据需要在mutations中修改
  33.         optCount: function (state) {
  34.             return '当前最新的count值是：' + state.count
  35.         }
  36.     }
  37. })
  39. // 总结：
  40. // 1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations
  41. // 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.***
  42. // 3. 如果组件想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称'， 唯一的一个参数)
  43. // 4. store中state上的数据在对外提供的时候建议做一层包装，推荐使用 getters。调用的时候则用this.$store.getters.***
  46. import App from './App.vue'
  48. const vm = new Vue({
  49.     el: '#app',
  50.     render: c => c(App),
  51.     //将vuex创建的store挂载到VM实例上，只要挂载到了 vm 上，任何组件都能使用store来存取数据
  52.     store
  53. })
  55. #4.index.html
  56. <body>
  57.     <div id="app"></div>
  58. </body>
  60. #5.App.vue
  61. <template>
  62.     <div>
  63.         <h1>这是 App 组件</h1>
  64.         <hr>
  65.         <counter></counter>
  66.         <hr>
  67.         <amount></amount>
  68.     </div>
  69. </template>
  71. <script>
  72.     import counter from "./components/counter.vue";
  73.     import amount from "./components/amount.vue";
  75.     export default {
  76.         data() {
  77.             return {};
  78.         },
  79.         components: {
  80.             counter,
  81.             amount
  82.         }
  83.     };
  84. </script>
  86. #6.components/amount.vue
  87. <template>
  88.   <div>
  89.     <h3>{{ $store.getters.optCount }}</h3>
  90.   </div>
  91. </template>
  93. #7.components/counter.vue
  94. <template>
  95.   <div>
  96.     <input type="button" value="绑定事件-减少" @click="sub">
  97.     <input type="button" value="绑定事件-增加" @click="add">
  98.     <br>
  99.     <input type="text" v-model="$store.state.count">
  100.   </div>
  101. </template>
  103. <script>
  104. export default {
  105.   data() {
  106.     return {
  107.     };
  108.   },
  109.   methods: {
  110.     add() {
  111.        this.$store.commit("increment");
  112.     },
  113.     sub() {
  114.       this.$store.commit("subtract",{ step:3});
  115.     }
  116.   }
  117. };
  118. </script>

3.3 vuex异步修改状态

mutation的使用局限：mutation必须是同步函数，如果有异步操作，可以在actions完成

  1. #main.js中给store添加actions的方法
  2. var store = new Vuex.Store({
  3.     // state相当于组件中的data
  4.     state: {
  5.         count: 0
  6.     },
  7.     // 如果要修改store中state的值，需要调用 mutations提供的方法，可以通过this.$store.commit('方法名')来调用
  8.     mutations: {
  9.         increment (state) {
  10.             state.count++
  11.         },
  12.         // mutations函数参数列表中最多支持两个参数，其中参数1是state； 参数2是通过commit提交过来的参数；
  13.         subtract (state, obj) {
  14.             console.log(obj)
  15.             state.count -= obj.step
  16.         }
  17.     },
  18.     getters: {
  19.         // 这里的getters只负责对外提供数据，不负责修改数据，如果想要修改 state 中的数据需要在mutations中修改
  20.         optCount: function (state) {
  21.             return '当前最新的count值是：' + state.count
  22.         }
  23.     },
  24.     actions: {
  25.         // action中的方法允许异步事件
  26.         increment ({ commit }) {
  27.             setTimeout(() => {
  28.                 // 提交mutations中的increment方法
  29.                 commit('increment')
  30.             }, 1000)
  31.         },
  32.         subtract ({ commit }, obj) {
  33.             // 返回一个Promise，以便做回调
  34.             return new Promise((resolve, reject) => {
  35.                 setTimeout(() => {
  36.                     commit('subtract', obj)
  37.                     resolve()
  38.                 }, 1000)
  39.             })
  40.         }
  41.     }
  42. })
  44. #components/counter.vue
  45. methods: {
  46.     add () {
  47.         // dispatch 触发指定的action
  48.         this.$store.dispatch("increment")
  49.     },
  50.         sub () {
  51.             this.$store.dispatch("subtract", { step: 3 })
  52.                 .then(() => {
  53.                 console.log("减少操作完成")
  54.             })
  55.         }
  56. }

3.4 vuex的模块

  1. #1.使用Vuex.Store中的modules声明多个模块
  2. const moduleA = {
  3.   state: {
  4.     count: 1
  5.   },
  6.   mutations: {
  8.   }
  9. }
  11. const moduleB = {
  12.   state: {
  13.     count: 11
  14.   },
  15.   mutations: {
  17.   }
  18. }
  20. const store = new Vuex.Store({
  21.   modules: {
  22.     a: moduleA,
  23.     b: moduleB
  24.   }
  25. })
  27. #2.使用不同模块中的数据
  28. <div>
  29.     <h3>{{ $store.state.a.count }}</h3>
  30.     <h3>{{ $store.state.b.count }}</h3>
  31. </div>

3.5 刷新网页时vuex缓存

https://blog.csdn.net/weixin_42233917/article/details/82217596

4.vue中UI框架

4.1 常用框架介绍

PC桌面端UI框架：

  1. 1. iview          （用户评分高功能多炫酷，解决和避免了其他UI框架出现的一些小问题）
  2. 2. bootstrap  （使用用户最多）
  3. 3. ElementUI  （饿了么团队研发，使用较多不过里还有些小bug）
  4. 4. ant design  (阿里的)

手机端UI框架：

  1. 1.BUI       
  2.    http://www.easybui.com/docs/  很不错官网有视频介绍。视频里有介绍非常非常实用的工具，建议去看官网视频。
  3. 这个框架有现成的模板只需要一个创建模板的命令就可以创建一个大致的具有交互功能的页面。
  4. 2.vux  
  5.   vux 基于WeUI和Vue(2.x)开发的移动端UI组件库
  6.   基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。
  7. 3.Mint UI
  8.   Mint UI 由饿了么前端团队推出的，Mint UI 是一个基于 Vue.js 封装的移动端组件库
  9. 4.Vant UI

4.2 Vant UI 框架介绍

4.2.1 css组件使用

  1. 1.安装Vant UI
  2.   npm i vant -S
  4. 2.main.js 导入MintUI，并注册到Vue
  5.   import Vue from 'vue'
  6.  //全局引入Vant UI的样式以及组件库
  7.  import 'vant/lib/index.css';
  8.  import Vant from 'vant';
  9.  Vue.use(Vant);
  11.   var vm = new Vue({
  12.     el: '#app',
  13.     data: {
  14.         msg: '123'
  15.     },
  16.     render:e=>e(app)
  17.   })
  20. 3.app.vue
  21. <template>
  22.     <div>
  23.         <van-button type="default" @click="showPopup">默认按钮</van-button>
  24.         <van-button type="primary">主要按钮</van-button>
  25.         <van-button type="info">信息按钮</van-button>
  26.         <van-button type="warning">警告按钮</van-button>
  27.         <van-button type="danger">危险按钮</van-button>
  29.         <van-popup v-model="show">内容</van-popup>
  30.     </div>
  31. </template>

4.2.2 按需导入组件

  1. //1.安装babel-plugin-import插件
  2.     npm i babel-plugin-import -D
  3. //2.修改babel的配置文件
  4.     {
  5.     "presets": [
  6.         "env",
  7.         "stage-0"
  8.     ],
  9.     "plugins": [
  10.         "transform-runtime",
  11.         [
  12.             "import",
  13.             {
  14.                 "libraryName": "vant",
  15.                 "libraryDirectory": "es",
  16.                 "style": true
  17.             }
  18.         ]
  19.     ]
  20. }
  21.  //3.修改main.js
  22. //按需加载 用到什么就去引入什么
  23. import { Button,Popup,Form,Field } from 'vant';
  24. Vue.use(Button);
  25. Vue.use(Popup);
  26. Vue.use(Form);
  27. Vue.use(Field);

5.参考文章

阮一峰-Module 的语法

解析 Webpack中import、require、按需加载的执行过程

【webpack进阶】前端运行时的模块化设计与实现