目录贴
1. 安装ElementUI
命令行进入项目目录内，执行以下命令安装elementUI
我们这里使用yarn去安装
yarn add element-ui
2. 项目导入vs code工具中，整合测试
File -> Open Folder 选中xxx-mall-web文件夹，打开，如下:
我这里文件都是绿色的，是因为我的xxx-mall-web的外层文件夹是从码云代码仓库中检出来的，所以加入的文件都是有版本控制器管理的
参考官方文档引入elementUI到main.js中
最终main.js代码如下
到elementUI官方随意找一个按钮，放到项目中的HelloWord.vue中
命令行启动项目，并访问，如下则安装elementUI成功。
3. 配置路由
3.1 添加页面
我们把 components 改名为 views，并在 views 目录下添加三个页面，Login.vue，Home.vue，404.vue。
三个页面内容简单相似，只有简单的页面标识，如登录页面是 “Login Page”。
Login.vue，其他页面类似。
<template>
<div class="page">
<h2>Login Page</h2>
</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
3.2 配置路由
打开 router/index.js，添加三个路由，分别对应主页、登录和404页面。
原来的HelloWord.vue我们就可以不要了，我这里注释掉了。
路由最终代码如下：
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
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: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
}
,{
path: '/404',
name: 'notFound',
component: NotFound
}
]
})
3.3 路由验证
4. 安装 SCSS
4.1 添加依赖
yarn add sass-loader node-sass --dev
4.2 修改配置
在build文件夹下的webpack.base.conf.js的 rules 标签下添加配置。
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
4.3 如何使用
在页面代码 style 标签中把 lang 设置成 scss 即可。
<style lang="scss">
</style>
4.4 使用测试
TODO
5. 安装axios
5.1 安装依赖
yarn add axios
5.2 代码修改，测试
修改Home.vue代码
<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">主要按钮</el-button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Home',
methods:{
testAxios(){
axios.get('http://localhost:8080')
.then(res => {
alert(res.data);
}).catch(e => {
alert(e);
})
}
}
}
</script>
启动项目，访问首页，验证，点击按钮，出现响应弹框即可。
6. 安装Mock.js
6.1 安装依赖
yarn add mockjs --dev
6.2 代码调整
在 src 目录下新建一个 mock 目录，创建 mock.js，在里面我们模拟了两个接口，分别拦截用户和菜单的请求，并返回相应的数据。
import Mock from 'mockjs'
Mock.mock('http://localhost:8080/user',{
'name': '@name', //随机生成
'email': '@email',
'name|1-10': 5
})
Mock.mock('http://localhost:8080/menu',{
'id': '@increment', //随机生成
'name': 'menu',
'order|10-20': 12
})
修改Home.vue代码
<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">主要按钮</el-button>
<el-button type="primary" @click="getUserInfo()">获取用户信息</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);
}).catch(e => {
alert(e);
})
},
getUserInfo(){
axios.get('http://localhost:8080/user')
.then(res => {
alert(JSON.stringify(res.data));
}).catch(e => {
alert(e);
})
},
getMenu(){
axios.get('http://localhost:8080/menu')
.then(res => {
alert(JSON.stringify(res.data));
}).catch(e => {
alert(e);
})
}
}
}
</script>
6.3 测试
启动服务，访问首页
点击获取用户信息按钮
点击获取菜单信息按钮
