uni-app uni-app创建和运行

た入场券 2023-02-28 11:09 120阅读 0赞

### uni-app uni-app创建和运行 ###

*   *  uni-app创建和运行
     *   *  1. 通过 HBuilderX 可视化界面
         *   *   *  创建uni-app
                 *  运行uni-app
         *  2. 通过vue-cli命令行
         *   *   *  环境安装
                 *  创建uni-app
                 *  运行、发布uni-app
         *  3. 使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别
         *   *   *  编译器的区别
                 *  开发工具的区别
                 *  官方文档的说明

## uni-app创建和运行 ##

uni-app支持通过 `HBuilderX` 可视化界面、`vue-cli命令行` 两种方式快速创建项目。

### 1. 通过 HBuilderX 可视化界面 ###

##### 创建uni-app #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 1]

uni-app自带的模板有 `Hello uni-app` ，是官方的组件和API示例。还有一个重要模板是 `uni ui`项目模板，日常开发推荐使用该模板，已内置大量常用组件。

##### 运行uni-app #####

1.  浏览器运行  
    ![在这里插入图片描述][20200720230810637.png]
2.  真机运行  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 2]
3.  小程序运行  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 3]

### 2. 通过vue-cli命令行 ###

##### 环境安装 #####

全局安装vue-cli

npm install -g @vue/cli

##### 创建uni-app #####

**使用正式版**（对应HBuilderX最新正式版）

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

**使用alpha版**（对应HBuilderX最新alpha版）

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

此时，会提示选择项目模板，初次体验建议选择 `hello uni-app` 项目模板，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 4]

##### 运行、发布uni-app #####

npm run dev:%PLATFORM%
    
    npm run build:%PLATFORM%

`%PLATFORM%` 可取值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>平台</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>app-plus</td> 
   <td>app平台生成打包资源（仅支持npm run build:app-plus，也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试）</td> 
  </tr> 
  <tr> 
   <td>h5</td> 
   <td>H5</td> 
  </tr> 
  <tr> 
   <td>mp-alipay</td> 
   <td>支付宝小程序</td> 
  </tr> 
  <tr> 
   <td>mp-baidu</td> 
   <td>百度小程序</td> 
  </tr> 
  <tr> 
   <td>mp-weixin</td> 
   <td>微信小程序</td> 
  </tr> 
  <tr> 
   <td>mp-toutiao</td> 
   <td>字节跳动小程序</td> 
  </tr> 
  <tr> 
   <td>mp-qq</td> 
   <td>qq 小程序</td> 
  </tr> 
  <tr> 
   <td>mp-360</td> 
   <td>360 小程序</td> 
  </tr> 
  <tr> 
   <td>quickapp-webview</td> 
   <td>快应用通用</td> 
  </tr> 
  <tr> 
   <td>quickapp-webview-union</td> 
   <td>快应用联盟</td> 
  </tr> 
  <tr> 
   <td>quickapp-webview-huawei</td> 
   <td>快应用华为</td> 
  </tr> 
 </tbody> 
</table>

### 3. 使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别 ###

##### 编译器的区别 #####

##### 开发工具的区别 #####

##### 官方文档的说明 #####

链接: [uni-app官方文档][uni-app]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]: /images/20230209/be26c9ba52494a5db794c2f850dcc329.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200720225913326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm,size_16,color_FFFFFF,t_70
[20200720230810637.png]: https://img-blog.csdnimg.cn/20200720230810637.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020072023085616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200720231327501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200720232621362.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm,size_16,color_FFFFFF,t_70
[uni-app]: https://uniapp.dcloud.io/quickstart?id=%e4%bd%bf%e7%94%a8cli%e5%88%9b%e5%bb%ba%e9%a1%b9%e7%9b%ae%e5%92%8c%e4%bd%bf%e7%94%a8hbuilderx%e5%8f%af%e8%a7%86%e5%8c%96%e7%95%8c%e9%9d%a2%e5%88%9b%e5%bb%ba%e9%a1%b9%e7%9b%ae%e6%9c%89%e4%bb%80%e4%b9%88%e5%8c%ba%e5%88%ab