中高端网站建设网上培训
创建项目
使用Vue3/Vite版，创建以 typescript 开发的工程
下载仓库 · DCloud/uni-preset-vue - Gitee.com
node版本：v16.18.0
npm版本： v8.19.2
依赖下载
解压之后，在vscode打开
通过终端运行 npm 命令下载依赖：npm install
下载完成之后，会多出来一个node_modules文件夹
tsconfig.json文件
如遇到tsconfig.json有报错提示：
Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.Use 'verbatimModuleSyntax' instead.ts译文：警告消息与 TypeScript 编译器选项的弃用有关importsNotUsedAsValues，并建议改用该verbatimModuleSyntax选项。要在 TypeScript 5.5 之前使错误消息静音，您可以添加ignoreDeprecations": "5.0"到编译器选项；
//在tsconfig.json文件中"compilerOptions"配置项内添加"ignoreDeprecations": "5.0""compilerOptions": {"ignoreDeprecations": "5.0"},基本配置
打开
vite.config.ts配置一下alias
// vits.config.ts
import { defineConfig } from "vite"
import uni from "@dcloudio/vite-plugin-uni"
import { resolve } from "path"export default defineConfig({resolve: {alias: {"@": resolve(__dirname, "src"),},extensions: ['.mjs', '.js', '.jsx', '.json', '.vue'],},plugins: [uni()，],
})
alias配置中的path和__dirname会报红，在终端安装一下@types/node即可
npm i -D @types/node安装相关类型声明文件（看个人需要）
微信小程序 API 的 TypeScript 类型定义文件
GitHub - wechat-miniprogram/api-typings: Type definitions for APIs of Wechat Mini Program in TypeScript
npm i -D @types/wechat-miniprogramuni-helper相关类型文件
uni-app-types | Uni Helper (uni-helper.js.org)
npm i -D @uni-helper/uni-app-types //提供 uni-app 组件类型npm i -D @uni-helper/uni-cloud-types //提供 uni-cloud 组件类型npm i -D @uni-helper/uni-ui-types //提供 uni-ui 组件类型配置tsconfig.json
{"extends": "@vue/tsconfig/tsconfig.json","compilerOptions": {"ignoreDeprecations": "5.0","sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": [// "miniprogram-api-typings", // 原生微信小程序类型"@dcloudio/types", // uni-app API 类型"@uni-helper/uni-app-types", // uni-app 组件类型]},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
安装unplugin-auto-import自动导入插件
GitHub - unplugin/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup
npm i -D unplugin-auto-import在不使用自动导入的情况下，我们每使用到一个vue或者uniapp的方法的时候，就需要import一下。
// 不使用自动导入的用法
<script lang="ts" setup>
import { ref } form 'vue'
import { onLoad } from '@dcloudio/uni-app'const name = ref('')onLoad(() => {console.log(name.value)
})
</script>// 使用自动导入的用法
<script lang="ts" setup>
const name = ref('')onLoad(() => {console.log(name.value)
})
</script>
项目根目录创建 typings 目录，然后配置 vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
// 加上下面这一行
import AutoImport from 'unplugin-auto-import/vite'// https://vitejs.dev/config/
import { resolve } from "path"
// https://vitejs.dev/config/
export default defineConfig({base: "/couponPromotion",plugins: [uni(),// ---- 配置自动引入 ----AutoImport({include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/, // .vue/\.md$/, // .md],imports: ['vue', 'uni-app'],dts: 'typings/auto-imports.d.ts',})],
})
在 tsconfig.json 中添加如下配置
{"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue",// 加上下面两项"typings/**/*.ts","typings/**/*.d.ts"],
}
当我们运行项目后，在
typings目录中自动生成了一个auto-imports.d.ts文件
如果打开该文件之后发现里面的
createApp报红，在tsconfig.json文件compilerOptions选项中加入"skipLibCheck": true
"compilerOptions": {"skipLibCheck": true,},建议关闭项目，然后重新打开项目，不然 .vue文件中可能还是会标红
安装uview-plus
注意： 此安装方式必须要按照npm方式安装的配置中的说明配置了才可用，且项目名称不能有中文字符。
// 安装
npm install uview-plus
npm install dayjs
npm install clipboard
uview-plus依赖SCSS，所以必须要安装此插件，否则无法正常运行
// 安装sass
npm i sass -D// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D引入uview-plus主JS库
在项目
src目录中的main.js中，引入并使用uview-plus的JS库注意：这两行要放在
const app = createSSRApp(App)之后。
import { createSSRApp } from "vue";
import uviewPlus from 'uview-plus'import App from "./App.vue";
export function createApp() {const app = createSSRApp(App);app.use(uviewPlus);return {app,};
}
引入uview-plus的全局SCSS主题文件
在项目根目录的
uni.scss中引入此文件
/* uni.scss */
@import 'uview-plus/theme.scss';引入uview-plus基础样式
在
App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
// App.vue
<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";
</style>配置easycom组件模式
需要在项目
src目录的pages.json中进行温馨提示：
uni-app为了调试性能的原因，修改
easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。请确保您的
pages.json中只有一个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": [// ......]
}修改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-typesconst component: DefineComponent<{}, {}, any>export default component
}declare module "uview-plus";安装uni-ui组件库
uni-app官网 (dcloud.net.cn)
npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui配置自动导入组件
// pages.json
{"easycom": {//是否开启自动导入"autoscan": true,"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","^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // uni-ui 规则}},"pages": [],
}
安装类型声明文件
npm i -D @uni-helper/uni-ui-types配置类型声明文件
// tsconfig.json
{"compilerOptions": {"types": ["@dcloudio/types","@uni-helper/uni-app-types","@uni-helper/uni-ui-types" // uni-ui组件类型]}
}