当 uni-app 遇见 vscode
<p>uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，其官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。</p><p>不过，由于 HBuilderX 没有 Linux 版以及很多前端之前已经习惯了 vscode，不想更换编辑器。直接使用 vscode 开发 uni-app，其体验并不是很好。</p>
<p> </p>
<p>其实 uni-app 和 vscode 也可以很搭，接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。</p>
<h2>CLI 工程</h2>
<h3>全局安装 vue-cli 3.x（如已安装请跳过此步骤）</h3>
<pre class="has"><code>npm install -g @vue/cli
</code></pre>
<h3>通过 CLI 创建 uni-app 项目</h3>
<pre class="has"><code>vue create -p dcloudio/uni-preset-vue my-project
</code></pre>
<p>此时，会提示选择项目模板，初次体验建议选择 <code>hello uni-app</code> 项目模板，如下所示：</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LWYzMjY5NTI4ODkwNzY4YmYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTQ2L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png"></p>
<p>image.png</p>
<h3>在vscode中打开项目</h3>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LWE1NGRiOWRhMjAzMjRlMTAucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<p>安装vue语法提示插件vetur</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LTJhODhlZWVmOGNkZDVhMGMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNjg2L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png"></p>
<p>image.png</p>
<p>CLI 工程默认带了uni-app语法提示和5+App语法提示</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LWM3MjQyYTk4MmEyZWYxZTkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LTAwZjhkNzA1MmM0YTk1YzYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<h3>安装组件语法提示</h3>
<pre class="has"><code>npm i @dcloudio/uni-helper-json
</code></pre>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LTY2ZDc2YjdlMGEwODY1NmMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LTFjNDI1NzNhODE5NjNhMTUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<h3>导入 HBuilderX 自带的代码块</h3>
<p>从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LWJjMWVhMjk5NjBjNGY5MjgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LWJhMzQ5ZGUyMDcxMWRhMzMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LWU1MGJhODQyNTc3MDk0OGQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p>image.png</p>
<h3>运行项目</h3>
<pre class="has"><code>npm run dev:%PLATFORM%
</code></pre>
<h3>发布项目</h3>
<pre class="has"><code>npm run build:%PLATFORM%
</code></pre>
<p><code>%PLATFORM%</code> 可取值如下：</p>
<table><thead><tr><th>值</th>
<th>平台</th>
</tr></thead><tbody><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></tbody></table><p>CLI 方式参考文档</p>
<h2>HBuilderX 工程</h2>
<p>HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装</p>
<h3>初始化npm（如已初始化跳过此步骤）</h3>
<pre class="has"><code>npm init -y
</code></pre>
<h3>安装 uni-app 语法提示</h3>
<pre class="has"><code>npm i @types/uni-app @types/html5plus -D
</code></pre>
<p>另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMzU1MzI5LWFmNGQ2ZDA4OTYxOWQwZWEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png"></p>
<p> </p>
<p>请问，vscode开发的uni-app 要如何运行微信小程序</p>
<p>npm run dev:mp-weixin 会在项目里生成dist文件夹下mp-weixin文件夹,然后用微信开发者工具打开</p><br><br>
来源：https://www.cnblogs.com/wjlbk/p/12633403.html
頁:
[1]