HbuilderX uni-app uview vuex 微信小程序开发记录

uni-app引入uView2.0的步骤

第一步：在uni-app新建的项目中 使用CMD下载uView

npm install uview-ui

第二步：在main.js里引入和注册uView 这两句代码需要在import Vue之后

import uView from '@/node_modules/uview-ui'

Vue.use(uView)

第三步：在uni.scss文件中引入uView的全局Scss主题文件

@import '@/node_modules/uview-ui/theme.scss';

第四步：在App.vue文件中引入全局共用的scss文件

<style lang="scss">

    @import "@/node_modules/uview-ui/index.scss";

</style>

第五步：在pages.json中配置uview组件

"easycom": {

//微信小程序写法如下：

"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"

//h5,APP等写法如下：

//"^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue"

},

注意微信小程序：
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
注意路径，不用@/node_modules/

第六步：安装vuex

npm install --save vuex

第七步 配置vuex

【1】在src文件夹下新增一个store文件夹，里面添加一个index.js文件

【2】在main.js文件中引入store文件下的index.js

import store from '@/store/index.js' 
new Vue({
    el: '#app',
    store, // 将store暴露出来
    template: '<App></App>',
    components: { App }
});

【3】store文件下的index.js配置

import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) 

export default new Vuex.Store({
    state: { 
        // state 类似 data
        //这里面写入数据
    },
    getters:{ 
        // getters 类似 computed 
        // 在这里面写个方法
    },
    mutations:{ 
        // mutations 类似methods
        // 写方法对数据做出更改(同步操作)
    },
    actions:{
        // actions 类似methods
        // 写方法对数据做出更改(异步操作)
    }
})