关于uni-app的环境搭建及使用

最新推荐文章于 2024-07-04 21:42:11 发布

阿彤の小铃铛

最新推荐文章于 2024-07-04 21:42:11 发布

阅读量1.8k

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_47295135/article/details/110673413

版权

本文介绍了uni-app的环境搭建，包括安装HBuilder X和配置微信开发者工具。讲解了如何使用vuex，配置manifest.json，以及获取节点的方法。讨论了uni-app中遇到的问题及其解决方案，如Tabbar配置、页面跳转、数据请求和组件使用。同时阐述了nvue的特点，数据存储和CSS单位选择，提供了一站式的uni-app开发入门指导。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

前言

## 什么是uni-app？

uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

1.搭建环境

上官网安装一下开发工具

这里送上连接 www.dcloud.io/hbuilderx.h…

然后需要安装微信开发者工具最好用最新的

如果直接写app的话可以安装模拟器我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了

然后用开发工具创建一个模板

2.使用vuex

uni-app已经内置vuex 不需要再安装了

在根目录下新建store文件在其目录创建index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
   
    state: {
   
    	text: 'demo'
    },
    mutations: {
   
    	SetText(state, v) {
   
    		state.text = v
    	}
    },
    actions: {
   
    	setText: function({
   commit}, v) {
   
    		commit('SetText', v)
    	}
    }
})
export default store 复制代码

然后在main.js入口文件

import Vue from 'vue'
import App from './App'
// 这里引入store
import store from './store'
// 这里是重要的一步 这里不写 app会找不到store
Vue.prototype.$store = store
const app = new Vue({
   
    store,
    ...App
})
app.$mount()