1.检查必要的安装环境是否进行安装完成
2.安装淘宝镜像
3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装完成之后 我们直接使用我们的 cnpm代替我们的npm就行了
2 搭建vue脚手架
搭建vue项目环境
1、全局安装vue-cli
//这里我是确保你已经进行安装了我们的cnpm的 所以我们下面的安装我们直接进行测试就行
cnpm install --global vue-cli
3.项目的创建
vue init webpack 项目名
这个就是在你想要创建的目录下面直接进行输入这个指令就行
然后直接跟着它的提示进行创建就行
注意勾选路由 这个很重要
2.安装必要的工具库
axios qs mockjs
1.axios
cnpm install axios --save
2.qs
cnpm install qs --save
3.mock.js
cnpm install mockjs --save-dev
//安装我们的json5
4.cnpm install json5 --save-dev
element-ui
1.cnpm install element-ui --save
main.js里面的配置
import Element from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
//axios
import axios from "axios";
Vue.prototype.$axios = axios
Vue.config.productionTip = false
//加入
Vue.use(Element)
router.js里面的路由配置
//这里面只需要换成你自己的路由就行 其余的不需要变动
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: () => import('../index/home'),
children: [
{
path: '/index',
component: () => import('../index/childern/index')
},
]
},
{
path: "/test001",
component: () => import('../test/test001')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
mock的数据测试
我们直接在一个目录下面创建一个
注意我写的这个名字
我们写完之后需要在我们的main.js里面进行配置（这个名字就是我们的自己的js文件 配置完成之后我们才能在我们的使用的地方生效）
//前2个是必要的模块 直接引入就行 后面进行测试就行
const Mock = require('mockjs')
const Random = Mock.Random
let id = Mock.mock('@id')
console.log(id);
//下面附上我们的的mock.js的官方文档 需要什么假数据 我们直接在里面进行
//随机字符串
//自己定义一个对象都是可以的
let obj = Mock.mock({
id: '@id',//这个就是我们的语法
name: '@cname',
data: "@date()",
pah: "@paragraph(2)",
//第一个是我们的大写 第二个是我们的背景的颜色 第三个是我的字体的颜色
img: "@image('200x100', '#50B347', '#FFF', '@id')"
})
//模拟数组数据
var data = Mock.mock("/users", "get", {
"list|5": [
{
id: "@id",
name: "@cname"
}
]
})
//自己定义数据 第一个是路由 第二个是我们的get请求 这个默认是get
var data2 = Mock.mock("/cap", "get", {
"capImg": Random.dataImage('120x16', 'p231')
})
//这个是第一次的封装（后端成员应该理解）
let Result = {
code: 200,
msg: "你操作成功了",
data: null
}
//可以给大家解释一下我们的mock数据 这里是进行l二次封装处理
//进行我们的mock的测试处理
Mock.mock('/show', 'get', () => {
Result.data = {
token: Random.string(32),
msg: Random.paragraph(2)
}
//返回我们的数据（必写）
return Result
})
组件中使用我们的mock数据
<template>
<div>
{{msg}}
<el-button @click="change"></el-button>
<el-button @click="show">{{message}}</el-button>//这个按钮是我们的验证码的切换
//这里是进行路径的绑定
<el-image :src="imgs" class="imgs"></el-image>
</div>
</template>
<script>
export default {
name: "test001",
data() {
return {
msg: "",
imgs: "",
message: "",
}
},
methods: {
change() {
let _this = this;
this.$axios("/cap").then(rep => {
_this.imgs = rep.data.capImg//这个是我们的返回图片的路径也是需要进行保存处理的
})
},
show() {
let _this = this;
this.$axios('/show').then(rep => {
console.log(rep.data.data.token)
//这个是进行了二次封装 所以说我们的进行的是
_this.message = rep.data.data.token//这个是进行我们的二次封装处理我们的数据
})
}
},
created() {
let _this = this;
this.$axios("/users").then(rep => {
_this.msg = rep.data
_this.imgs = rep.data
})
},
}
</script>
<style scoped>
</style>
