UniApp开发基础框架搭建流程

发表于 更新于
使用HBuilderX搭建及开发UniApp项目 + VUEX + Scss + uView

UniApp开发基础框架搭建流程

工具选择：HBuilderX

文件 -> 新建 -> 项目（我这里选择默认模板）

安装scss

通过插件市场安装

​ 工具 -> 插件安装：安装scss/sass编译

安装uview（通过HbuilderX方式）

​ 安装链接：uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

引入uView主JS库

​ 在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

1
2
3
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

在引入uView的全局SCSS主题文件

​ 在项目根目录的uni.scss中引入此文件。

1
2
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

引入uView基础样式（注意！在App.vue中首行的位置引入，注意给style标签加入lang=”scss”属性）

1
2
3
4
5
/* App.vue */
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
</style>

安装Vuex

​ uniapp默认就已经安装了VUEX

​ 添加store文件夹及其文件：根目录新建store文件夹，文件夹中新建index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
//store/index.js

//这边存放了项目需要用到的全局的东西（这里我放了登录和退出的接口，及token等）
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/* eslint-disable */
import {
    login,
    logout
} from '../apis/user.js';

const store = new Vuex.Store({
    state: {
        token: '',
        name:'',
        avatar:'',
        roles:''
    },
    mutations: {
        SET_TOKEN: (state, token) => {
            state.token = token;
        },
        SET_NAME: (state, name) => {
            state.name = name;
        },
        SET_AVATAR: (state, avatar) => {
            state.avatar = avatar;
        },
        SET_ROLES: (state, roles) => {
            state.roles = roles;
        }
    },
    actions: {
        // 用户登录
        login({
            commit
        }, userInfo) {
            return new Promise((resolve, reject) => {
                login(userInfo).then(data => {
                    console.log('login', data)
                    const obj = data;
                    commit('SET_TOKEN', obj.token);
                    commit('SET_NAME', obj.name);
                    commit('SET_AVATAR', obj.userId);
                    commit('SET_ROLES', 'admin');
                    uni.setStorageSync('token', obj.token);
                    uni.setStorageSync('userName', obj.name);
                    uni.setStorageSync('userSn', obj.userId);
                    uni.setStorageSync('userGroupId', obj.userGroupId);
                    uni.setStorageSync('unitGroupId', obj.unitGroupId);
                    uni.setStorageSync('sysAdmin', obj.sysAdmin);
                    resolve(data);
                }).catch(error => {
                    reject(error.msg);
                });
            });
        },

        // 用户登出
        logout({
            commit,
            state
        }) {
            return new Promise((resolve, reject) => {
                logout(state.token).then(() => {
                    commit('SET_TOKEN', '');
                    commit('SET_NAME', '');
                    commit('SET_AVATAR', '');
                    commit('SET_ROLES', []);
                    uni.clearStorage(); //清除本地缓存
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        }
    }
})
export default store

​ 这时只要将Vue引入到根目录的main.js即可

1
2
3
4
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store