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'
 
// 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

在这里插入图片描述

热门文章

暂无图片
编程学习 ·

Linux 文件系统解析(三)cache

Linux文件系统中使用了大量cache,用于提升IO性能,本篇来梳理一下这些与文件系统相关的cache,它们在内存中是如何组织管理的,它们是如何加速文件系统操作的。Dentry Cachedentry用于描述系统目录树中的一个节点,磁盘文件系统中通常没有相关结构,dentry只存在于内存之中,它…
暂无图片
编程学习 ·

c++数制2~16数进制的转换

通项公式: while(n!=0){ a[i]=n%d; n=(n/d); i++; } 其中n为要转换的十进制的数。d为要转换的数制,如二进制为2. #include<iostream> using namespace std;int main() {int i,n,d,a[100];//n 为要转换的十进制数,d为要转为的数制 while(cin>>n>>d){i=0;wh…
暂无图片
编程学习 ·

Java-eclipse 设置字体字号大小,如何设置居中

文字一般都放在 标签内: 这里以 JLable 与 按钮 为实例: JLabel label; JButton exitBtn; //表题**标签** label = new JLabel("个人停车详情",JLabel.CENTER);//设置字体居中 label.setFont(new Font("微软雅黑", Font.BOLD, 20));//设置字体字号大小 l…
暂无图片
编程学习 ·

聚焦Java性能优化 打造亿级流量秒杀系统【学习笔记】06_交易性能优化技术之缓存库存

文章目录本章目标7-1 交易性能瓶颈7-2 交易验证优化7-3 活动缓存库存方案一(重点)库存行锁优化扣减库存缓存化(方案一)异步同步数据库(方案二)异步消息队列rocketmq库存数据库最终一致性保证7-5 活动缓存库存方案二分布式事务7-7 rocketmq安装7-8 缓存库存接入异步化 本章…
暂无图片
编程学习 ·

线程

1.线程 1.什么叫做线程,跟进程之间的关系 进程:独立的cup空间运行 线程:进程中的一个执行流程,一个进程中可以包含多个线程,这些线程共享该进程提供的资源 2.创建线程(两种方式) 让这类继承Thread类 class XXX extends Thread{ public void run() Thread xx = new Threa…
暂无图片
编程学习 ·

通过组键扫描使得Spring管理类的对象

通过组件扫描使得Spring管理类的对象。 如果User类需要使用Spring框架管理,必须声明User类所在的包,然后再用测试类中的AnnotationConfigApplicationContext的构造方法中将包名作为参数():import org.springframework.context.annotation.AnnotationConfigApplicationContex…
暂无图片
编程学习 ·

sqlite 免费的可视化工具

1.sqliteStudio 介绍:开源,支持多平台 下载:https://github.com/pawelsalawa/sqlitestudio/releases 官网:https://sqlitestudio.pl/ 2.DB Browser 介绍:开源,支持多平台 官网:https://sqlitebrowser.org/ 下载:https://sqlitebrowser.org/dl/ 3.SQLPro 介绍:开源,只…
暂无图片
编程学习 ·

网络硬盘录像机NVR的接入、解码、转发能力解析

网络硬盘录像机NVR的接入、解码、转发能力解析 你是否有过这样的疑问, 这台录像机,可以接什么摄像机呢? 能不能全部都接300万甚至400万的高清摄像机? 能不能接500万的摄像机? 录像机经常显示资源不足? 录像机画面卡顿? 作为从业的你是否知道NVR有三种能力呢? 接入能力,…
暂无图片
编程学习 ·

Maven工程配置(build/run委托,skipTests)

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是…
暂无图片
编程学习 ·

git学习日志-标签

git也可以像svn一样打标签,以此来标记发布节点,以示重要性。 对标签的操作,一般包括: 1. 列出标签 2. 创建标签 3. 删除标签 4. 检出标签 一、列出标签 执行git tag命令,就可以看到当前仓库中已经打过的标签。注意: 这个命令会以字母顺序列出标签。 也可以加上-l或--list…
暂无图片
编程学习 ·

腾讯疑似回应被骗“辣椒酱不香了”!百度趁机诉苦!

导读:腾讯和老干妈怼怂,百度受伤,我们来看看到底怎么回事? 这一事件从腾讯告老干妈开始,理由是拖欠千万元广告费,故申请冻结老干妈1624万财产,结果老干妈直接发布声明:从未与腾讯公司进行过任何商业合作。 正当我们吃瓜群众等待下文的时候,贵阳警方发了一则通告:3人伪…
暂无图片
编程学习 ·

mysql 获取本周每天时间

mysql 获取本周每天时间语句 (evt_t_event换成自己的表) SELECT@date := DATE_ADD(@date, INTERVAL + 1 DAY) daysFROM(SELECT@date := DATE_ADD(SUBDATE(CURDATE(),DATE_FORMAT(CURDATE(),%w)-1), INTERVAL - 1 DAY)FROMevt_t_eventLIMIT 7) time
暂无图片
编程学习 ·

登录小Demo(错题记录)

Demo描述:实现C3P0数据库池连接数据库。部署Tomcat服务器,使用servlet完成简单登录测试。错误描述:测试时,登录账号名和密码与数据库表中信息一致。但是提示登录失败,控制台无错误提示。产生原因:细节问题。忽略了setCharacterEncoding设置字符的编码方式.注意点:1.setC…
暂无图片
编程学习 ·

【小甲鱼】零基础入门学习Python(二)函数

function.__doc__function(a = x, b = y) 关键字参数def function(a = x, b = y): 默认值参数def function(*params) 收集参数,可输入多个参数打包为元组函数无return时返回Nonegloble 将局部变量转化为全局变量闭包def FunX(x):def FunY(y):return x * yreturn FunYFunX(8)(5…
暂无图片
编程学习 ·

cpu寻址问题

20根地址线,16根数据线,cpu按字节编址和按字编址的寻址范围,分别是1M和512k,但是16根数据线,表明一次向存储单元读写位数16位,那为什么按字编址会是512k而不是1M呢,请解答一下,谢谢
暂无图片
编程学习 ·

疫情期间,注重鼻腔呼吸道清洁卫生,很重要

疫情期间清洁鼻腔很重要鼻子是人类呼吸道的门户,作为一个与外界直接相通的腔道,很像家里空调的风口,容易存留脏物。从生理结构上来看,鼻腔里有鼻毛和大量的黏膜褶皱,灰尘、微生物、病毒都可能积攒其中。所以,在“勤洗手、戴口罩”的非常时期,别忘了鼻腔的清洁工作。另据…
暂无图片
编程学习 ·

PyPA Installing Packages

https://packaging.python.org/tutorials/installing-packages/#installing-packages 确认pip,seuptools,wheel都是最新 python -m pip install --upgrade pip setuptools wheel 可以创建虚拟环境 Installing from PyPI Installing from VCS Installing from other Indexes Ins…
暂无图片
编程学习 ·

生成文件时加序号

生成的文件按序号01,02,03,04去排列,有需要的同学可以使用,希望可以帮到你public static String generateName(File fil,final String fileName){int count = fil.listFiles(new FileFilter(){public boolean accept(File file){if(file.getName().startsWith(fileName))…
暂无图片
编程学习 ·

百度百科创建好像成功不了,BBdoc文档搜索词条都四个版本了无法成功!

看来想创建成功百度百科几乎是不太可能,不知道啥原因?本来想通过百度百科让更多人了解到BBdoc文档搜索工具,可以早日使用上,但就是无法成功。BBdoc文档搜索官网:http://www.bbdoc.cn/版本1提示错误:版本2提示错误:版本3提示错误:版本4提示错误:不想有版本5了,快崩溃哪…