我正在参加「掘金·启航计划」
vuex 公共状态管理
五大部分组成 state(基本数据),getters(计算属性),mutations（同步方法）,actions（异步方法），store（模块）
基本数据：直接state声明即可
计算属性：getters 分为两种 一种是基于state进行重新计算 ，一种是基于计算属性进行在计算。两个形参 state，getters
同步方法 ：mutations 两个参数 state和payload ，payload传入的数据
异步方法 ：actions 本质上还是重新调用mutations中的同步方法 两个参数 context和payload ，从context本身具备state，getters，commit，dispatch。 说明既可以用commit调用同步也可以dispatch调用异步
模块化 ：module 模块划分 namespaced是否为独立空间
默认情况下子模块中state会对应模块名称,挂载到父模块(父store)下, getters,mutations,actions中的属性和方法会挂载到根store (取值直接从根store中取即可 -> 缺点: getters,mutations,actions全都挂载在根store,依存关系不明显)
声明方式都一样，也可以子模块里面再嵌套模块
如果namespaced为true
是否设置命名空间(默认false 如果设置为true state,getters,mutations,actions都会对应模块名称挂载到父store) 模块划分的比较精准 -> 取值比较麻烦
复杂方法 this.$store.
简单的调用方法 通过映射
webpack配置
入口和出口文件
可以单入口也可以是多入口 多入口采用对象写法
出口文件： path.resolve 用于解析绝对路径的，_dirname会自动定义到根目录中，第二个参数是会创建的文件夹名字。 filename 是文件名字 ，hash：8生成8位hash乱码
插件的使用
页面js自动更新插件
安装插件html-webpack-plugin 进行页面js自动引入更新 npm install html-webpack-plugin --save-dev
webpack.config.js中引入
var HtmlWebpackPlugin = require("html-webpack-plugin");
配置
css的处理
引入css-loader
npm install --save-dev css-loader
npm install --save-dev style-loader
rule中配置
会出现js中包含css问题 ，js和css分离，css压缩
安装辅助 npm install --save-dev mini-css-extract-plugin npm i -D css-minimizer-webpack-plugin
引入 var MiniCssExtractPlugin = require('mini-css-extract-plugin'); 配置 先在plugins中配置插件 ，然后在rules中配置
启动服务
安装服务
npm install webpack-dev-server --save-dev
本身基于express服务器
可以在package.json 中配置启动命令
"scripts": {
"serve": "webpack serve --mode production",
"test": "echo "Error: no test specified" && exit 1"
},
也可以自定义端口 webpack.config.js
es6中转es5
安装转换插件
npm install --save-dev babel-loader @babel/core @babel/preset-env
配置 在rules中 转化完成可以看懂代码
并且新建babelrc文件（根目录）写入
{
"presets": ["@babel/preset-env"]
}
图片处理
1就应该使用file-loader (webpack5 以后就不用处理图片了)
安装 npm install file-loader --save-dev
配置vue识别
安装 npm i vue-loader@15 vue-template-compiler@2.6.14
引入
const VueLoaderPlugin = require('vue-loader/lib/plugin');
rules
