在使用思維導(dǎo)圖總結(jié)Vue.js官方文檔（例子優(yōu)化、難點(diǎn)及易錯點(diǎn)注釋）【下】 中我們使用 vue-router及vuex時引入它們的方式是直接以<script src="xxx">的方式引入且就在一個文件中寫肥惭。但是實(shí)際開發(fā)時么伯，我們并不是這樣操作的疟暖，一般我們會使用vue-cli腳手架。但是使用vue-cli的話，我們在引入vue-router及vuex時寫法會稍有不同俐巴，這里我來舉個通俗易懂的例子（每一步都很詳細(xì)且代碼中比較重要或者難以理解的地方我都注釋出來了骨望，希望對大家有所幫助）。
安裝vue-cli步驟我就不細(xì)寫了欣舵。擎鸠。。
全局安裝 vue-cli
npm install --global vue-cli
創(chuàng)建一個基于 webpack 模板的新項(xiàng)目
vue init webpack vue-cli
安裝依賴缘圈，走你
cd vue-cli
npm install
npm run dev
一劣光、在vue-cli中使用vue-router
最終實(shí)現(xiàn)效果：點(diǎn)擊鏈接進(jìn)入相應(yīng)的路由（url）。
點(diǎn)擊鏈接進(jìn)入相應(yīng)的路由.gif
實(shí)現(xiàn)步驟：
1糟把、首先確保你安裝了vue-router
可在vue-cli根目錄中的package.json中的dependencies看有無vue-router绢涡；
2、確保vue-cli根目錄下的src中的main.js中引入了router;
//main.js
import Vue from 'vue'
import App from './App'
import router from './router' //這里引入了router
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //這里掛載了router
template: '<App/>',
components: { App }
})
3糊饱、由于在main.js中import router了 import router from './router' 垂寥，因此我們要確保 src/router/index.js里的代碼完整且正確颠黎；
//index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
//import xxx from '@/components/xxx' 中的@表示src
// 因?yàn)閣ebpack.base.conf中別名這樣寫了==> alias: {'@': resolve('src')}
import Hello1 from '@/components/Hello1' //引入Hello1組件
import Hello2 from '@/components/Hello2' //引入Hello2組件
import notFind from '@/components/notFind' //引入notFind組件
Vue.use(Router) //這句別忘記了
export default new Router({
mode:'history', //使用history防止url中出現(xiàn)#
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
,{
path: '/hello1',
name: 'Hello1',
component: Hello1
}
,{
path: '/hello2',
name: 'Hello2',
component: Hello2
}
,{
path: '*',
name: 'notFind',
component: notFind
}
]
})
4另锋、由于在index.js 引入了（import）src目錄下的components 中的 Hello.vue 、Hello1.vue 狭归、Hello2.vue及 notFind.vue夭坪，因此我需要完善相應(yīng)代碼：
Hello.vue
//Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '我是src/components里的hello.vue，我通過app.vue里的router-view展示'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Hello1.vue
//Hello1.vue
<template>
<div>
<h1>我是Hello1.vue</h1>
</div>
</template>
<script>
export default {
name:'Hello1',
data:function () {
return {}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Hello2.vue
//Hello2.vue
<template>
<div>
<qipa1-component></qipa1-component>
<qipa2-component></qipa2-component>
</div>
</template>
<script>
import qipa1Component from '@/components/qipa1Component'
//import xxx from '@/components/xxx' 中的@表示src
// 因?yàn)閣ebpack.base.conf中別名這樣寫了==> alias: {'@': resolve('src')}
import qipa2Component from '@/components/qipa2Component'
export default {
components:{
qipa1Component,
qipa2Component
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
由于我們在Hello2.vue使用了兩個自定義組件qipa1-component和qipa2-component且import了相應(yīng)的組件过椎，因此我們在此也要完善這兩個組件
qipa1Component.vue
<template>
<h1>我是Hello2組件中的一朵奇葩</h1>
</template>
<!--<script>-->
<!--export default {}-->
<!--</script>-->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
qipa2Component.vue
<template>
<h1>我是Hello2組件中的另一朵奇葩</h1>
</template>
<!--<script>-->
<!--export default {}-->
<!--</script>-->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
接下來我們還為未匹配的路徑單獨(dú)寫了個組件應(yīng)對:
notFind.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'notFind',
data () {
return {
msg: '對不起室梅，匹配不到對應(yīng)資源,我是notFind.vue'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5、修改App.vue內(nèi)容
<template>
<div id="app">
<h1>我是src/app.vue的h1</h1>
<router-link to="/">點(diǎn)擊進(jìn)入hello首頁</router-link>
<br>
<router-link to="/hello1">點(diǎn)擊進(jìn)入hello1</router-link>
<br>
<router-link to="/hello2">點(diǎn)擊進(jìn)入hello2</router-link>
<br>
<router-link to="/h">點(diǎn)擊進(jìn)入不存在的路徑</router-link>
<br>
<router-view></router-view>
</div>
</template>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
通過以上幾個步驟疚宇，就可以實(shí)現(xiàn)了最開始的效果圖啦亡鼠。接下來我們來使用vuex；
二敷待、在vue-cli中使用vuex
最終效果：通過Hello1.vue中的按鈕來改變gettersMsg數(shù)據(jù)间涵，從而使得只要用到gettersMsg的組件的數(shù)據(jù)都會相應(yīng)改變；
GIF3.gif
1榜揖、 同樣首先要確保安裝了vuex
如果未安裝勾哩，則將目錄切換至vue-cli后執(zhí)行 npm install vuex --save
2、創(chuàng)建vuex相關(guān)文件夾及文件
在src文件夾下新建store文件夾后举哟，在store文件夾下新建如下文件:
index.js思劳、mutations.js、actions.js妨猩、getters.js及rootState.js
3潜叛、修改src下的入口文件main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'; //引入store
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //掛載store
template: '<App/>',
components: { App }
})
4、修改store/index.js
由于上面我們引入了store/index.js，因此接下來我們需要修改index.js文件:
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
// * 表示將 './actions'模塊中的所有接口掛載到actions對象上 as 表示別名的意思
import * as mutations from './mutations';
import * as getters from './getters';
import state from './rootState';
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
export default store;
5钠导、修改mutations.js震嫉、actions.js、getters.js及rootState.js
由于上面引用了這些文件牡属，因此接下來我們來修改這些文件
rootState.js
const state = {
msg: '我是原始數(shù)據(jù)',
}
export default state;
mutations.js
export const mutationsMsg = (state, payload) => {
state.msg = payload.msg;
}
actions.js
export const changeMsg = ({commit}) => {
commit({
type: 'mutationsMsg', //對應(yīng)mutation.js中的mutationsMsg方法
msg: '我是修改后的數(shù)據(jù)~~~'
});
};
getters.js
export const gettersMsg = state => state.msg;
6票堵、修改Hello.vue、Hello1.vue及App.vue
我們想通過Hello1.vue中的按鈕來改變數(shù)據(jù)逮栅，因此Hello1.vue修改后的代碼如下：
<template>
<div>
<h1>我是Hello1.vue</h1>
<button @click="changeMsg">點(diǎn)我改變數(shù)據(jù)</button>
<p>gettersMsg數(shù)據(jù)目前是: {{ gettersMsg }}</p>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex';
export default {
name:'Hello1',
data:function () {
return {}
},
computed: {...mapGetters(['gettersMsg'])},
//對應(yīng)getters.技術(shù)中的gettersMsg
methods: {...mapActions(['changeMsg'])}
//對應(yīng) Actions中changeMsg方法|| 映射this.changeMsg() 為 this.$store.dispatch('changeMsg')
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Hello.vue用來展示數(shù)據(jù)
<template>
<div class="hello">
<h1>{{ gettersMsg }}</h1>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
//引入mapGetters
export default {
name: 'hello',
computed: {...mapGetters(['gettersMsg'])}
//使用mapGetters 輔助函數(shù)
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
當(dāng)然悴势，為了方便觀察數(shù)據(jù)，你也可將App.vue修改下
<template>
<div id="app">
<router-link to="/">點(diǎn)擊進(jìn)入hello首頁</router-link>
<br>
<router-link to="/hello1">點(diǎn)擊進(jìn)入hello1</router-link>
<br>
<router-view></router-view>
<p> 我是App.vue中的p措伐， gettersMsg 的值是----- {{gettersMsg}}</p>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: 'app',
computed:{...mapGetters(['gettersMsg'])}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
最后特纤，我將我的vue-cli 上傳到github上了，有需要的可以看下侥加。
參考資料:
vue-cli+webpack+router+vuex---之vuex使用
*本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有捧存，如需轉(zhuǎn)載請注明出處。謝謝!
