深入理解基于vue-cli的vuex配置
本文介紹了基于vue-cli的vuex配置,分享給大家,希望對(duì)大家有幫助
首先成功運(yùn)行vue-cli項(xiàng)目
安裝vuex
cnpm i vuex --save
修改配置文件
store
新建文件夾store(與router同級(jí))然后在store目錄下新建index.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', modules: { }, getters: { }, actions: { }, });
main.js
import Vue from 'vue' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ router, store }).$mount('#app')
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-cli</title> </head> <body> <div id="app"> <router-view></router-view> </div> </body> </html>
上面對(duì)main.js和index.html做了修改。主要是符合個(gè)人的用法,這樣的好處是根組件只有index.html(如果可以理解為組件),而不是有app.vue和index.html兩個(gè)。
直觀上來(lái)看可能這樣就會(huì)出現(xiàn)每個(gè)組件都要引一個(gè)導(dǎo)航欄的問(wèn)題,這樣可能不太好。但是從過(guò)往的開發(fā)經(jīng)驗(yàn)來(lái)看,如果在app.vue中定義了導(dǎo)航欄,那么相應(yīng)的在app.vue中就要加入相應(yīng)的業(yè)務(wù)邏輯,網(wǎng)站規(guī)模大了之后app.vue的業(yè)務(wù)邏輯會(huì)越來(lái)越多,不利于管理。(所以這里app.vue就可以刪除了)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
最適應(yīng)的vue.js的form提交涉及多種插件【推薦】
這篇文章主要介紹了最適應(yīng)的vue.js的form提交涉及多種插件,涉及到 vue.js動(dòng)態(tài)添加css樣式 ,tab切換 ,touch,表單提交,驗(yàn)證,toast,數(shù)據(jù)雙向綁定等。需要的朋友可以參考下2018-08-08antd?select?多選限制個(gè)數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個(gè)數(shù),實(shí)現(xiàn)思路和核心代碼都很簡(jiǎn)單,其中核心代碼在于disabled,代碼簡(jiǎn)單易懂需要的朋友可以參考下2022-11-11