vue2项目换成vue3（vue项目转换为uniapp）

科技前沿 • 2025-06-15 07:19 • 阅读 29

大家好，我是讯享网，很高兴认识大家。

搭建一个使用vue3+ts+vite+uniapp的微信小程序的步骤如下：

首先安装最新版的Node.js和npm。

讯享网
安装uni-app-cli脚手架工具，命令如下：

 npm install -g @<em>vue</em>/cli npm install -g @<em>vue</em>/cli-init npm install -g @dcloudio/<em>uni</em>-cli

讯享网

创建一个uni-app项目，命令如下：

讯享网 <em>vue</em> create -p dcloudio/<em>uni</em>-preset-<em>vue</em> my-project

 cd my-project npm install

安装并配置微信小程序开发者工具，下载地址：https://developers.weixin..com/miniprogram/dev/devtools/download.html
在微信小程序开发者工具中，选择导入uni-app项目，选择项目目录下的dist/dev/mp-weixin文件夹，导入后即可进行开发和调试。
如果需要使用vue3和typescript，在项目中安装相关依赖包，命令如下：

讯享网 npm install --save-dev <em>vue</em>@next @<em>vue</em>/compiler-sfc typescript <em>ts</em>-loader

在项目根目录下创建vue.config.js文件，配置如下：

 module.expor<em>ts</em> = { chainWebpack: config =&gt; { config.module .rule(&#39;<em>ts</em>&#39;) .use(&#39;<em>ts</em>-loader&#39;) .loader(&#39;<em>ts</em>-loader&#39;) .tap(options =&gt; { options.<em>app</em>end<em>Ts</em>SuffixTo = [/.<em>vue</em>$/] return options }) } }

在src目录下创建shims-vue.d.ts文件，内容如下：

讯享网 declare module &quot;*.<em>vue</em>&quot; { import { ComponentOptions } from &quot;<em>vue</em>&quot;; const component: ComponentOptions; export default component; }

现在你就可以使用vue3和typescript进行开发了。同时，如果需要使用vite进行开发，可以参考uni-app官方文档进行配置：https://uniapp.dcloud.io/collocation/vite

以上就是使用vue3+ts+vite+uniapp搭建微信小程序的步骤。

vue2项目换成vue3（vue项目转换为uniapp）

相关推荐