vue,vuex,iview实战操作

1.vue-cli创建项目

##安装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组件库

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数据进行模块化
在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) {
        // 处理业务
        // 调用上面setAgree方法更新点赞数
        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 服务器

### 安装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.jianshu.com/u/5b124ed659f3",
    "address":"湖北省武汉市洪山区关山大道保利国际中心",
    "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.jianshu.com/u/5b124ed659f3",
    "address": "湖北省武汉市洪山区关山大道保利国际中心",
    "githubUrl": "https://pauljun.github.io/"
}

json-server更多详细信息可查看更多
json-server操作数据,模拟数据可参考