以下为新手必懂的完整指南,涵盖项目创建流程和核心文件作用解析:
一、项目创建流程
-
安装开发工具
使用 HBuilderX(官方 IDE)或命令行创建:
# 全局安装 vue-cli npm install -g @vue/cli # 创建项目(选择默认模板) npx degit dcloudio/uni-preset-vue#vite my-project
-
初始化配置
运行后自动生成基础结构,关键步骤:
- 选择模板:
默认模板
(含基础示例) - 包管理器:
npm
或yarn
- 自动安装依赖
- 选择模板:
二、核心目录结构解析
my-project/
├── src/ # 核心开发目录
│ ├── pages/ # 所有页面目录
│ │ └── index/ # 示例首页
│ │ ├── index.vue # 页面组件
│ │ └── index.json # 页面配置文件
│ │
│ ├── static/ # 静态资源(图片/字体等)
│ ├── App.vue # 应用根组件
│ └── main.js # 应用入口文件
│
├── uni_modules/ # 插件模块(自动生成)
├── manifest.json # 应用配置(名称/图标/权限)
├── pages.json # 全局页面路由与样式
├── package.json # npm依赖管理
└── vite.config.js # Vite构建配置(如使用Vite模板)
三、关键文件作用详解
-
pages.json
-
控制全局页面路由与样式
-
配置导航栏、底部 tabBar
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black"
}
}
-
-
manifest.json
-
定义应用基本信息
-
配置 App 图标、启动页、SDK 权限
{
"name": "MyApp",
"appid": "__UNI__XXXXXX",
"description": "示例应用",
"icons": [{ "src": "static/logo.png" }]
}
-
-
App.vue
-
全局入口组件
-
初始化全局样式、监听生命周期
<script> export default { onLaunch: () => console.log('App 启动') } </script> <style> /* 全局CSS */ </style>
-
-
页面文件组(以
index.vue
为例)-
index.vue
:页面布局与逻辑 -
<template> <view class="container"> <text>Hello Uniapp!</text> </view> </template>index.json
:局部页面配置(覆盖全局)
-
-
static/ 目录
- 存放无需编译的静态资源
- 访问路径:
/static/logo.png
四、新手注意事项
-
路由规则
- 新增页面需在
pages.json
注册路径 - 路径格式:
pages/目录名/文件名
(无后缀)
- 新增页面需在
-
资源引用原则
- 图片/字体:优先放
static/
- 组件/工具:放
components/
或utils/
- 图片/字体:优先放
-
多端适配技巧
使用条件编译:
<!-- #ifdef H5 --> <div>仅H5显示的组件</div> <!-- #endif -->
提示:运行
npm run dev:%PLATFORM%
(如dev:mp-weixin
)启动开发环境,通过 HBuilderX 可视化工具可实时预览多端效果。