我们打开visual studio code , 选择文件------------->将文件夹添加到工作区，导入我们的项目
安装Element
导入后，我们安装以下element
官网：/#/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: '<App/>'})
页面路由
我们把components改名为views,并在目录下添加3个页面：Login.vue、Home.vue、404.vue。
页面内容类似：
<template><div class="page"><h2>Login Page</h2></div></template><script>export default {name: 'Login'}</script>
配置路由
打开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 sass-loader@7.3.1 --save-dev //卸了重新安装了一个低版本npm install node-sass@4.14.1 --save-dev //安装node-sass
安装的时候注意对应版本，版本不对应，启动会报错
安装后修改404页面
<template><div class="site-wrapper site-page--not-found"><div class="site-content__wrapper"><div class="site-content"><h2 class="not-found-title">404</h2><p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p><el-button @click="$router.go(-1)">返回上一页</el-button><el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">进入首页</el-button></div></div></div></template><script>export default {name: '404'}</script><style lang="scss">.site-wrapper.site-page--not-found {position: absolute;top: 60px;right: 0;bottom: 0;left: 0;overflow: hidden;.site-content__wrapper {padding: 0;margin: 0;background-color: #fff;}.site-content {position: fixed;top: 15%;left: 50%;z-index: 2;padding: 30px;text-align: center;transform: translate(-50%, 0);}.not-found-title {margin: 20px 0 15px;font-size: 8em;font-weight: 500;color: rgb(55, 71, 79);}.not-found-desc {margin: 0 0 30px;font-size: 26px;text-transform: uppercase;color: rgb(118, 131, 143);> em {font-style: normal;color: #ee8145;}}.not-found-btn-gohome {margin-left: 30px;}}</style>
再浏览器访问http://localhost:8080/#/404
可以看到样式改变了
安装axios
命令：npm install axios
安装完成后修改Home页面，进行一个简单的测试
<template><div class="page"><h2>Home Page</h2><el-button type="primary" @click="testAxios()">测试Axios调用</el-button></div></template><script>import axios from 'axios'import mock from '@/mock/mock.js'export default {name: 'Home',methods: {testAxios() {axios.get('http://localhost:8080').then(res => {alert(res.data) })}}}</script>
可以看到我们的请求已经成功了
安装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,在页面添加两个按钮，分别触发用户和菜单请求。成功后弹出返回结果
*注意：要在页面引入mockimport mock from '@/mock/mock.js'
Home.vue
<template><div class="page"><h2>Home Page</h2><el-button type="primary" @click="testAxios()">测试Axios调用</el-button><el-button type="primary" @click="getUser()">获取用户信息</el-button><el-button type="primary" @click="getMenu()">获取菜单信息</el-button></div></template><script>import axios from 'axios'import mock from '@/mock/mock.js'export default {name: 'Home',methods: {testAxios() {axios.get('http://localhost:8080').then(res => {alert(res.data) })},getUser() {axios.get('http://localhost:8080/user').then(res => {alert(JSON.stringify(res.data)) })},getMenu() {axios.get('http://localhost:8080/menu').then(res => {alert(JSON.stringify(res.data)) })}}}</script>
访问http://localhost:8080/#/
点击获取用户信息
点击获取菜单信息
可以看到我们已经得到响应数据，这样mock就集成进来了
看完记得点赞哦
