Vue2+element-ui后台管理系统（静态页面）

项目所需

node：https://nodejs.org/en/

git：https://git-scm.com/

vue：https://v2.cn.vuejs.org/v2/guide/installation.html

element-ui：https://element.eleme.cn/#/zh-CN/component/installation

项目所需：https://pan.baidu.com/s/1ua0jp9YCtPH6slE49HDUBw

提取码：kkkk

新建项目

在node和vue都调试、配置好的情况下使用vscode 在终端中输入命令

npm i -g @vue/cli 安装vue脚手架

安装成功后通过vue --version 可以查看版本

vue create 项目名 新建项目

vue create control

空格为取消选项 回车为选中

根据个人习惯选择css样式 本人喜欢使用sass

一路回车等待创建

此界面为创建成功

cd control 来到项目的目录 进行启动 （git命令自行学习）

此界面为开启成功

项目初始化

将以下标记全部删除

router/index.js最终页面

将views中文件全部删除，并新建Login.vue 和 Register.vue 文件，修改App.vue

Login 、 Register 和 App.vue 文件代码

// Login、Register和App.vue 文件代码

在router/index.js中配置路由信息

在App.vue中添加路由出口

此时打开在浏览器打开项目 为此界面即为成功

页面部署

引入element-ui

element-ui 哪里需要引哪里

代码

router/index.js

//router/index.js
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history", 
  base: process.env.BASE_URL,
  routes:[
    {path:'/login',component:()=>import('../views/Login.vue')},
    {
      path:'/home',
      component:()=>import('../views/Home.vue'),
      children:[
        {path:'/home/one-one',component:()=>import('../views/OneOne.vue')},
        {path:'/home/one-two',component:()=>import('../views/OneTwo.vue')},
        {path:'/home/one-thr',component:()=>import('../views/OneThr.vue')},
        {path:'/home/',redirect:'/home/one-one'}
      ]
    },
    {path:'/register',component:()=>import('../views/Register.vue')},
    {path:'/',redirect:'/login'}
  ]
});

export default router;

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
}).$mount('#app')

Home.vue

Login.vue

OneOne.vue

自己动手丰衣足食！！！