vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇1(代码片段)

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

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

项目的基础搭建。

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

该项目不仅是一个持续完善、高效简洁的后台管理系统模板，还是一套企业级后台系统开发集成方案，致力于打造一个
与时俱进、高效易懂、高复用、易维护扩展的应用方案。

$ cd vueapp
$ npm run serve

cnpm install --save vue-router
cnpm install --save vuex

cnpm install --save sass-loader
cnpm install --save node-sasscnpm i element-ui -S

cnpm install babel-plugin-component -D

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

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)
);

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

/**

 * 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‘

    

  

]

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

 

)

const getters = 

 

    user: state => state.user,

 



 

export default getters

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

<template>

  <div>jsDemo1</div>

</template>

 <script lang="js" src="./jsDemo.js"></script>

 <style lang="scss" src="./jsDemo.scss"  scoped>

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: