Vue学习

2020/9/20

简写

SPA: single page application
MPA: multi page application

2020/9/21

编译文件

编译后的文件一般通过file://协议无法直接查看页面，可通过全局安装startserver使用
快捷install 并 startserver

npm i startserver -g

webpack:

别名设置:

resolve: {
	extensions: ['.js', '.vue', '.json'],
	alias: {
	  'vue$': 'vue/dist/vue.esm.js',
	  '@': resolve('src'),
	}
},

这样设置之后,在需要导入src目录下文件时可使用 @作相对定位,
例如src/api/login.js可使用

import login from '@/api/login'

webpack打包优化策略

一.不编译Vue，改为cdn导入

1. 配置
   webpack.prod.conf.js中的webpackConfig中添加：

externals: {
    'vue': 'Vue',// 优化：不将vue打入包
  },

2.进行条件判断，通过cdn导入vue
webpack.prod.conf.js中的webpackConfig中的new HtmlWebpackPlugin中添加：
env:'production',

index.html中head标签中添加判断：

<% if(htmlWebpackPlugin.options.env=='production'){%>
    <script src="https://lib.baomitu.com/vue/2.5.23/vue.min.js"></script>
<%}%>

重新编译即可
二.Vue路由模块，使用import按需加载

Vue全家桶

vue-router:路由

2020/10/18

vue插件:

插件都需要使用use来注入
Vue.use(Vuex)

虚拟列表滚动

列表翻动过程是行数据的更新

数据流管理/vuex: 数据管理核心

1.异步的流程在哪个环节? actions
2.action可以调用其他的action吗? 可以
3.组件里面可以直接调用mutations吗? 可以
4.什么是mapActions和mapMutations?
```
是组件中取对应action和mutation时的应用
例如:
在computed中定义...mapActions(['addTodo'])后,可直接在组件内函数调用 this.addTodo();
也可以给它做个别名,同样在computed中定义...mapActions({add:'addTodo'})后,可直接在组件内调用 this.add();
```
5.getters有什么用?
`可用于封装state的取值,具体参考项目中vue.store实例中的getters应用`
6.只能mutations来修改state吗? 对的

使用场景: 两个或多个地方使用一个数据.
package.json中定义vuex包版本--npm install
src/store/index.js中注入vuex到vue: Vue.use(Vuex) 并导出一个vuex仓库:vuex.store
数据流对象由state,mutations,actions组成.
mutations:仓库管理员,只能由mutations修改state,mutations中的key采用全大写下划线连接的格式.
mutations的调用: 放在actions中,也可在页面在this.$store.commit();
actions的调用: 页面内this.$store.dispatch('ActionName',paramAction).then((res)=>{}).catch((e)=>{});
存储在vuex的state中的变量也是有双向绑定的,使用的时候只需在computed中定义...mapGetter{"username"}

mixin:

当mixin与组件定义data同名的时候以组件的data为准
当mixin与组件生命周期都定义时,mixin较组件先执行
当mixin中methods/components/directives与组件定义重名时,执行组件的.

…obj: es6的写法

computed: 计算属性,vue独有.

flex

常用的三个属性

display:flex,
flex-drection:row/column
align-items:center/flex-start/flex-end/baseline
justify-content:

watch:

高级用法:监听deep属性,即对对象的某个属性进行监听
```
watch:{
	'obj.a':{
		handler(newA, oldA){
		},
		immediate: true,
		// deep: true
	}
}
```
高级用法:监听路由
```
watch:{
	$route(route):{
		// if you go to the redirect page, do not update
		if(route.path.startwith('/redirect/')){
			return;
		}
	}
}
```

$set

1.vue不能检测到对象属性的添加或删除
2.响应式对象
```
数组: 参数注意
this.$set(Array,index,newValue);
对象
this.$set(Object,key,value);
```

路由:

vue-router嵌套路由:

https://router.vuejs.org/zh/guide/essentials/nested-routes.html

asyncRoutes:

动态判断权限并通过addRoutes动态添加的页面
https://router.vuejs.org/zh/api/#router-addroutes

路由守卫

const whitelist=CONSTANT.WHITE_LIST
router.beforeEach((to,from,next)=>{
	NProgress.start();
	if(getToken()){
	}else{
		// 如果在白名单,继续!
		if(-1!==whitelist.indexOf(to)){
			next();
		}else{
			next('/login');
			NProgress.done();
		}
	}
})

路由后置

这里没有next

	router.afterEach(()=>{
		NProgress.done();
	})

$forceUpdate

当在data里没有显式地声明一个对象的属性,而是之后给该对象添加属性,这种情况vue是检测不到数据变化的,可以使用$forceUpdate

Mock数据 (模拟数据)

1. 项目本地开发使用了接口转发，配置见 /config/index.js 中 proxyTable 配置项，转发地址可根据实际开发情况进行修改，修改完成后，需重新运行 npm run dev
2. 根据与后端协商的接口规则，在/mock目录下，创建与接口相同路径的JSON文件，并在接口请求参数中配置 mock: true，则该接口就会命中本地mock数据，该配置不影响上线部署

request数据

Promise
axios实例
interceptors.request
interceptors.response