vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】

Z时代
2024-01-10
分类：综合

vue

项目搭建时间：2020-06-29

本章节：讲述基于vue/cli，

项目的基础搭建。

本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程。

该项目不仅是一个持续完善、高效简洁的后台管理系统模板，还是一套企业级后台系统开发集成方案，致力于打造一个

与时俱进、高效易懂、高复用、易维护扩展的应用方案。

（1）、检查环境

1、vue create vueapp 默认安装

2、启动项目

$ cd vueapp

$ npm run serve

3、IE兼容测试支持IE11

4、安装路由和vuex

cnpm install --save vue-router

cnpm install --save vuex

5、安装sass和element-ui

cnpm install --save sass-loader

cnpm install --save node-sass

cnpm i element-ui -S

5.1、按需引入element-ui

cnpm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from \'vue\';
import { Button, Select } from \'element-ui\';
import App from \'./App.vue\';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
new Vue({
  el: \'#app\',
  render: h => h(App)
});

目录结构如下

5、路由配置 （@/router/index.js）

import Vue from \'vue\'
import Router from \'vue-router\'
import routes from \'./router\'
Vue.use(Router)
const router = new Router({
  routes,
  // mode: \'history\',
  // base: \'/html/chat\'
})
// 登陆页面路由 name
// const LOGIN_PAGE_NAME = \'login\'
// 跳转之前
router.beforeEach((to, from, next) => {
  if (to.name) {
    next()
  }
  // const token = getToken()
  // if (!token && to.name !== LOGIN_PAGE_NAME) {
  //   // 未登录且要跳转的页面不是登录页
  //   next({
  //     name: LOGIN_PAGE_NAME // 跳转到登录页
  //   })
  // } else if (!token && to.name === LOGIN_PAGE_NAME) {
  //   // 未登陆且要跳转的页面是登录页
  //   next() // 跳转
  // } else if (token && to.name === LOGIN_PAGE_NAME) {
  //   // 已登录且要跳转的页面是登录页
  //   next({
  //     name: \'index\' // 跳转到 index 页
  //   })
  // } else {
  //   if (token) {
  //     next() // 跳转
  //   } else {
  //     next({
  //       name: LOGIN_PAGE_NAME
  //     })
  //   }
  // }
})
// 跳转之后
// router.afterEach(to => {
//   //
// })
export default router

5.1、路由配置 （@/router/router.js）

/**
 * meta 可配置参数
 * @param {boolean} icon 页面icon
 * @param {boolean} keepAlive 是否缓存页面
 * @param {string} title 页面标题
 */
export default [
  {
    path: \'/\',
    redirect: \'/jsDemo\'
  },
  {
    path: \'/jsDemo\',
    name: \'jsDemo\',
    component: () => import(\'@/pages/jsDemo/index.vue\'),
    meta: {
      icon: \'\',
      keepAlive: true,
      title: \'jsDemo\'
    }
  },
  {
    path: \'/tsDemo\',
    name: \'tsDemo\',
    component: () => import(\'@/pages/tsDemo/index.vue\'),
    meta: {
      icon: \'\',
      keepAlive: false,
      title: \'tsDemo\'
    }
  }
]

6、store配置 （@/store/index.js）

import Vue from \'vue\'
import Vuex from \'vuex\'
// modules
import getters from \'./getters\'
import user from \'./modules/user\'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state, n) {
      // 变更状态
      state.count = n
    }
  },
  actions: {
    increment({ commit }, count) {
      commit(\'increment\', count)
    },
    incrementA({ commit }, count) {
      return new Promise((resolve) => {
        commit(\'increment\', count)
        resolve()
      })
    },
  },
  modules: {
    user
  },
  getters
})

6.1、store配置 （@/store/getters.js）

const getters = {
    user: state => state.user,
}
export default getters

6.2、store配置 （@/store/modules/user.js）

const user = {
    state: {
        name: \'zxb\'
    },
    mutations: {
        SET_NAME: (state, name) => {
            state.name = name
        }
    },
    actions: {
        setName({ commit }, name) {
            commit(\'SET_NAME\', name)
        }
    },
    getters: {
        users(state) {
            return state
        }
    }
}
export default user

7、主路由组件调用 store (@/pages/jsDemo/index.vue)

<template>
  <div>jsDemo1</div>
</template>
 <script lang="js" src="./jsDemo.js"></script>
 <style lang="scss" src="./jsDemo.scss"  scoped>

7.1、主路由组件调用 store (@/pages/jsDemo/jsDemo.js)

export default {
    name: \'jsDemo\',
    components: {
    },
    data() {
        return {
        }
    },
    props: {
    },
    computed: {
    },
    filters: {
    },
    activated() {
    },
    created() {
    },
    mounted() {
        this.$store.state.count = 1
        console.log(this.$store.state.count)
        this.$store.commit(\'increment\', 10)
        console.log(this.$store.state.count)
        this.$store.dispatch(\'increment\', 50)
        console.log(this.$store.state.count)
        this.$store.dispatch(\'incrementA\', 60).then(() => {
            console.log(this.$store.state.count)
        })
        console.log(this.$store.state.count)
        this.$store.commit(\'SET_NAME\', \'zxb1\')
        console.log(this.$store.state.user.name)
    },
    updated() {
    },
    destroyed() {
    },
    methods: {
    }
}

最终效果如下：

本章节总结：讲述基于vue/cli，
项目的基础搭建。
1、vue/cl基础配置，sass、element-ui安装
2、基础路由配置
3、ie浏览器兼容测试
4、vuex安装与使用
如需下载源代码请联系博主
（微信号：lovehua_5360）
你也可以选择留言反馈

下章节请关注个人微信公众号【微新悦】，欢迎持续关注：

备注：（使用微信客户端打开）
个人微信公众号：【微新悦】
微信公众号原文链接：http://mp.weixin.qq.com/mp/homepage?__biz=MzIyOTg4MzQyNw==&hid=15&sn=4bc799ac6079fd28d20365f92eb3cb91&scene=18#wechat_redirect