uniapp+typeScript+vue3.0+vite

最近公司需要开发新版小程序，思考了一下，决定还是用最新的技术进行开发，同时也能锻炼到自己，废话不多说，开搞：

一.首先打开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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。