曦瑜爱你 發表於 2020-7-10 21:34:00

VSCode 配 uni-app

<h2 style="text-align: center">CＬＩ工程</h2>
<p style="text-align: left"><span style="font-size: 18pt"><strong>点击查看原文</strong></span></p>
<ul>
<li>全局安装vue-cli</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> npm install -g @vue/cli</pre>
</div>
<ul>
<li>通过cli创建uni-app项目</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> vue create -p dcloudio/uni-preset-vue uni-app</pre>
</div>
<ul>
<li>选择项目模板，可自由选择如下图：👇</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212736028-1510621738.png"></p>
<p><img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212743451-95557792.png"></p>
<ul>
<li>使用vscode打开创建的项目</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212755742-2021024513.png"></p>
<ul>
<li>安装vue语法提示插件👇</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212809611-981567650.png"></p>
<ul>
<li>
<p>cli工程自带uni-app&amp;5+app语法提示</p>
</li>
<li>
<p>安装组件语法提示</p>
</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> npm i @dcloudio/uni-helper-json</pre>
</div>
<ul>
<li>从 git 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212641223-462281655.png"></p>
<p><img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212711204-1933712828.png"></p>
<ul>
<li>使用scss样式</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">先安装node-sass</span>
<span style="color: rgba(0, 128, 128, 1)">2</span> npm install node-<span style="color: rgba(0, 0, 0, 1)">sass
</span><span style="color: rgba(0, 128, 128, 1)">3</span> <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">然后安装sass-loader，这里安装7.3.1版本，版本可选择性更新，因为高版本可能会报错</span>
<span style="color: rgba(0, 128, 128, 1)">4</span> <span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">使用 cnpm 会快一些</span>
<span style="color: rgba(0, 128, 128, 1)">5</span> cnpm install sass-loader@7.3.1</pre>
</div>
<ul>
<li>运行项目</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> npm run dev:%PLATFORM%</pre>
</div>
<ul>
<li>发布项目</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> npm run build:%PLATFORM%</pre>
</div>
<ul>
<li><code>%PLATFORM%</code> 可选值参见package.json中的scripts</li>
</ul>
<p>&nbsp;<img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212421853-1478079674.png"></p>
<h2 style="text-align: center">&nbsp;</h2>
<h2 style="text-align: center">HBuilderX 工程</h2>
<ul>
<li>HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装</li>
<li>初始化npm</li>
</ul>
<div class="cnblogs_code">
<pre>npm init -y</pre>
</div>
<ul>
<li>安装uni-app语法提示</li>
</ul>
<div class="cnblogs_code">
<pre>npm i @types/uni-app @types/html5plus -D</pre>
</div>
<ul>
<li>uni-app项目中manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1461097/202007/1461097-20200710212336072-483594675.png"></p>
<p>&nbsp;</p>
<p><span style="font-size: 18pt"><strong>点击查看原文</strong></span></p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/lygz/p/13281323.html
頁: [1]
查看完整版本: VSCode 配 uni-app