快速掌握uni-app搭建，轻松开发跨平台应用

前端

2024-01-26 08:40:27

从零搭建uni-app项目

uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android和H5。它将多种跨端解决方案的精华集于一身，使得开发跨平台应用更加简单、高效。

搭建方式

手动搭建

安装uni-app CLI：
```
npm install -g @dcloudio/uni-app-cli
```
创建项目：
```
uni-app init my-project
```
进入项目目录：
```
cd my-project
```
运行项目：
```
uni-app serve
```

脚手架搭建

安装脚手架：
```
npm install -g @uni-app/cli
```
创建项目：
```
uni-app create my-project
```
进入项目目录：
```
cd my-project
```
运行项目：
```
uni-app serve
```

项目结构

uni-app项目的目录结构如下：

my-project
├── App.vue         // 应用入口文件
├── main.js          // 主 JavaScript 文件
├── pages            // 页面目录
│   ├── index        // 首页
│   │   ├── index.vue
│   │   └── index.js
│   └── other        // 其他页面
│       ├── other.vue
│       └── other.js
├── components        // 组件目录
├── assets           // 资源目录
├── static           // 静态资源目录
├── package.json     // 项目配置文件
└── uni.scss        // 样式文件