正文

uniapp快速上手：从零到一启动你的第一个应用

/0 浏览量
0320

引言

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、以及各种小程序等多个平台。本文将带你从零开始，快速上手 uniapp，并启动你的第一个应用。

准备工作

在开始之前，请确保你的电脑上已安装以下软件：

  • Node.js 和 npm：用于项目依赖的安装和管理。
  • Visual Studio Code 或其他代码编辑器：用于编写和编辑代码。
  • 微信开发者工具或支付宝开发者工具：用于测试小程序。

安装 uniapp

  1. 打开命令行工具（终端）。
  2. 执行以下命令全局安装 uniapp：
npm install -g @dcloudio/uni-cli
  1. 安装完成后，你可以通过以下命令检查版本确认安装成功：
uni -V

创建新项目

  1. 打开命令行工具，进入你想要创建项目的目录。
  2. 执行以下命令创建新项目：
uni init
  1. 在弹出的菜单中选择模板，这里我们选择“空白模板”：
请选择模板：
1. 模板一（默认）
2. 模板二
3. 模板三
4. 模板四
5. 模板五
6. 模板六
7. 模板七
8. 模板八
9. 模板九
10. 模板十
请输入模板的编号：1
  1. 输入项目名称，例如 myapp，然后按回车键。

配置项目

  1. 进入项目目录：
cd myapp
  1. 打开项目文件夹，你会看到以下文件和目录：
├── node_modules
├── pages
│   └── index
│       ├── index.vue
│       └── index.js
├── static
├── src
│   └── main.js
├── .gitignore
├── .postcssrc.js
├── package.json
├── README.md
└── uni.config.json
  1. 修改 src/main.js 文件，将以下代码替换为：
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()
  1. 修改 pages/index/index.vue 文件，将以下代码替换为：
<template>
  <view class="container">
    <text class="title">Hello uni-app</text>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.title {
  font-size: 20px;
  color: #333;
}
</style>

运行项目

  1. 在命令行工具中，执行以下命令运行项目：
uni run --h5
  1. 打开浏览器，访问 http://localhost:8080，你应该能看到一个显示“Hello uni-app”的页面。

总结

恭喜你，你已经成功启动了你的第一个 uniapp 应用！接下来，你可以根据自己的需求，继续学习和探索 uniapp 的更多功能和特性。

-- 展开阅读全文 --