uniapp项目结构（uniapp开发项目）

本篇文章给大家谈谈uniapp项目结构，以及uniapp开发项目对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、uni-app的工程文件结构
• 2、uni-app 目录结构
• 3、【uni-app】Vuex介绍和使用
• 4、uni-app目录结构
• 5、如何判断小程序是原生开发还是uniapp开发
• 6、五子棋（1）——uniapp 小程序项目搭建

uni-app的工程文件结构

Root

|- common / utils //存放自己封装的工具类等文件（比如base-util.js、storage-key.js文件）。

|- components //uni-app组件目录。

|----- comp-a.vue //可复用的a组件。

|- wxcomponents //存放小程序组件的目录，也可合并到components里面。

|- hybrid //存放本地网页的目录。

|- platforms //存放各平台专用页面的目录。

|- pages //存放业务页面文件的目录。

|----- index

|--------- index.vue //index页面。

|----- mine

|--------- mine.vue //我的页面。

|- static //存放应用引用静态资源（如图片、视频等）的目录。注意：静态资源只能存放于此。

|- main.js //Vue初始化入口文件。

|- App.vue //用来配置App全局样式以及实现应用生命周期事件。

|- manifest.jspn //配置应用名称、appId、logo、版本等打包信息。

|- pages.json //配置页面路由、导航条、选项卡等页面类信息。

|- uni.scss //此文件是为了方便整体控制应用的风格（比如按钮颜色、边框风格）。

|- unpackage //打包目录，用于存放各个平台的打包文件。

uni-app 目录结构

1.components   自定义组件目录（手动创建）

2.pages   页面存放目录

3.static   静态文件资源目录

4.unpackage   编译后的文件存放目录

5.utils   公共的工具类（手动创建）

6.main.js   应用入口

7.manifest.json   项目配置

8.pages.json   页面配置

【uni-app】Vuex介绍和使用

无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装

uni-app也像小程序一样有 globalData ，这是一种简单的 全局变量 机制

globalData 是简单的全局变量，如果使用状态管理，请使用 vuex

项目文件结构

1.在 main.js 中导入store文件。

2.组装模块并导出 store

3.定义cart.js模块(这里以购物车为例)

4.定义根级别的getters

5.使用

查看下效果

点击添加按钮

uni-app目录结构

不同方式创建的uniapp项目，默认包含的目录及文件也是不同的。

在uniapp-test1项目下：

在my-project项目下：

如何判断小程序是原生开发还是uniapp开发

按照以下步骤判断小程序是原生开发还是uniapp开发。

1、查看项目的文件结构。uniapp项目的文件结构与传统的小程序项目不同，有一个独特的/src目录。

2、查看项目中是否有uni.js文件。uniapp会在小程序项目中自动生成一个uni.js文件，文件是uniapp的核心文件之一。

3、查看项目的配置文件。uniapp会在项目根目录下生成一个uniapp.config.js的文件，文件包含了uniapp项目的各种配置信息。

五子棋（1）——uniapp 小程序项目搭建

1.HbuilderX创建项目，选择uni-app，选择默认模板1.HbuilderX创建项目，选择uni-app，选择默认模板

2.配置appId

3.vuex

uni-app 内置了 vuex。但是需要结合第三方来一起协作。默认的模板项目首先是没有node-modules模块依赖的，首先需要初始化webpack，然后建store文件夹，在main.js中引入

4.创建自己习惯的目录结构

5.配置微信开发者工具路径

点击 运行 - 运行到小程序模拟器 - 微信开发者工具

关于uniapp项目结构和uniapp开发项目的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。