# uni-app入门

# 一、了解uniapp

# 2】安装HBuilderX的App开发版

注意：需要配置用各大厂商的小程序开发者工具来使用模拟机，运行小程序开发者工具时需要在安全设置里面开启服务端口。

# 二、官方文档

# 1】框架

pages.json：页面配置路由、导航栏和底部栏等设置（相当于微信小程序开发的app.json）。注意：定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

manifest.json ：是应用的配置文件，用于指定应用的名称、图标、权限等。（相当于微信小程序开发中的项目设置，编译设置，启用npm模块等）

App.vue：是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。应用生命周期仅可在App.vue中监听，在页面监听无效。（这个文件就相当于微信小程序开发中的app.js和app.wxss）

uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

main.js：是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置webpack等编译选项，具体规范参考：vue.config.js

通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。package.json文件中不允许出现注释，否则扩展配置无效

# 应用生命周期和页面生命周期

# 2】组件

就是vue.js那么写组件

# 3】API

# 4】uniCloud云开发

# 三、uniapp-vuex的使用

uniapp中内置了vuex

//创建store文件夹,新建index.js
import Vuex from 'vuex'

export default new Vuex.Store({
    state:{
        num:0
    },
    mutations:{
        add(state){
            state.num++;
        }
    }
})

这里再main.js中修改Vue对象原型=>设置vuex的store到Vue原型的$store。（在一般的vue单页面应用中是直接挂在store到Vue实例上，但这里选择修改Vue原型的方法）

import Vue from 'vue'
import App from './App'
//引入store对象（在一般的vue单页面应用中是直接挂在store到Vue实例上，但这里选择修改Vue对象原型的方法）
import store from './store'

Vue.prototype.$store=store;//修改Vue对象原型属性$store=store
Vue.config.productionTip = false

App.mpType = 'app'
//如果在这里的Vue实例上挂载store的话，在vue语句转成其他平台小程序语言时会出错。
const app = new Vue({
    ...App
})
app.$mount()