uni-app的介紹安裝和運行

uniapp教程指南

uniapp介紹

uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平台。

• 官網跨平台項目預覽地址

uniapp特點

1. 跨平台
   • 一套代碼可以運行在多個平台，打包生成多個平台的應用
2. 學習成本低（擁抱開發者）
   • 基於vue+小程序的語法
3. 開發成本低（擁抱老板）
   • 無需單獨招聘IOS和安卓開發

創建並運行項目

1. 通過HBuildreX(親爸開發的)編輯器內置環境，下載App版本，該編輯器包含了uniapp創建、運行、打包。(推薦的方式)

   • 下載地址
   • 一定要下載App版本
   • 此編輯器是不需要安裝，只需要解壓使用就行
   • 創建項目

     1. 文件 --> 新建 --> 項目

        • 

     2. 選擇類型uni-app,輸入項目名稱（建議不要使用中文），選擇模板（推薦學習的時候選擇默認模板）

        • 
   • 運行項目

     1. 運行到瀏覽器端（h5）

        • 在編輯器就會生成項目，隨便點擊項目的某個文件，比如點擊選中app.vue，點擊工具欄運行-->運行到瀏覽器 --> chrome
        • 運行效果如下
          • 

     2. 運行到真機或者模擬器

        • 真機需要連接usb，打開開發者工具開啟usb調試功能
        • 此處我是采用雷神模擬器，下載安裝雷神模擬器，進行如下配置
          1. 打開模擬器，設置模擬器（如下圖）
             • 
          2. 打開HBuilder，點擊運行 --> 運行到手機或模擬器 --> android模擬器端口號設置
             • 
          3. 進行模擬器安裝目錄和端口號配置
             • 
          4. 選擇運行 --> 運行到手機或模擬器 --> 選中運行即可
             • 
          5. 切換到模擬器，效果如下
             • 

2. 通過vue-cli命令行創建（不推薦）

   1. 全局安裝vue-cli

       npm install -g @vue/cli
       yarn add @vue/cli -g 
   

   2. 創建uni-app

      vue create -p dcloudio/uni-preset-vue my-project
      

      • 此處項目因為托管github上面，安裝可能會超時
      • 
      • 解決方案
        • 使用手機熱點
        • 增加本地dns解析，修改hosts文件
      • 選中模板
        • 
   3. 運行項目
      • npm run dev:h5