一.環(huán)境搭建
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先執(zhí)行此命令
4.創(chuàng)建項目
a. 命令行創(chuàng)建
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安裝(組件使用根據(jù)具體情況選擇)
npm i vant -S
三.項目模塊封裝
1.項目結構模塊（非初始模塊，已做二次封裝）
image.png
2.router的路由
每個路由應該映射一個組件
image.png
四.頁面渲染
1.列表頁
data：進行變量定義
methods：執(zhí)行方法
created：在實例創(chuàng)建完成后被立即調用 一般用于數(shù)據(jù)初始化
列表頁用過v-for對list進行遍歷脐瑰，用模板語法來聲明式地將數(shù)據(jù)渲染
image.png
效果
image.png
2.動態(tài)路由匹配
從列表頁到詳情頁是動態(tài)路由跳轉拱撵，需要傳遞一個參數(shù)來獲取不同項目的詳情內容赴蝇，此項目主要采用this.$router.push方法
//列表頁點擊a標簽調用此方法
toInfo(Mst_ID) {
if(Mst_ID != "") {
this.$router.push({
path: 'nzxmInfo',
query: {
Mst_ID: Mst_ID,
}
})
}
},
//詳情頁在使用創(chuàng)建完成后獲取路由實例來獲取Mst_ID
this.Mst_ID = this.$route.query.Mst_ID
3.詳情頁
data：進行變量定義
methods：執(zhí)行方法
created：在實例創(chuàng)建完成后被立即調用 一般用于數(shù)據(jù)初始化
在變量定義時冬竟，需注意傳遞的是一個數(shù)組還是對象
image.png
image.png
image.png
效果
image.png
image.png
PS
三個點（...）真名叫擴展運算符著恩，是在ES6中新增加的內容奴潘，它可以在函數(shù)調用/數(shù)組構造時凳鬓，將數(shù)組表達式或者string在語法層面展開呼巴；還可以在構造字面量對象時將對象表達式按照key-value的方式展開
說白了就是把衣服脫了泽腮，不管是大括號（[]）御蒲、花括號（{}），統(tǒng)統(tǒng)不在話下诊赊，全部脫掉脫掉厚满！
//數(shù)組的合并
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}
