您现在的位置是：网站首页 > uni-app快速入门：环境搭建与第一个项目文章详情

uni-app快速入门：环境搭建与第一个项目

陈川【 uni-app 】 5179人已围观

环境搭建

安装 Node.js

在开始使用 uni-app 之前，首先需要确保你的电脑上安装了 Node.js。Node.js 是一个运行 JavaScript 的服务器端环境，对于开发 uni-app 应用来说是必不可少的。可以通过访问 Node.js 官网下载并安装适合你操作系统的版本。

安装 UNI-CLI

uni-app 使用了一个基于 Node.js 的命令行工具（CLI），称为 UNI-CLI。通过这个工具，我们可以方便地创建、管理、构建和发布 uni-app 项目。在终端或命令提示符中运行以下命令来全局安装 UNI-CLI：

npm install -g @dcloudio/uni-cli

创建项目

在你的开发环境中，选择一个合适的目录来创建一个新的 uni-app 项目。打开终端或命令提示符，导航到你想创建项目的目录，并执行以下命令：

uni init my-app --template vue

这里，my-app 是你新项目的名称，--template vue 指定了使用 Vue.js 作为框架的模板。这将会生成一个基本的 uni-app 项目结构。

配置项目

在项目启动后，uni-app CLI 会自动帮助你配置一些基础的文件和设置。确保你的 uniapp.config.js 文件中包含了正确的配置信息，例如：

module.exports = {
  pages: [
    {
      path: 'pages/index/index',
      entry: 'src/main.js'
    }
  ],
  // 其他配置项...
};

第一个 uni-app 项目

创建页面

uni-app 支持多种页面组件，包括原生页面、小程序页面、H5 页面等。在这里，我们创建一个简单的原生页面。

新建页面：在 src/pages 目录下，创建一个名为 hello 的文件夹，并在其中创建一个名为 index.html 的文件。

编写 HTML：在 index.html 中添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>欢迎使用 uni-app</h1>
    <button id="sayHello">点击我！</button>
    <div id="log"></div>
    <script src="/static/js/uni_modules/uni-app/dist/uni.all.min.js"></script>
  </body>
</html>

这里引入了 uni-app 的全局 JS 文件 uni.all.min.js，用于加载所有 uni-app 的原生功能。

编写 JS：在 index.js 文件中添加如下代码：

export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  methods: {
    sayHello() {
      uni.showModal({
        title: '提示',
        content: this.message,
        showCancel: false
      });
    }
  }
};

在此示例中，我们定义了一个数据对象和一个方法 sayHello。当用户点击按钮时，会弹出一个模态框显示欢迎信息。

编写样式：在 index.scss 或 index.wxss 文件中添加如下样式：
```
#log {
  color: red;
  margin-top: 20px;
}
```
这里添加了一些基本的样式来美化页面。

运行项目

在终端或命令提示符中，切换到项目根目录，并执行以下命令启动开发服务器：

uni run dev

在浏览器中打开 http://localhost:8080/pages/hello/index，你应该能看到一个带有欢迎信息的页面，以及一个按钮。点击按钮后，会弹出一个模态框展示欢迎信息。

总结

通过上述步骤，你已经成功地创建了一个 uni-app 项目，并开发了一个简单的页面应用。uni-app 提供了丰富的功能和强大的跨平台能力，使得开发一次、发布多端成为可能。随着项目的深入，你可以进一步探索 uni-app 的更多特性和组件，以构建更复杂和功能丰富的应用。

我的名片

网名：川

职业：前端开发工程师

现居：四川省-成都市

邮箱：chuan@chenchuan.com

站点信息

建站时间：2017-10-06
网站程序：Koa+Vue
本站运行：
文章数量：
总访问量：
微信公众号：扫描二维码，关注我