脚手架
-
安装脚手架
-
关闭source-map
- config>index.js>productionSourceMap:false
-
压缩gzip
- yarn add compression-webpack-plugin
- config>index.js>productionGzip: true
- 后端服务器中间件开启gzip支持
- nginx:
//nginx.conf gzip on; gzip_types application/javascript application/octet-stream text/css image/jpeg; -
修改静态资源根路径(假设要把所有静态资源放在xxx项目目录下)
- config>index.js>build>assetsPublicPath: '/xxx/'
注入vuex
- 安装
//yarn add vuex
import Vue from 'vue'
import App from './App'
import router from './router'
/*
1.将vuex的所有方法注入到每个子类
2.用store配置文件生成一个注册了get set监听的新实例
3.将生成的新实例放入Vue实例属性中
*/
import Vuex from 'vuex'
//引入store配置文件
import storeConfig from './store/index'
Vue.config.productionTip = false;
//注入到每个实例中,让每个实例都有访问Vuex方法的权限
Vue.use(Vuex);
//将store配置文件注册监听
const store = new Vuex.Store(storeConfig);
new Vue({
el: '#app',
router,
//将注册号监听后的store实例放到vue实例中,让每个vue实例都可以访问到store实例
store,
template: '<App/>',
components: { App }
})
- 用法
//storeConfig.js
import axios from 'axios';
export default {
//设置子模块store 并配置每个模块的命名空间
modules: {
"index": {
namespaced: true,
state: {
count: 0
},
//用于处理state,不能执行异步操作,在vue实例中用$store.commit(funcName,param)调用
mutations: {
increment(state, params) {
console.log(params);
state.count++
}
},
actions: {
//虽然mutaions不能异步处理，
//但是可以用actions异步处理后调用传入的store实例的commit来调用mutations,
//使用$store.dispatch(funcName,param)调用
async addCount({rootState, state, commit}, params) {
let res = null;
try {
res = await axios.get("xx/xx");
commit("increment", res.data);
} catch (error) {
commit("increment", "error");
console.log(error);
}
}
},
//类似computed
//$store.getters.myCount返回的是一个函数->闭包引用了state
//此时传递参数给返回的函数就可以获取一个处理过的state值
getters: {
myCount(state) {
return num => state.count + num;
}
}
}
}
}
//App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<div class="test-bg">{{count}}</div>
<div class="test-bg">{{oriCount}}</div>
</div>
</template>
<script>
// vuex提供了一些工具供使用
import {mapGetters,mapActions,mapState} from 'vuex'
export default {
name: 'app',
created(){
// 这两句作用相当
this.$store.dispatch("index/addCount","test");
this.pulCount("test");
},
methods:{
...mapActions("index",{
pulCount:"addCount"
})
},
computed:{
// 第一个参数是命名空间,第二个参数是注入了state的计算数学
...mapState("index",{
oriCount:state=>state.count
}),
...mapGetters("index",[
"myCount"
]),
count(){
return this.myCount(2);
}
}
}
</script>
<style>
</style>
注入router
- 安装
- yarn add vue-router
- 用法
- 配置和vuex一样
- 设置每个路由标题
```javascript
router.beforeEach((to, from, next) => {
document.title = to.meta.title||'龙城e驾';
next()
});
```
- 路由使用
```javascript
//点击转跳路由
<router-link :to="{path:'hello',query:{name:'vijay'}}">hello</router-link>
//获取路由路径参数
this.$router.currentRoute.query["name"]
//
```
- 嵌套路由
//config
import HelloWorld from '@/components/HelloWorld'
import asd from '@/components/asd'
export default {
routes: [
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld,
children:[
{
path: '/xx',
component: asd,
}
]
},
]
}
//HelloWorld.vue
//在子控件中点击切换路由 也会显示到子控件的routerview上
<router-link :to="{path:'/xx'}">asdasda</router-link>
<router-view/>
- 子父路由通信
- 父->子路由传参数请看上面
- 子->父 传参数
//child.vue
created() {
this.$emit("hello","test","test2");
}
//parent.vuew
<router-view @hello="listener" />
methods:{
listener(p1,p2){
console.log(p1,p2);
}
},
vue语法
-
通信
- 子->父（双向数据绑定）
//子 <input type="text" v-model="myName"> export default { props: { name: String }, computed: { //自定义一个计算属性,通过重写他的get set来充当双向数据绑定的媒介 myName: { get() { return this.name; }, set(val) { this.$emit("update:name", val); } } } } //父 //.sync其实是实现了一个@update:name="val=>name=var"的语法糖 <asd-component :name.sync="name"></asd-component>- 父->子通信
```javascript
//父
//:name等于v-bind:name="xxx"
<asd-component :name="name"></asd-component>
//子
props: {
name:{
type: String,
default:"默认值"
}
},
```
-
监听指令修饰符
- @click.prevent:表示让元素不触发默认事件,等同于在事件函数内调用event.preventDefault。(如:让按钮不提交表单)
- @click.stop:让元素的事件不冒泡,等同于stopPropagation
- e.target是当前触发事件的元素，e.currentTarget是当前处理事件的元素
-
计算属性与侦查器(watchs)
- 计算属性用于对某个属性数据的封装处理返回一个处理后的值，以及充当双向数据绑定的媒介
- 侦查器用于监听某个属性数据值发生改变时，触发另一个事件(函数),不需要像data属性那样作为数据使用的情况。
-
动态绑定html元素属性
//html <div class="hello" :class="{'active':isActive,'error':isError}">hello</div> //js data() { return { name:"vijay", isActive:true, isError:true } } //渲染结果 <div data-v-469af010="" class="hello active error">hello</div>- 当然,也可以绑定一个计算属性或者三元表达式去计算出class值
- 绑定style属性时,要传入一个对象,css样式作为属性时名称要写成驼峰式
vue的数组属性无法监听length的get set.所以在修改length或者使用arr[xindex]=x的时候修改数组角标上的内容是无法触发页面更新的,所以建议使用数组的splice方法(因为数组方法被vue重写了)进行角标替换或者新增角标赋值,arr.splice(开始角标,删除几个角标,替换成什么值)。
