Vue+element搭建后台管理系统-二、安装插件

我们继续上一章的内容。上一章提到我们已经能够成功运行项目。然后我们会改进项目必须使用的东西。

一、安装

我们终于到了我们的男二，继续在里面新建一个终端，然后用这个命令安装：

npm i element-ui -S

至于为什么是-S？即–save（保存）包名会注册在.json中，这个包的依赖在生产环境中依然存在。

安装完成后，我们可以通过导入在项目中使用，可以在main.js中全局引用：

import Vue from 'vue'
import App from './App.vue'
//引入elementUI
import 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')

这样就可以实现全局引入。如果实际开发中使用UI框架的插件不多，也可以按需引入。先说一下如何按需导入：

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

上面是引入了弹窗功能，也就是只能使用这个内容，还是比较麻烦的。

好的，导入加载后，我们测试一下是否有效。

将组件添加到App.vue文件中，然后保存查看，可以看到按钮组件已经成功渲染到网页中了。

<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正在开发的路由支持不足，所以官方添加了vue-。

Vue 的单页应用是基于路由和组件的。路由用于设置访问路径和映射路径和组件。

使用以下命令将其安装在终端中：

npm install vue-router -S

安装完成后，同样挂载到main.js中。在我们项目的src目录下创建一个文件夹来存放路由映射文件。

在文件夹中创建index.js和.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
}
/**
 * 全局前置守卫
 * @func beforeEach
 * @param {object} to 即将要进入的目标 路由对象
 * @param {object} form 当前导航正要离开的路由
 * @func next 进行管道中的下一个钩子
 */
router.beforeEach(async (to, form, next) => {
    
});
/**
 * 全局后置钩子
 * @func afterEach
 * @param {object} to 即将要进入的目标 路由对象
 * @param {object} form 当前导航正要离开的路由
 */
router.afterEach((to, form) => { });
export default router;

.js:

/**
 * 逐个导出模块
 */

export const constantRoutes = [
    {
        path: '/',
        redirect: '/home'
    },
]
export default [
    ...constantRoutes,
];

p>

然后在main.js中配置：

import Vue from 'vue'
import App from './App.vue'
//引入elementUI
import 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')

保存后可能会报校验规则错误：

我们先不配置代码验证规则，后面单独讲代码编写规范。

如果去掉验证码，将这些验证码添加到.json文件的字段中，然后重启项目。

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

那么我们的路由安装就完成了。

三、安装 Vuex

在开发大型项目的过程中，经常会用到vuex。 vuex的官方解释是：vuex是专门用于管理vue.js应用程序中状态的插件。他的角色是将应用程序中的所有状态放在一起并集中管理它们。描述可能有点晦涩难懂。不懂的，边学边学。

在终端中安装这个命令：

npm install vuex --S

等待安装完成后，我们会在Vue中加载，步骤与加载路由类似。现在在src目录下创建一个store文件夹，然后创建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文件夹中创建文件夹，主要用于存放状态数据模块文件，无需先创建文件：

然后在main.js中加载vuex，

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

加载完成后，如果没有报错，则需要的三件套已经安装完毕。

其实还有一个插件是必须要用到的，就是关于网络请求的，不过这篇文章已经有很多内容了，后面会单独用一章来帮助大家理解如何封装网络请求以及要安装哪些网络请求插件。

好了，本章的内容就先到这里了，下一章会讲改进项目的结构。