一丶專案分析
1.UI:
2.介面資訊:
二丶專案環境
- Mockjs:生成模擬資料(含中文名,以及地址)
- json-server:模擬後端介面
- webpack-dev-server:開啟伺服器環境+介面代理
- jquery:使用jquery的ajax拉取資料
- vue+vuex:vuex負責資料互動,vue渲染頁面
- iviewui:ui元件,方便佈局
搭建開發環境
1.基本環境
2.Mockjs使用簡介
- 安裝:
npm install --save Mockjs - 使用:
詳細API:mockjs.com
mock.js
var Mock = require('mockjs')
var fs =require('fs')
var Random = Mock.Random
//儲存資料
var arr=[]
//動態生成4W條資料
for(let i=1;i<40000;i++){
//生成隨機項
let name=Random.cname();
let age=Mock.mock({"age|1-100": 100 }).age
let home=Random.province();
let sex=Random.pick(["男","女"]);
let education=Random.pick(["初中","高中","專科","本科"]);
arr.push({"id":i,name,age,home,sex,education})
}
//寫入檔案
fs.writeFile("db.json", JSON.stringify( {"student": arr}),function(){
console.log("done")
})
複製程式碼node mock.js 即可生成db.json模擬資料檔案
3.json-server使用簡介
安裝:npm install -g json-server
使用:在有db.json(模擬資料的資料夾)下json-server --watch db.json,
即可在127.0.0.1:3000下看到模擬資料.
4.介面代理
原因:由於我們的頁面在8080埠執行,不能跨域訪問3000埠的資料資訊.所以需要使用webpack-dev-server進行跨域代理.
webpack-config.js檔案下新增如下程式碼:
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
複製程式碼啟動webpack-dev-servernpm run dev,即可在8080埠的api虛擬路徑下(127.0.0.1:8080/api/student)看到3000埠的40000條資料了.
5.引入jquery
在index.html中引入jquery
6.Vuex安裝,配置
目的:vuex(狀態管理器),用於儲存管理元件的狀態(與UI互動),並與後端進行資料互動
安裝:npm install --save vuex
配置:
- 建立store倉庫資料夾,並建立index.js主檔案和info.js儲存資訊的檔案
- index.js檔案負責暴露所有store庫檔案(例如:info.js)
- info.js檔案負責拉取後端資料,以及記錄UI元件資訊.
//info.js
export default{
//名稱空間
namespaced:true,
//狀態管理
state:{
arr:[]
},
//無副作用方法,唯一用於改變state的地方
mutations:{
changeArr(state,{arr}){
state.arr=arr;
}
},
//副作用方法,用於進行邏輯判斷,以及拉取資料
actions:{
loadInfo({commit}){
$.get("/api/student?_limit=10",function(data,statu,xhr){
commit("changeArr",{arr:data})
})
}
}
}
//index.js
import info from "./info"
export default{
modules:{
info
}
}
複製程式碼- 在main.js入口檔案下引入並使用vuex
//main.js原有基礎上中加入如下程式碼
import Vuex from "vuex";
import store from "./store/index";
Vue.use(Vuex)
new Vue({
el:"#app",
render(h){
return h(App)
},
//將store註冊到prototype上
store: new Vuex.Store(store)
})
複製程式碼現在vuex就基本配好了.我們可以在Vue元件上看一下vuex是否配置成功.
//app.vue元件
<template>
<div>
//獲取Vuex中的資料
{{$store.state.info.arr}}
</div>
</template>
<script>
export default {
//元件建立時呼叫loadInfo方法拉取資料
created(){
this.$store.dispatch("info/loadInfo")
}
}
</script>
複製程式碼現在就可以開啟127.0.0.1:8080頁面檢視vuex是否完成了
7.iviewui
目的:iview可以有效減少我們花在佈局上的精力.
安裝:npm install --save iview
配置:
- 在index.html中引入node_modules\iview\dist\styles\iview.css樣式表
<link rel="stylesheet" href="./node_modules/iview/dist/styles/iview.css"> - 在入口檔案main.js中引用iview元件,並使用
import iview from "iview"; Vue.use(iview)
現在就可以了
以上就是專案的所有配置