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.