Vuex里的module选项和移动端布局
Vuex里的modules
在一个大型单页面项目中，当共享的数据足够多时，所有的共享数据全部放在store/index.js文件夹里非常的冗余，可能有成百上千行代码，寻找起来很不方便。
在store文件夹里创建一个modules的文件夹，里面随意创建一个对应模块语义化的.js文件(如test.js)，然后export输出
这样这个文件夹就成了一个模块，再在原先的index.js文件里加入一个modules选项
上图中Vuex.Store的实例对象里放了原先堆叠好的store之后还是可以放其他的选项的，这就相当于总部，而modules里相当于分部，工作中为了避免模块紊乱，通常都写在modules里。
因为都放在store的modules里的键为test里了，所以对应的引用界面需要这样引用--->>>
这样写固然可以，但是代码冗余，非常长，不利于管理，
因而这里就需要引用modules中的几个辅助函数------mapState,mapGetters,mapActions,mapMutations.
通常工作中常用mapState进行映射，想用谁就把谁映射进来
mapState只能在计算属性中使用，找到对应的需要应用的组件，里面实例里加上计算方法，用mapState进行映射。
这样v-text里就可以直接用msg来引用vuex里的共享数据了。
在test.j里加上这么一条.
mapActions同上，mapactions要放在methods里
对应的组件里都换成msg、total、this.addCount()……………………等等。
注：data里的数据不能和计算属性里的数据冲突。
modules：
把vuex根store，拆分成多个子store（module），以方便开发维护。
使用方法：
1、在new Vuex.Store({modules:{m1,m2,m3}})
2、子store（module）就是一个普通的对象
~~~
export default {
namespaced:true,
state:{},
getters:{},
mutations:{},
actions:{}
}
3、组件中如何使用子store（modules）的数据和方法呢？
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
```
```
computed:{
...mapState('m1',['msg']),
...mapGetters('m2',['total'])
},
methods:{
...mapMutations('m3',['addTodo']),
...mapActions('m3',['ajaxGet'])
}
引入多个不同的模块，变量名不能重复
移动端布局：
若先改端口，在项目根目录新建一个vue.config.js（只能是这个）。
为了解决移动端端口适配问题，在public文件夹里创建一个rem.js的文件，里面写上代码
//作用：重置html的font-size
function resetRootFZ(){
var oHtml=document.querySelector('html');
var w=oHtml.getBoundingClientRect().width;
oHtml.style.fontSize=w/10+'px';
}
resetRootFZ();
//当window窗口尺寸发生变化时，重新设置字体的大小
window.addEventListener('resize',function(){
resetRootFZ();
})
并在public里的index.html主页中引入该文件
①：在vscode里安装一个创建---> px to rem
②：点击文件->首选项->设置->插件，找到px to rem，改成如下设置。
之后写完px单位后，按下alt+z可以自动将px单位转换为对应rem的单位。比率为上图中的比率，750px-->10rem(750/75)
Sass
Vue官方文档里，vue cli，指南，开发css相关
在项目根目录
1.npm install sass-loader -D(生产环境安装即开发依赖，上线后已经转化了，所以不需要-S)
2.npm isntall sass -D 安装sass
在vue的对应组件的style里，用lang属性赋值为scss.即sass文件后缀。
Vant见readme.md文件：
vant是一个专注于移动端的vue UI组件库（react中不可用）。
npm install vant -S
npm install babel-plugin-import -D---->自动按需引入组件插件
安装玩这个插件之后，根目录下会有一个babel.config.js的文件，加上一段代码
module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };
这段代码作用：引入vant UI的样式文件。
然后重启项目，在对应组件中引入你需要的代码，vant官方文档里写的非常清楚。
vant的特殊性：
这样写完看上去没问题，其实vant里的每个组件都很特殊，打印出来的Button是这样的。
正确写法：
或者第二种方法：
components:{
Button:Button
}
在template里引用时用
<Button type="default">默认按钮</Button>
这样也可以生效。
总结：
