VUE
参考资料：
https://cn.vuejs.org/
https://router.vuejs.org/zh-cn/
https://vuex.vuejs.org/
https://github.com/vuejs/awesome-vue
一、vue+jquery
vue(IE9+)
企业后台或企业站
二、vue全家桶：vue+ES6+vuerouter+less(sass或stylus)+vuex+webpack+......
通过用vue脚本架来开发项目
npm install -g @vue/cli
如果npm install安装一些依赖包慢，可以换成淘宝镜像：
npm config set registry https://registry.npm.taobao.org
禁用eslint代码检查：config->index.js 找一下 useEslint: true,改成false
真机测试： 打开vue脚本架 config->index.js 中的host:"localhost"改为 host: '0.0.0.0'
打包路径：打开vue脚本架 config->index.js 中的
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
将 assetsPublicPath: '/',改成assetsPublicPath: './'
移动端H5页面高清多屏适配方案:
https://note.youdao.com/share/?id=8e3044287f1ab4822b3647cfa21c67e5&type=note#/
通常浏览器默认使用的字号：16px;
浏览器最小能设置12px号字
可以通过 transform:scale(0.8) 缩入
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
//less: npm install less less-loader --save-dev
//sass: npm install sass-loader node-sass --save-dev
<style lang="less" scoped>
@import "../static/css/reset.css";
header {
height:@h;
background: #000;
color: #fff;
text-align:center;
line-height: .4rem;
}
</style>
scoped:使每个组件都有一个局部样式，和其他组件样式不冲突
自定义高亮类：
const router=new VueRouter({
linkExactActiveClass:"active",
routes
});
vue的事件修饰符：
.stop：阻止冒泡
.prevent：阻止默认行为
.capture
.self
.once：只触发一次
.passive:.passive 修饰符尤其能够提升移动端的性能。
CommonJS:属于服务端规范，产生物是node.js
AMD,CMD:浏览器规范，属于异步规范
AMD:Async Module Document,产出物：require.js
CMD:comon mudle Document,产生物：sea.js
自定义指令：
1.解决问题：主要解决操作dom问题
2.使用方法
全局：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
vue钩子：
1.生命周期钩子:
创建：beforeCreate,created(创建后，通常用于获取后台数据)
挂载：beforeMount,mounted(dom加载后，通常用于对页面dom操作时)
更新：beforeUpate,updated
销毁：beforeDestroy,destroyed
2.路由钩子（三类）
3.自定义指令钩子（5种）
keep-alive
VUEX
Vuex：是一个集中式状态管理工具，相当于react中的 redux
1） 主要解决的问题：大中型项目中复杂组件通讯问题
2） vuex操作流程：
dispatch commit
vue组件---------------->actions------------>mutations------->state-------->vue组件更新
3）vuex的重要概念：
state:要保存的状态
mutations:是最终改变状态的方法集，mutations中的代码是同步执行的
actions:
4）使用步骤：
第一步：先安装vuex
npm install vuex --save
第二步：在src创建一个store目录，用来存放vuex相关文件
第三步：在store目录先创建一个index.js文件，做为vuex入口文件
第四步：在store目录的index.js中，写入下面的内容
//引入vuex，vue
import Vuex from 'vuex';
import Vue from 'vue';
//让vue识别vuex
Vue.use(Vuex);
//存储状态
const state={
userinfo:{
username:'张三',
age:20,
token:'1001'
}
}
//将vuex暴露出去
export default new Vuex.Store({
state
});
第五步：在main.js中引入store，并在new Vue中注册
//引入vuex
import store from './store';
new Vue({
.......
store,
........
});
第六步：如何获取和设置数据
获取：在对应组件的computed中处理
即： this.$store.state来获取
设置/修改数据:通过commit到mutations来修改state
如何提高vuex的使用体验：
1.优化state写法
import {matpState} from 'vuex'
在计算属性中添加下面的内容：
computed:{
//组件的计算属性
str() {
return "hello"+this.msg
},
//vuex的数据
...mapState({
address:'address',
userinfo:'userinfo'
})
}
}
2.优化actions,mutations
import { mapState,mapActions,mapMutations } from 'vuex';
...mapActions(['gomodify','aa','bb']),
...mapMutations(['setValue']),
3.隔离vuex各部分，提高可维护性
