一、技术准备

1.1 Vue.js

https://cn.vuejs.org/
核心：
1.{{ 插值 }}
可以调用Vue中data的内容、methods函数
2.@事件名
可以为标签设置事件，监听事件的行为
3.:属性名
可以为标签的属性绑定数据
4.v-if
分支语句 有选择的执行
5.v-for
循环语句 重复执行

1.2 Vue-cli

https://cli.vuejs.org/zh/guide/
1.安装Node Vue-cli
2.npm命令
npm run dev
npm run build
npm install xxx -s
3.vue命令
vue init webpack xxx

1.3 Vue-Router

https://router.vuejs.org/zh/
1.路由 VS a
单页面应用程序，采用路由实现组件的切换
2.路由使用步骤
1.下载js库
npm install vue-router -s
2.实现配置
src下创建文件夹：router
新建index.js文件
实现配置代码
3.实现组件的路由注册
1.import 组件名称 from xxxx
2.配置路径
{
path:路径,
name:名称,
component:对应的组件名称
}
3.l路由的使用方式
1.声明式

2.编程式
this.$router.push(组件切换)

1.4 Vuex

https://vuex.vuejs.org/zh/
1.Vuex就是Vue项目中实现数据的存储
2.使用步骤：
1.下载
npm install vuex -s
2.实现配置
src下创建文件夹store
新建index.js
定义：
state存储的数据
mutations定义函数，修改state值的函数
3.使用
取：this.$store.state.xxx
存：this.$store.commit(‘函数名’, 参数);

1.5 Vant

https://vant-contrib.gitee.io/vant/#/zh-CN/
有赞公司开源的基于Vue实现的常用移动端的组件库
1.Vant的使用步骤
1.下载库
npm install vant -s
2.实现配置
在main.js中，实现全局设置vant

3.使用Vant提供的各种组件
https://vant-contrib.gitee.io/vant/#/zh-CN/button
根据官方文档，CV代码

1.6 Axios

http://www.axios-js.com/
Axios的作用跟Ajax一样，代替Ajax
请求后端接口：请求参数和返回值
1.使用步骤：
1.下载库
npm install —save axios vue-axios
2.实现配置
在main.js中实现配置
3.组件中使用
使用Axios是网络接口的请求调用
get请求：
this.axios.get(接口地址).then((返回对象) => {
console.log(返回对象.data)
})
post请求：
this.axios.post(接口地址, {参数数据})
.then(function (返回对象) {
console.log(返回对象.data);
})
.catch(function (error) {
};

二、界面绘制

2.1 搭架子

1.切换目录
2.安装webpack
npm install webpack -s
3.初始化项目
vue init webpack vuemust
4.下载依赖
cd vuemust
npm install vuex -s
npm install vant -s
npm install axios vue-axios -s
npm install vue-baidu-map -s
npm install echarts —save
5.实现配置
在src下创建文件夹store实现vuex的配置