文章目錄

• • • • • 一、下載并安裝開發工具
        • • 1. 官網下載
          • 2. 點擊 `DOWNLOAD`
          • 3. 版本選擇
        • 二、安裝 `sass` 依賴
        • • 2.1. 打開 `HBuilder X`
          • 2.2. 打開插件地址
          • 2.3. 導入插件
          • 2.4. 在彈出框中點擊
          • 2.5. 點擊【是】
          • 2.6. 下載狀態
          • 2.7. 等待完成即可
        • 三、創建 uni-app 項目
        • • 3.1. 創建項目
          • 3.2. 項目目錄介紹

一、下載并安裝開發工具

1. 官網下載

HBuilder X下載

2. 點擊 DOWNLOAD

3. 版本選擇

選擇 App 開發版本

windows 版本下載完成之后會得到一個 zip 的壓縮包文件，解壓完成即可使用

二、安裝 sass 依賴

因為我們的項目開發會使用 sass，所以需要為 HBuilder X 安裝 sass 編譯器。

2.1. 打開 HBuilder X

2.2. 打開插件地址

https://ext.dcloud.net.cn/plugin?id=2046

2.3. 導入插件

點擊【使用 HBuilderX 導入插件】

2.4. 在彈出框中點擊

【打開 HBuilderX】

2.5. 點擊【是】

2.6. 下載狀態

此時會在 HBuilderX 右下角，提示你【正在下載】

2.7. 等待完成即可

三、創建 uni-app 項目

3.1. 創建項目

• 高版本選擇頁面
  
• 低版本選擇頁面
  
  

3.2. 項目目錄介紹

├─pages // 頁面存放文件夾，等同于 微信小程序中的 pages │ └─index // 默認生成的頁面 ├─static // 靜態資源存放文件夾 └─uni_modules // uni-app組件目錄 │ └─uni-xxx // uni-app 所提供的業務組件，等同于 微信小程序中的組件 ├─App.vue // 應用配置文件，用來配置全局樣式、生命周期函數等，等同于 微信小程序中的app.js └─main.js // 項目入口文件 ├─mainfest.json // 配置應用名稱、appid、logo、版本等打包信息， └─pages.json // 配置頁面路徑、窗口樣式、tabBar 等頁面類信息，等同于 微信小程序中的app.json └─uni.scss // uni-app內置的常用樣式變量

總結

以上是生活随笔為你收集整理的uniapp 开发基础环境搭建和配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。