uni-app实战——创建项目、项目结构详解

蔚落 2024-04-17 06:04 62阅读 0赞

### uni-app修炼之路（二） ###

*  导语
 *  创建项目
 *   *   *   *  1.点击文件——>新建——>项目
             *  2.选择uni-app——>填写项目名称——>选择默认模板
 *  项目结构详述
 *   *   *   *  1.首先我们看一下\[官方的解释\](https://uniapp.dcloud.io/frame)
             *  2.创建成功后，我们打开pages目录，这里是页面目录，默认模板只有一个index页面，我们打开它来看看
             *  3.再来看一下pages.json这个文件
             *  4.再来看一下manifest.json这个文件
             *  5.main.js
             *  6.App.vue

# 导语 #

上篇文章说过让大家自己去[官网][Link 1]看如何创建**uni-app**的项目，但是我觉得还是有必要讲解一下需要注意的地方。那今天记录一下如何使用**uni-app**创建项目，并讲解**uni-app**的结构。

# 创建项目 #

#### 1.点击文件——>新建——>项目 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]

#### 2.选择uni-app——>填写项目名称——>选择默认模板 ####

注意这里的项目名称不是你的app 的名称，app的名称需要在代码里定义

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]

# 项目结构详述 #

#### 1.首先我们看一下[官方的解释][Link 2] ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]

#### 2.创建成功后，我们打开pages目录，这里是页面目录，默认模板只有一个index页面，我们打开它来看看 ####

这里要注意一下，我们以后写一个页面，一般是一个template里面嵌套一个view，然后在view里面编写你的代码

最好不要一个template里面写多个view并列，否则会有一些未知的错误,下面是错误示范

然后是js的代码，里面主要是vue的js语法

最后是css代码，用来美化页面

页面就包含以上三个部分，我们点减号把代码收起，可以清晰的看到它的代码结构。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]

#### 3.再来看一下pages.json这个文件 ####

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "uni-app"//页面导航栏的名称
    			}
    		}
    	],
    	"globalStyle": {
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "我的第一个app",//默认导航栏名称
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	}
    }

#### 4.再来看一下manifest.json这个文件 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]  
里面有很多配置，比如应用名称、模块权限配置（支付、分享等权限）。。。

#### 5.main.js ####

这里主要是一个全局的js，我们写的通用的js方法可以封装，然后在这里引入，然后就可以在每个页面里用了。

import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    App.mpType = 'app'
    
    const app = new Vue({
        ...App
    })
    app.$mount()

#### 6.App.vue ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]  
好了，大概就介绍到这里了，看多了容易晕，可以去看一下[官网][Link 2]

[Link 1]: https://uniapp.dcloud.io/quickstart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/aa16b65a5fc54be7a455b03f7167da50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/d256bc2af54e4d4581db67d25153832c.png
[Link 2]: https://uniapp.dcloud.io/frame
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/7989c54a40904c7d8bcea98766f00e04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/bb1448a929c5466c8ba0d787bb274ad6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/75d1e756c3d144ac8009e3c0d3d8fd26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/10dbfb949bb64916ab3a8b0ca0ee728c.png