最近公司需要開發新版小程序，思考了一下，決定還是用最新的技術進行開發，同時也能鍛煉到自己，廢話不多說，開搞：

一.首先打開uniapp的官網：uni-app官網

//環境安裝 //全局安裝vue-cli npm install -g @vue/cli//創建uni-app //使用正式版（對應HBuilderX最新正式版） vue create -p dcloudio/uni-preset-vue my-project//使用alpha版（對應HBuilderX最新alpha版） vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project//使用Vue3/Vite版 //創建以 javascript 開發的工程（如命令行創建失敗，請直接訪問 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip 下載模板） npx degit dcloudio/uni-preset-vue#vite my-vue3-project//創建以 typescript 開發的工程（如命令行創建失敗，請直接訪問 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip下載模板） npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

在這里我選擇下載最后一個typescript工程，選擇直接訪問鏈接下載

二.將項目打開之后，使用命令行安裝依賴

npm -i或者yarn

三.配置微信小程序的appid

?1.在這里我碰到了json文件注釋報錯問題：Comments are not permitted in JSON

解決方法：

（1）.點擊右下角

?（2）.輸入JSON選擇第二個JSON with Comments即可

四.使用命令行運行項目

npm run dev:mp-weixin

運行成功之后，可以看到dist文件夾? 如圖：

?這個時候我們打開微信開發者工具，將dist/dev/mp-weixin文件夾導入進去，就可以運行了。

五.這時候發現main.ts里的import?App?from?"./App.vue";報錯

解決方法：?

打開env.d.ts文件添加以下代碼：

/// <reference types="vite/client" />declare module '*.vue' {import { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions }

?六.配置全局http請求

1.創建common文件夾，創建api.ts文件

?2.在main.ts文件中定義全局變量（注：這里與vue2.0不相同）

import http from './common/api' app.config.globalProperties.$http = http;

?3.在代碼中獲取全局變量

const { $http } = (getCurrentInstance() as any).proxy;

總結

以上是生活随笔為你收集整理的uniapp+typeScript+vue3.0+vite的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。