Vue+element搭建后臺管理系統(tǒng)-二、安裝插件

導(dǎo)讀

我們繼續(xù)上一章的內(nèi)容，上一章講到我們已經(jīng)能將項(xiàng)目成功跑起來了，那么我們接下來把項(xiàng)目必用的東西完善一下。

安裝ElementUI

終于到了我們的主角了，在VSCode中新建一個終端，然后通過這個命令來安裝：

npm i element-ui -S

至于為什么要-S呢？即--save（保存）包名會被注冊在package.json的dependencies里面，在生產(chǎn)環(huán)境下這個包的依賴依然存在。

安裝完成之后呢，我們要通過導(dǎo)入才能在項(xiàng)目中使用，可以在main.js中做全局引用：

import Vue from 'vue'import App from './App.vue'//引入elementUIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //樣式文件一定要引入
Vue.config.productionTip = false
Vue.use(ElementUI)new Vue({  render: h => h(App),}).$mount('#app')

這樣就可以做到全局引入，如果在實(shí)際開發(fā)中用到UI框架的插件沒有很多，也是可以通過按需引入的，下面來說說如何按需引入：

import { Message} from 'element-ui';Vue.use(Message)

上面就是引入一個Message彈窗的功能，也就是element中的內(nèi)容只有這個可以用，還是覺得挺麻煩的哈。

好了，導(dǎo)入和裝載完畢之后，我們測試一下看看有沒有成功。

在App.vue文件中加入button組件，然后保存查看，可以看到網(wǎng)頁中已經(jīng)成功渲染按鈕組件了。

<template>  <div id="app">    <img alt="Vue logo" src="./assets/logo.png">    <el-button type="primary">測試按鈕</el-button>    <HelloWorld msg="Welcome to Your Vue.js App"/>  </div></template>

安裝路由

由于Vue在開發(fā)時對路由支持的不足，于是官方補(bǔ)充了vue-router插件。

Vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。

在終端中通過這個命令安裝：

npm install vue-router -S

安裝完成之后，同樣在main.js中掛載它。我們項(xiàng)目src的目錄下創(chuàng)建一個router文件夾，用于存放路由映射文件。

在router文件夾下創(chuàng)建index.js和routers.js，分別用于初始化路由和配置路由映射。index.js代碼如下：

import Vue from 'vue';import Router from 'vue-router';import constantRoutes from './routers';

const originalPush = Router.prototype.push;Router.prototype.push = function (location) {    return originalPush.call(this, location).catch(err => err);};
Vue.use(Router);
const createRouter = () => new Router({    scrollBehavior: () => ({ y: 0 }),    routes: constantRoutes})
const router = createRouter()

export function resetRouter() {    const newRouter = createRouter()    router.matcher = newRouter.matcher}
/** * 全局前置守衛(wèi) * @func beforeEach * @param {object} to 即將要進(jìn)入的目標(biāo) 路由對象 * @param {object} form 當(dāng)前導(dǎo)航正要離開的路由 * @func next 進(jìn)行管道中的下一個鉤子 */router.beforeEach(async (to, form, next) => {});

/** * 全局后置鉤子 * @func afterEach * @param {object} to 即將要進(jìn)入的目標(biāo) 路由對象 * @param {object} form 當(dāng)前導(dǎo)航正要離開的路由 */router.afterEach((to, form) => { });

export default router;

routers.js代碼如下：

/** * 逐個導(dǎo)出模塊 */export const constantRoutes = [    {        path: '/',        redirect: '/home'    },]
export default [    ...constantRoutes,];

然后在main.js中做好配置：

import Vue from 'vue'import App from './App.vue'//引入elementUIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //樣式文件一定要引入
//載入路由import router from './router/index.js';
Vue.config.productionTip = false
Vue.use(ElementUI)new Vue({    router,    render: h => h(App),}).$mount('#app')

保存之后，可能會報ESLint校驗(yàn)規(guī)則的錯：

我們先不配置代碼校驗(yàn)規(guī)則先，后面我們再單獨(dú)講代碼編寫規(guī)范。

去掉代碼校驗(yàn)的話，在package.json文件的eslintConfig字段中，加入這些代碼，然后重啟項(xiàng)目，就可以了。

"rules": {            "generator-star-spacing": "off",            "no-tabs": "off",            "no-unused-vars": "off",            "no-console": "off",            "no-irregular-whitespace": "off",            "no-debugger": "off"        }

然后我們的路由安裝就算完成了。

安裝Vuex

在開發(fā)大型項(xiàng)目的過程中，還是會常常用到vuex的，關(guān)于vuex官方的解釋是：vuex是專門用來管理vue.js應(yīng)用程序中狀態(tài)的一個插件。他的作用是將應(yīng)用中的所有狀態(tài)都放在一起,集中式來管理。描述可能會有些晦澀難懂，不理解的同學(xué)，我們邊用邊學(xué)。

在終端中通過這個命令來安裝：

npm install vuex --S

靜靜等待安裝完成后，我們將它裝載在Vue中，步驟跟裝載路由差不多，現(xiàn)在src目錄下創(chuàng)建store文件夾，然后創(chuàng)建index.js

import Vue from 'vue';import Vuex from 'vuex';

const modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')    const value = modulesFiles(modulePath)    modules[moduleName] = value.default    return modules}, {})

Vue.use(Vuex);export default new Vuex.Store({    modules: modules});

再在store文件夾下創(chuàng)建modules文件夾，主要用于存放狀態(tài)數(shù)據(jù)模塊文件的，先不用創(chuàng)建文件：

然后就是在main.js中裝載vuex，

import Vue from 'vue'import App from './App.vue'//引入elementUIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; //樣式文件一定要引入
//載入路由import router from './router/index.js';
//載入vueximport store from './store/index.js'
Vue.config.productionTip = false
Vue.use(ElementUI)new Vue({    store,    router,    render: h => h(App),}).$mount('#app')

裝載好之后，如果沒報錯的話，那么對于必要的三件套已經(jīng)是安裝完成了。

其實(shí)還有一個插件是必用的，就是關(guān)于網(wǎng)絡(luò)請求的，但這篇內(nèi)容已經(jīng)很多了，后面用單獨(dú)一章來幫助大家了解怎么封裝網(wǎng)絡(luò)請求和裝哪個網(wǎng)絡(luò)請求的插件。

好了，這章的內(nèi)容就先到這了，下一章說一下完善項(xiàng)目的架構(gòu)。

永遠(yuǎn)不要因?yàn)槟挲g，而去放棄一顆年輕的心。

--網(wǎng)絡(luò)