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

本文链接：https://blog.csdn.net/u014491286/article/details/107052771

本文档介绍了如何使用vue/cli搭建基于Vue和Element UI的JYAdmin后台管理系统模板，包括环境检查、项目创建、路由与Vuex配置、IE11兼容性处理、按需引入Element UI等步骤，旨在提供一个高效简洁的后台系统集成方案。

摘要由CSDN通过智能技术生成

项目搭建时间：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