用 vscode 开发 uni-app 搭建
<h3 id="简介--需求">简介 & 需求</h3><p>uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架，其官方推荐的开发工具为 HBuilderX，使用起来有很好的开发体验。</p>
<p>很多前端之前已经习惯了 vscode，不想更换编辑器。其实 uni-app 和 vscode 也可以很搭，接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。</p>
<h3 id="cli-工程">CLI 工程</h3>
<p>全局安装 vue-cli 3.x（如已安装请跳过此步骤）</p>
<pre><code>npm install -g @vue/cli
</code></pre>
<h3 id="通过-cli-创建-uni-app-项目">通过 CLI 创建 uni-app 项目</h3>
<pre><code>vue create -p dcloudio/uni-preset-vue helloproject
</code></pre>
<p>此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：</p>
<p><img src="https://img2020.cnblogs.com/blog/2439648/202108/2439648-20210818161117264-1212568419.png" alt="image" loading="lazy"></p>
<p>等待模板下载完成，然后自动安装依赖..</p>
<p>如果中间提示 缺少 yarn （可以安装一个，也可以不装）</p>
<pre><code># npm install -g yarn 或者
cnpm install -g yarn
</code></pre>
<p>如果中间有失败，可以重试，如果只是安装依赖失败，则可以重新安装一次依赖即可</p>
<pre><code># 进入项目根目录
cd helloproject
# 安装依赖，如果中间有失败，可多次执行，知道所有安装完成
# npm i 或者
cnpm i
</code></pre>
<h3 id="测试项目">测试项目</h3>
<p>执行下列指令，编译 uniapp项目</p>
<pre><code>npm run serve
# 或者 npm run dev:h5
</code></pre>
<p>如果能看到这个界面，说明项目没问题，后续自由发挥了<br>
<img src="https://img2020.cnblogs.com/blog/2439648/202108/2439648-20210818161948942-2072842372.png" alt="image" loading="lazy"></p>
<p>浏览器打开上面地址即可测试</p>
<p><img src="https://img2020.cnblogs.com/blog/2439648/202108/2439648-20210818162211027-1895360050.png" alt="image" loading="lazy"></p>
<h3 id="附1其他机器执行报错的解决">附1：其他机器执行报错的解决</h3>
<p>正常在 git 提交后， node_modules 是被忽略的，其他伙伴下载代码后，编译，会报个错，如下：</p>
<p><img src="https://img2020.cnblogs.com/blog/2439648/202108/2439648-20210818164326653-456644052.png" alt="image" loading="lazy"></p>
<p>这种错就是最新的babel已经不是这样配置的了，最新配置步骤:</p>
<pre><code>npm install babel-loader babel-core babel-preset-env -D
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -D
npm i @babel/core@^7.0.0 -D
npm i @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D
npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
</code></pre>
<p>执行之后，配置表为（也可以直接改配置表，然后执行 npm i 自动安装：</p>
<pre><code>"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/runtime": "^7.4.5",
"babel-loader": "^8.0.6",
</code></pre>
<p>另外配置也要修改 在.babelrc文件中 要配置成：（如果有）</p>
<pre><code>{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}
</code></pre>
<h3 id="附2使用scss建议使用版本太高会报错">附2：使用scss，建议使用版本（太高会报错）</h3>
<pre><code>"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",
</code></pre><br><br>
来源：https://www.cnblogs.com/ddgo/p/15157409.html
頁:
[1]