使用uniApp的cli模式安装，可以使用vscode开发。不用再单独去下载HBuilderX.
1.基础安装 vue3+ts+uniapp
方法一：
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
方法二：可以去uni-preset-vue的vite分支下选择vite-ts直接下载zip包，解压后粘贴到自己的项目中
2.安装依赖启动
pnpm install 或者 pnpm update
pnpm run dev:mp-weixin 或者 yarn run dev:mp-weixin
启动起来后打开微信小程序IDE，选择导入，然后选择dist目录下dev文件夹下的mp-weixin导入
3.安装pinia
备注：这里要指定版本，太高了编译会出错
pnpm add pinia@2.0.36
在src目录创建store文件夹，创建user.ts
import {
defineStore } from 'pinia'
export const useStore = defineStore('main', {
state() {
return {
userInfo: {
username:"username",
phone:"phone"
},
}
},
actions: {
setUserInfo(data) {
this.userInfo = data
}
}
})
修改main.ts,全局引入pinia
import {
createSSRApp } from "vue";
import * as Pinia from 'pinia';
import App from "./App.vue";
export function createApp() {
const app = createSSRApp(App);
const store = Pinia.createPinia();
app.use(store);
return {
app,
Pinia
};
}
在页面使用pinia
<template>
<view class="content">
<image class="logo" src="/static/logo.png" />
<view class="text-area">
<text class="title">{
{
title }}-{
{
userInfo.userInfo.username }}</text>
</view>
</view>
</template>
<script setup lang="ts">
import {
ref } from "vue"
import {
useStore } from "@/store/user"
const userInfo = useStore()
const title = ref("Hello")
</script>
4.安装sass
pnpm i sass -D
pnpm i sass-loader@10.1.1 -D
页面添加sass标识
<style lang="scss" scoped>
</style>
5.配置vue自动导入
安装unplugin-auto-import插件
pnpm add unplugin-auto-import -D
修改vite.config.ts
import {
defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [uni(),
AutoImport({
imports: ["vue"],
dts: true
})],
});
修改tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
"types": ["@dcloudio/types"]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"./auto-imports.d.ts" //加入这行代码
]
}
6.引入uview plus
pnpm install uview-plus
2.修改main.ts
import {
createSSRApp } from "vue";
import * as Pinia from "pinia";
import uviewPlus from 'uview-plus'
import App from "./App.vue";
export function createApp() {
const app = createSSRApp(App);
const store = Pinia.createPinia();
app.use(store);
app.use(uviewPlus);
return {
app,
Pinia,
};
}
3.引入uview-plus的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件
/* uni.scss */
@import 'uview-plus/theme.scss';
4.App.vue引入uview-plus基础样式
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-plus/index.scss";
</style>
5.配置easycom组件模式
pages.json
{
"easycom": {
// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
"custom": {
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
}
},
// 此为本身已有的内容
"pages": [
// ......
]
}
6.修改env.d.ts文件
注意：
配置完后，可以发现在mian.ts中引入uview-plus时会提示ts报错：无法找到模块“uview-plus”的声明文件
/// <reference types="vite/client" />
declare module '*.vue' {
import {
DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{
}, {
}, any>
export default component
}
declare module "uview-plus";
