腳手架
-
安裝腳手架
-
關閉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(開始角標,刪除幾個角標,替換成什么值)。
