一.环境搭建
1.安装node.js
https://nodejs.org/zh-cn/
2.切换npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.vue-cli脚手架
npm install -g @vue/cli //如果安装较慢 可以使用 cnpm i -g @vue/cli@3.3.0
npm uninstall vue-cli -g //如果原来安装过vue-cli2先执行此命令
4.创建项目
a. 命令行创建
vue create 项目名称
b. 进入可视化页面进行项目搭建
vue ui
5.启动项目
npm run serve
二.项目搭建
1vue-router
1.1 vue-router安装
npm install vue-router
1.2 vue-router引用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2 axios安装
2.1 axios安装
npm install axios --save
3 vant安装(组件使用根据具体情况选择)
npm i vant -S
三.项目模块封装
1.项目结构模块（非初始模块，已做二次封装）
image.png
2.router的路由
每个路由应该映射一个组件
image.png
四.页面渲染
1.列表页
data：进行变量定义
methods：执行方法
created：在实例创建完成后被立即调用 一般用于数据初始化
列表页用过v-for对list进行遍历，用模板语法来声明式地将数据渲染
image.png
效果
image.png
2.动态路由匹配
从列表页到详情页是动态路由跳转，需要传递一个参数来获取不同项目的详情内容，此项目主要采用this.$router.push方法
//列表页点击a标签调用此方法
toInfo(Mst_ID) {
if(Mst_ID != "") {
this.$router.push({
path: 'nzxmInfo',
query: {
Mst_ID: Mst_ID,
}
})
}
},
//详情页在使用创建完成后获取路由实例来获取Mst_ID
this.Mst_ID = this.$route.query.Mst_ID
3.详情页
data：进行变量定义
methods：执行方法
created：在实例创建完成后被立即调用 一般用于数据初始化
在变量定义时，需注意传递的是一个数组还是对象
image.png
image.png
image.png
效果
image.png
image.png
PS
三个点（...）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开
说白了就是把衣服脱了，不管是大括号（[]）、花括号（{}），统统不在话下，全部脱掉脱掉！
//数组的合并
var arr1 = ['hello']
var arr2 =['chuichui']
var mergeArr = [...arr1,...arr2]
mergeArr // ['hello','chuichui']
// 对象分合并
var obj1 = {name:'chuichui'}
var obj2 = {height:176}
var mergeObj = {...obj1,...obj2}
mergeObj // {name: "chuichui", height: 176}
