1.vue-cli創(chuàng)建項目
##安裝vue-cli
npm install -g vue-cli
//安裝完成后玖姑，可以使用 vue -V （注意 V 大寫）查看是否安裝成功别瞭。
vue -V
//新建項目
vue init webpack userCenter
//是否啟用路由值戳，選擇是
//進入目錄
cd userCenter
//安裝依賴
npm i
//啟動
npm run dev
//打包
npm run build
2.使用iview組件庫
##安裝
$ npm install iview --save
## 在main.js 文件中引入iview
import iView from 'iview'
Vue.use(iView)
3.引入vuex
##安裝vuex
npm i vuex --save
##在src目錄下新建文件夾vuex,在vuex文件夾新建store.js文件
## 插入代碼
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
由于我們項目有多個model,需要將store數(shù)據(jù)進行模塊化
在vuex目錄下新建modules文件夾,新建UserModel.js和HomeModel.js文件
UserModel.js
export default {
state: {
author: "paul",
name: "paul",
phone: 13100609928,
sex: 1,
age: 27
},
mutations: {
showUserName(state) {
alert(state.user_name);
}
},
}
HomeModel.js
export default {
state: {
newslist: [],
newsdetail: {}
},
mutations: {
setAgree(state, agreeNum) {
state.newsdetail.agree = agreeNum;
}
},
actions: {
agree(context, newsid) {
// 進行請求,獲取點贊后的agree字段屬性值
Vue.http.post("http://localhost/agree.php", {
newsid: newsid
}, {
emulateJSON: true
}).then(function (res) {
// 處理業(yè)務(wù)
// 調(diào)用上面setAgree方法更新點贊數(shù)
context.commit("setAgree", res.body.agree);
}, function () {})
}
},
getters: {
getNews(state) {
return state.newslist.filter(function (news) {
return !news.isdeleted;
})
}
}
}
引入UserModel,HomeModel
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import UserModule from "./modules/UserModel"
import NewsModule from "./modules/HomeModel"
export default new Vuex.Store({
modules: {
users: UserModule,
news: NewsModule
}
});
在main.js文件中引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import store from '@/vuex/store'
Vue.config.productionTip = false
Vue.use(iView)
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
4.使用 JSON Server 搭建 Mock 服務(wù)器
### 安裝json-server
npm install --save-dev json-server
在根目錄下虫埂，新建mock文件夾,新建mock.json文件
##mock.json
{
"getUserInfo":{
"id":"467655062",
"name":"paul",
"age":"25",
"sex":"1",
"phone":"13100609928",
"email":"467655062@qq.com",
"jsUrl":"http://www.reibang.com/u/5b124ed659f3",
"address":"湖北省武漢市洪山區(qū)關(guān)山大道保利國際中心",
"githubUrl":"https://pauljun.github.io/"
}
}
打開package.json文件
在scripts中添加一行
"scripts": {
"dev": "node build/dev-server.js",
"start": "npm run dev",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"server": "json-server src/mock/mock.json -p 3001" //新增行
},
運行npm run server 打開瀏覽器,輸入http://localhost:3001/getUserInfo,即可看到:
{
"id": "467655062",
"name": "paul",
"age": "25",
"sex": "1",
"phone": "13100609928",
"email": "467655062@qq.com",
"jsUrl": "http://www.reibang.com/u/5b124ed659f3",
"address": "湖北省武漢市洪山區(qū)關(guān)山大道保利國際中心",
"githubUrl": "https://pauljun.github.io/"
}
json-server更多詳細信息可查看更多
json-server操作數(shù)據(jù),模擬數(shù)據(jù)可參考
