vue之权限管理项目前端案列

首先把项目到入进开发工具里面

安装Element

#Yarn安装

yarn add element-ui

#npm安装

npm i element-ui -s

把Element导入进项目中

在main.js中添加

 在组件HelloWorld中

 页面路由:

  先把components改为views，并在views目录下添加三个页面:Login.vue、Home.vue、404.vue。如登录页面是“Login Page”。Login.vue代码如下,其他页面类似。

配置路由  打开router/index.js,添加3个路由,分别对应主页、登录和404页面。 import Vue from 'vue' import Router from 'vue-router' import NotFound from '@/views/404' import Home from  '@/views/Home' import Login from '@/views/Login'
Vue.use(Router)
export default new Router({   routes: [    {       path: '/',       name: 'Home',       component: Home     },{       path: '/login',       name: 'login',       component: Login     },{       path: '/404',       name: 'notFound',       component: NotFound     }   ] }) 这一步把原先的Helloword给删掉不然报错 访问以下地址进行测试: http://localhost:8080/#/404

http://localhost:8080/#/

http://localhost:8080/#/login

安装SCSS

后面会用到SCSS编写页面样式所以先安装SCSS

yarn add sass-loader node-sass -dev

添加配置