vue3+ts+vite 搭建uniapp项目（微信小程序
匿名 · 更新于 2022/5/26
- 模板下载：
- uniapp 官网通过vue-cli 命令行创建uniapp，参考uni-app官网，使用 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project下载模板；
- 安装css预处理 sass:
- 项目终端输入：yarn add node-sass@^4.0.0 sass-loader@^10.0.1 sass（模板没有默认安装sass, 如果不安装直接使用会报错）
- 安装uni-ui组件库，配置easycom模式无引入使用
- 项目终端输入：yarn add @dcloudio/uni-ui
- src/package.json 文件配置easycom模式(组件无需import | require直接使用)
"easycom": { "autoscan": true, "custom": { "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } }<pre style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 24px; padding: 8px; position: relative; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">
- 配置使用微信小程序API
-
由于安装的uniapp-ts项目只会包含uni-app本身的@types声明，如果想直接使用wx或小程序的api的话就需要自行添加，以微信小程序为例：项目终端输入：yarn add @types/weixin-app
-
打开tsconfig.json文件，在types选项中添加weixin使用的声明
<div style="clear:both;margin-bottom:20px" title="双击代码块即可选中代码块，按下Ctrl+C复制代码"> <pre class="brush:js;toolbar:false; " title="js代码">"types": [ "@dcloudio/types", //这一项是原本包含的 "weixin-app", //wx-app的TypeScript定义 新添加 /以下包需要先安装*********/ "miniprogram-api-typings",//微信小程序api的typescript类型定义文件，和weixin-app同；可选 "mini-types", //支付宝小程序的typescript类型定义文件 ],
<pre style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 24px; padding: 8px; position: relative; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">
-
- 配置文件路径别名 | 可选
- 打开vite.config.ts文件，使用resolve选项配置：
<div style="clear:both;margin-bottom:20px" title="双击代码块即可选中代码块，按下Ctrl+C复制代码"> <pre class="brush:js;toolbar:false; " title="js代码">import { defineConfig } from 'vite' import uni from '@dcloudio/vite-plugin-uni'
const path = require('path')
// https://vitejs.dev/config/ export default defineConfig({ plugins: [uni()], resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, })
<pre style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 24px; padding: 8px; position: relative; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);"> -
tsconfig.json中配置
<pre style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 24px; padding: 8px; position: relative; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);"><div style="clear:both;margin-bottom:20px" title="双击代码块即可选中代码块，按下Ctrl+C复制代码"> <pre class="brush:js;toolbar:false; " title="js代码">//compilerOptions中配置
"baseUrl": ".", "paths": { "@/": [ "src/" ] },
<pre style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 24px; padding: 8px; position: relative; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);"> -
<p style="box-sizing: border-box; outline: 0px; margin: 0px 0px 16px; padding: 0px; font-size: 18px; color: rgb(77, 77, 77); overflow: auto hidden; overflow-wrap: break-word; line-height: 26px !important;"><span style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; background-color: rgb(254, 252, 216);">发现在vite.config.ts中无法使用关键字 require；</span><span style="box-sizing: border-box; outline: 0px; font-weight: 700; overflow-wrap: break-word;"><span style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; background-color: rgb(254, 252, 216);">要重启编辑器</span></span><span style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; background-color: rgb(254, 252, 216);">）</span></p> <ol style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding-right: 0px; padding-left: 0px; list-style: none; overflow-wrap: break-word;"> <li style="box-sizing: border-box; outline: 0px; margin: 8px 0px 0px 40px; padding: 0px; list-style: decimal; overflow-wrap: break-word;"> <p style="box-sizing: border-box; outline: 0px; margin: 0px 0px 16px; padding: 0px; font-size: 18px; color: rgb(77, 77, 77); overflow: auto hidden; overflow-wrap: break-word; line-height: 26px !important;">安装依赖包：<span style="box-sizing: border-box; outline: 0px; font-weight: 700; overflow-wrap: break-word;">yarn add @types/node -D</span></p> </li> <li style="box-sizing: border-box; outline: 0px; margin: 8px 0px 0px 40px; padding: 0px; list-style: decimal; overflow-wrap: break-word;"> <p style="box-sizing: border-box; outline: 0px; margin: 0px 0px 16px; padding: 0px; font-size: 18px; color: rgb(77, 77, 77); overflow: auto hidden; overflow-wrap: break-word; line-height: 26px !important;">tsconfig.json中配置 | 可选：<img alt="" height="501" src="https://image.edbiji.com/doccon/20220526/20220526215407_465466_92693.png" style="box-sizing: border-box; outline: none; border: 0px; max-width: 100%; height: auto; overflow-wrap: break-word; cursor: zoom-in;" width="765" /></p> <div style="clear:both;margin-bottom:20px" title="双击代码块即可选中代码块，按下Ctrl+C复制代码"> <pre class="brush:js;toolbar:false; " title="js代码">//compilerOptions中配置
"types": [ "@dcloudio/types", "weixin-app", "miniprogram-api-typings", "mini-types", "node" //可选 ],
<pre style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 24px; padding: 8px; position: relative; overflow-x: auto; font-family: Consolas, Inconsolata, Courier, monospace; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);"><p style="box-sizing: border-box; outline: 0px; margin: 0px 0px 16px; padding: 0px; font-size: 18px; color: rgb(77, 77, 77); overflow: auto hidden; overflow-wrap: break-word; line-height: 26px !important;">重启编辑器</p> </li> <li style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; list-style: none; overflow-wrap: break-word; height: 22px;"> </li> </ol> </li> </ol> </li> <li style="box-sizing: border-box; outline: 0px; margin: 8px 0px 0px 40px; padding: 0px; list-style: decimal; overflow-wrap: break-word;">运行项目： 使用y<span style="box-sizing: border-box; outline: 0px; font-weight: 700; overflow-wrap: break-word;">arn run dev:mp-weixin运行</span>；微信开发者工具打开<span style="box-sizing: border-box; outline: 0px; font-weight: 700; overflow-wrap: break-word;">dist/mp-weixin</span>文件夹</li>
- 打开vite.config.ts文件，使用resolve选项配置：