uni-app的介绍安装和运行
<h2 id="uniapp教程指南">uniapp教程指南</h2><h3 id="uniapp介绍">uniapp介绍</h3>
<blockquote>
<p>uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。</p>
</blockquote>
<ul>
<li>官网跨平台项目预览地址</li>
</ul>
<h3 id="uniapp特点">uniapp特点</h3>
<ol>
<li>跨平台
<ul>
<li>一套代码可以运行在多个平台，打包生成多个平台的应用</li>
</ul>
</li>
<li>学习成本低（拥抱开发者）
<ul>
<li>基于vue+小程序的语法</li>
</ul>
</li>
<li>开发成本低（拥抱老板）
<ul>
<li>无需单独招聘IOS和安卓开发</li>
</ul>
</li>
</ol>
<h3 id="创建并运行项目">创建并运行项目</h3>
<ol>
<li>
<p>通过HBuildreX(亲爸开发的)编辑器内置环境，下载App版本，该编辑器包含了uniapp创建、运行、打包。(推荐的方式)</p>
<ul>
<li>下载地址</li>
<li>一定要下载App版本</li>
<li>此编辑器是不需要安装，只需要解压使用就行</li>
<li>创建项目
<ol>
<li>
<p><code>文件</code> --> <code>新建</code> --> <code>项目</code></p>
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120111444343-1567325438.png"></li>
</ul>
</li>
<li>
<p>选择类型uni-app,输入项目名称（建议不要使用中文），选择模板（推荐学习的时候选择默认模板）</p>
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120111908834-30475591.png"></li>
</ul>
</li>
</ol>
</li>
<li>运行项目
<ol>
<li>
<p>运行到浏览器端（h5）</p>
<ul>
<li>在编辑器就会生成项目，随便点击项目的某个文件，比如点击选中app.vue，点击工具栏<code>运行</code>--><code>运行到浏览器</code> --> <code>chrome</code></li>
<li>运行效果如下
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120120721206-1055549942.png"></li>
</ul>
</li>
</ul>
</li>
<li>
<p>运行到真机或者模拟器</p>
<ul>
<li>真机需要连接usb，打开开发者工具开启usb调试功能</li>
<li>此处我是采用雷神模拟器，下载安装雷神模拟器，进行如下配置
<ol>
<li>打开模拟器，设置模拟器（如下图）
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120114027500-2126648584.png"></li>
</ul>
</li>
<li>打开HBuilder，点击<code>运行</code> --> <code>运行到手机或模拟器</code> --> <code>android模拟器端口号设置</code>
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120115813329-1442110682.png"></li>
</ul>
</li>
<li>进行模拟器安装目录和端口号配置
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120120150701-1717701201.png"></li>
</ul>
</li>
<li>选择<code>运行</code> --> <code>运行到手机或模拟器</code> --> 选中运行即可
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120120425823-393565771.png"></li>
</ul>
</li>
<li>切换到模拟器，效果如下
<ul>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220120120543078-723217190.png"></li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
</li>
<li>
<p>通过vue-cli命令行创建（不推荐）</p>
<ol>
<li>全局安装vue-cli</li>
</ol>
<pre><code class="language-shell"> npm install -g @vue/cli
yarn add @vue/cli -g
</code></pre>
<ol start="2">
<li>创建uni-app<pre><code class="language-shell">vue create -p dcloudio/uni-preset-vue my-project
</code></pre>
<ul>
<li>此处项目因为托管github上面，安装可能会超时</li>
<li><img src="https://img2022.cnblogs.com/blog/872697/202201/872697-20220119173714958-245105969.png"></li>
<li>解决方案
<ul>
<li>使用手机热点</li>
<li>增加本地dns解析，修改hosts文件</li>
</ul>
</li>
<li>选中模板
<ul>
<li><img src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/h5-cli-01.png"></li>
</ul>
</li>
</ul>
</li>
<li>运行项目
<ul>
<li>npm run dev:h5</li>
</ul>
</li>
</ol>
</li>
</ol><br><br>
来源：https://www.cnblogs.com/crim/p/15825878.html
頁:
[1]