SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二、visual studio code开发前端项目）

我们打开visual studio code , 选择文件------------->将文件夹添加到工作区，导入我们的项目

 

安装Element

导入后，我们安装以下element

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

安装命令：npm add element-ui或者也可以用yarn

安装完成后，我们在main.js中引入Element

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

 

/* eslint-disable no-new */

Vue.use(ElementUI)

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

页面路由

 我们把components改名为views,并在目录下添加3个页面：Login.vue、Home.vue、404.vue。

页面内容类似：

 

配置路由

打开router/index.js,添加3个路由分别对应主页、登录、404页面

import Vue from 'vue'

import Router from 'vue-router'

import Login from '@/views/Login'

import Home from '@/views/Home'

import NotFound from '@/views/404'

 

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

}

]

})

配置完后启动项目，在浏览器访问测试

http://localhost:8080/#/

http://localhost:8080/#/login

 

http://localhost:8080/#/404

说明我们的配置已经生效了

安装scss

安装依赖：

npm uninstall sass-loader //卸载当前版本） 
npm install [email protected] --save-dev //卸了重新安装了一个低版本
npm install [email protected] --save-dev //安装node-sass 

安装的时候注意对应版本，版本不对应，启动会报错

安装后修改404页面

 

 

再浏览器访问http://localhost:8080/#/404

 

可以看到样式改变了

安装axios

命令：npm install axios

安装完成后修改Home页面，进行一个简单的测试

 

可以看到我们的请求已经成功了

安装Mock.js

为了模拟后台接口提供页面需要的数据，引入mock.js

安装依赖：npm install mockjs -dev

安装完成，在src新建一个mock目录，创建mock.js，在里面模拟两个接口，分别拦截用户和菜单的请求并返回相应数据。

import Mock from 'mockjs'

 

Mock.mock('http://localhost:8080/user', {

'name': '@name', // 随机生成姓名

'name': '@email', // 随机生成邮箱

'age|1-12': 7, // 年龄1-12之间

})

Mock.mock('http://localhost:8080/menu', {

'id': '@increment', // id自增

'name': 'menu', // 名称为menu

'order|1-10': 6, // 排序1-10之间

})

修改Home.vue,在页面添加两个按钮，分别触发用户和菜单请求。成功后弹出返回结果

注意：要在页面引入mock    import mock from '@/mock/mock.js'

Home.vue

访问http://localhost:8080/#/

点击获取用户信息

点击获取菜单信息

可以看到我们已经得到响应数据，这样mock就集成进来了

看完记得点赞哦