深入理解基于vue-cli的vuex配置
本文介紹了基于vue-cli的vuex配置，分享給大家，希望對大家有幫助
首先成功運(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>
上面對main.js和index.html做了修改。主要是符合個(gè)人的用法，這樣的好處是根組件只有index.html（如果可以理解為組件），而不是有app.vue和index.html兩個(gè)。
直觀上來看可能這樣就會(huì)出現(xiàn)每個(gè)組件都要引一個(gè)導(dǎo)航欄的問題，這樣可能不太好。但是從過往的開發(fā)經(jīng)驗(yàn)來看，如果在app.vue中定義了導(dǎo)航欄，那么相應(yīng)的在app.vue中就要加入相應(yīng)的業(yè)務(wù)邏輯，網(wǎng)站規(guī)模大了之后app.vue的業(yè)務(wù)邏輯會(huì)越來越多，不利于管理。（所以這里app.vue就可以刪除了）
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue引入elementUi后打開頁面報(bào)錯(cuò)Uncaught?TypeError的解決方式
這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開頁面報(bào)錯(cuò)Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue自定義加載指令的相關(guān)知識(shí)，主要包括創(chuàng)建加載組件，創(chuàng)建指令的方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
AntV+Vue實(shí)現(xiàn)導(dǎo)出圖片功能
AntV?組織圖操作完畢以后，需要點(diǎn)擊按鈕將畫布以圖片的形式導(dǎo)出，這篇文章主要介紹了AntV結(jié)合Vue實(shí)現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
安裝vue-cli報(bào)錯(cuò) -4058 的解決方法
這篇文章主要介紹了安裝vue-cli報(bào)錯(cuò) -4058 的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了如何在 vue3 中使用高德地圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯(cuò)位和固定列錯(cuò)位,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue3+el-select實(shí)現(xiàn)觸底加載更多功能(ts版)
這篇文章主要給大家介紹了基于vue3和el-select實(shí)現(xiàn)觸底加載更多功能，文中有詳細(xì)的代碼示例，感興趣的同學(xué)可以借鑒參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)觸底判斷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Vue實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞
在前端開發(fā)中,Vue.js 是一個(gè)非常流行的框架,因其易學(xué)易用而受到許多開發(fā)者的青睞,其中,組件是 Vue 的核心概念之一,組件之間的數(shù)據(jù)傳遞是開發(fā)中的常見需求,本文將探討如何在 Vue 中實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2024-11-11