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

项目搭建时间：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-sasscnpm 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'// modulesimport 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 = 1console.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

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

vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
电商后台管理系统（一）项目搭建
电商后台管理系统(一)项目搭建前言一.服务器端框架搭建 1. 安装ThinkJS命令 2. 创建项目及运行项目命令 3. 项目结构二.前端框架搭建三.MySQL数据库搭建总结前言新开的坑 ...
icworks+D2Admin+vue+element UI 制作后台管理
前言: icworks又名飞冰海量可复用物料,通过 GUI 工具极速构建中后台应用.是阿里巴巴前端团队开源的一个产品,目的让前端开发简单而友好. 进入正题使用以及构建项目非常简单 1.直接进入官网 ...
计算机毕业设计node.js+vue+Element电商后台管理系统
项目介绍网络的广泛应用给生活带来了十分的便利.所以把电商后台管理与现在网络相结合,利用node技术建设电商后台管理系统,实现电商后台管理的信息化.则对于进一步提高电商后台管理发展,丰富电商后台管理经 ...
Vue + Element UI 实现权限管理系统：页面权限控制（菜单 + 按钮）
权限控制方案既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...
Vue + Element UI 实现权限管理系统前端篇（八）：管理应用状态
使用 Vuex 管理应用状态 1. 引入背景像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...
Vue + Element UI 实现权限管理系统前端篇（七）：功能组件封装
组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构组件封装重构后,试图组件结构如下图所示代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
Vue + Element UI 实现权限管理系统（更换皮肤主题）
自定义主题命令行主题工具 1.安装主题工具首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
Vue + Element UI 实现权限管理系统前端篇（六）：更换皮肤主题
自定义主题命令行主题工具 1.安装主题工具首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...

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

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

最新文章

热门文章