├── .eslintignore ├── .env ├── .env.development ├── src ├── api │ ├── index.ts │ ├── modules │ │ └── user.ts │ └── http.ts ├── styles │ └── vars │ │ ├── _base.less │ │ └── _base.scss ├── store │ ├── index.ts │ └── modules │ │ └── countStore.ts ├── static │ └── logo.png ├── env.d.ts ├── App.vue ├── pages │ ├── uview │ │ └── index.vue │ ├── axios │ │ └── index.vue │ ├── index │ │ └── index.vue │ ├── pinia │ │ └── index.vue │ └── unocss │ │ └── index.vue ├── components │ ├── unocss │ │ └── index.vue │ └── hello │ │ └── index.vue ├── main.ts ├── utils │ └── http.ts ├── pages.json ├── uni.scss └── manifest.json ├── .env.production ├── __tests__ ├── b.test.js ├── a.test.ts └── http.test.ts ├── vitest.config.ts ├── .gitignore ├── arm-esbuild-version.js ├── .prettierrc.js ├── tsconfig.json ├── index.html ├── unocss.config.ts ├── LICENSE ├── vite.config.ts ├── .eslintrc.json ├── .commitlintrc.js ├── package.json └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | *.nvue -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | VITE_APP_AXIOS_BASE_URL=/api -------------------------------------------------------------------------------- /.env.development: -------------------------------------------------------------------------------- 1 | VITE_APP_AXIOS_BASE_URL=/api -------------------------------------------------------------------------------- /src/api/index.ts: -------------------------------------------------------------------------------- 1 | export { default as userApi } from './modules/user' 2 | -------------------------------------------------------------------------------- /src/styles/vars/_base.less: -------------------------------------------------------------------------------- 1 | @title-size: 40rpx; 2 | @title-color: #47caff; 3 | -------------------------------------------------------------------------------- /src/styles/vars/_base.scss: -------------------------------------------------------------------------------- 1 | $title-size: 40rpx; 2 | $title-color: #bd34fe; 3 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | export { default as useCountStore } from './modules/countStore' 2 | -------------------------------------------------------------------------------- /src/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ATQQ/uni-vue3-ts-template/HEAD/src/static/logo.png -------------------------------------------------------------------------------- /.env.production: -------------------------------------------------------------------------------- 1 | VITE_APP_AXIOS_BASE_URL=https://service-rbji0bev-1256505457.cd.apigw.tencentcs.com/release -------------------------------------------------------------------------------- /__tests__/b.test.js: -------------------------------------------------------------------------------- 1 | const sum1 = (a, b) => a + b 2 | test('sum1(1,2)===3', () => { 3 | expect(sum1(1, 2)).toBe(3) 4 | }) 5 | -------------------------------------------------------------------------------- /__tests__/a.test.ts: -------------------------------------------------------------------------------- 1 | const sum2 = (a: number, b: number) => a + b 2 | test('sum2(1,2)===3', () => { 3 | expect(sum2(1, 2)).toBe(3) 4 | }) 5 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | 3 | export default defineConfig({ 4 | test: { 5 | globals: true 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | 10 | interface ImportMetaEnv { 11 | VITE_APP_TITLE: string 12 | VITE_APP_AXIOS_BASE_URL: string 13 | } 14 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 14 | 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | unpackage/ 4 | dist/ 5 | wxcomponents 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Editor directories and files 17 | .project 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw* 25 | .hbuilderx -------------------------------------------------------------------------------- /arm-esbuild-version.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const vitePath = require.resolve('vite/package.json') 3 | const esbuildPath = path.dirname(vitePath) + '/../esbuild/package.json' 4 | const esbuildVersion = require(esbuildPath).version 5 | console.log('vite dep esbuild version', esbuildVersion); 6 | console.log(); 7 | console.log(`pnpm add @esbuild/darwin-x64@${esbuildVersion} -D`); -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, // 一行的字符数，如果超过会进行换行，默认为80 3 | tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个 4 | useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减 5 | singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号 6 | semi: false, // 行尾是否使用分号，默认为true 7 | trailingComma: 'none', // 是否使用尾逗号 8 | bracketSpacing: true // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 } 9 | } 10 | -------------------------------------------------------------------------------- /src/api/modules/user.ts: -------------------------------------------------------------------------------- 1 | import http from '../http' 2 | 3 | function login(account: string, pwd: string) { 4 | return http.post('user/login', { 5 | account, 6 | pwd 7 | }) 8 | } 9 | 10 | /** 11 | * 获取验证码 12 | * @param phone 手机号 13 | */ 14 | function getCode(phone: string): Promise<{ num: number }> { 15 | return http.get('random/code', { 16 | params: { 17 | phone 18 | } 19 | }) 20 | } 21 | export default { 22 | login, 23 | getCode 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/uview/index.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/components/unocss/index.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createSSRApp } from 'vue' 2 | import * as Pinia from 'pinia' 3 | // @ts-ignore 4 | import uView from 'vk-uview-ui' 5 | import App from './App.vue' 6 | 7 | // unocss 8 | import 'uno.css' 9 | 10 | export function createApp() { 11 | const app = createSSRApp(App) 12 | app.use(Pinia.createPinia()) 13 | app.use(uView) 14 | return { 15 | app, 16 | // uni-app 官方文档示例 https://zh.uniapp.dcloud.io/tutorial/vue3-pinia.html#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86-pinia 17 | Pinia // 此处必须将 Pinia 返回 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/store/modules/countStore.ts: -------------------------------------------------------------------------------- 1 | import { defineStore } from 'pinia' 2 | 3 | const useStore = defineStore('storeId', { 4 | // arrow function recommended for full type inference 5 | state: () => ({ 6 | // all these properties will have their type inferred automatically 7 | count: 0 8 | }), 9 | getters: { 10 | isEven: (state) => state.count % 2 === 0 11 | }, 12 | actions: { 13 | synIncrease() { 14 | this.count += 1 15 | }, 16 | async asyncIncrease() { 17 | await new Promise((resolve) => setTimeout(resolve, 1000)) 18 | this.count += 1 19 | } 20 | } 21 | }) 22 | 23 | export default useStore 24 | -------------------------------------------------------------------------------- /src/utils/http.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import buildURL from 'axios/lib/helpers/buildURL' 3 | import type { AxiosRequestConfig } from 'axios' 4 | 5 | type ParamsSerializer = AxiosRequestConfig['paramsSerializer'] 6 | 7 | export function getFullURL( 8 | baseURL: string, 9 | url: string, 10 | params: Record, 11 | paramsSerializer?: ParamsSerializer 12 | ) { 13 | if (url.startsWith('http')) { 14 | return buildURL(url, params, paramsSerializer) 15 | } 16 | baseURL = baseURL.endsWith('/') ? baseURL : `${baseURL}/` 17 | url = url.startsWith('/') ? url.slice(1) : url 18 | return buildURL(`${baseURL}${url}`, params, paramsSerializer) 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"], 13 | "types": [ 14 | "@dcloudio/types", 15 | "vite/client", 16 | "@types/node", 17 | "vitest/globals" 18 | ], 19 | "baseUrl": "./", 20 | "paths": { 21 | "@/*": ["src/*"], 22 | "@components/*": ["src/components/*"] 23 | } 24 | }, 25 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 26 | } 27 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/pages/axios/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 32 | 33 | 41 | -------------------------------------------------------------------------------- /unocss.config.ts: -------------------------------------------------------------------------------- 1 | import presetWeapp from 'unocss-preset-weapp' 2 | import { defineConfig } from 'unocss' 3 | import { 4 | extractorAttributify, 5 | transformerClass 6 | } from 'unocss-preset-weapp/transformer' 7 | import { presetIcons } from 'unocss' 8 | 9 | const { presetWeappAttributify, transformerAttributify } = 10 | extractorAttributify() 11 | 12 | export default defineConfig({ 13 | presets: [ 14 | // https://github.com/MellowCo/unocss-preset-weapp 15 | presetWeapp(), 16 | // attributify autocomplete 17 | presetWeappAttributify(), 18 | presetIcons() 19 | ], 20 | shortcuts: [ 21 | { 22 | 'border-base': 'border border-gray-500_10', 23 | center: 'flex justify-center items-center' 24 | } 25 | ], 26 | transformers: [ 27 | // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify 28 | transformerAttributify(), 29 | 30 | // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass 31 | transformerClass() 32 | ] 33 | }) 34 | -------------------------------------------------------------------------------- /src/pages/index/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 38 | 39 | 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 sugar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/pages.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages 4 | { 5 | "path": "pages/index/index", 6 | "style": { 7 | "navigationBarTitleText": "uni-app-home" 8 | } 9 | }, 10 | { 11 | "path": "pages/pinia/index", 12 | "style": { 13 | "navigationBarTitleText": "状态管理工具（pinia）" 14 | } 15 | }, 16 | { 17 | "path": "pages/axios/index", 18 | "style": { 19 | "navigationBarTitleText": "Axios（网络请求示例）" 20 | } 21 | }, 22 | { 23 | "path": "pages/uview/index", 24 | "style": { 25 | "navigationBarTitleText": "uView 示例组件" 26 | } 27 | }, 28 | { 29 | "path": "pages/unocss/index", 30 | "style": { 31 | "navigationBarTitleText": "UnoCSS 示例" 32 | } 33 | } 34 | ], 35 | "globalStyle": { 36 | "navigationBarTextStyle": "black", 37 | "navigationBarTitleText": "uni-app", 38 | "navigationBarBackgroundColor": "#F8F8F8", 39 | "backgroundColor": "#F8F8F8" 40 | }, 41 | "easycom": { 42 | "custom": { 43 | "^u-(.*)": "vk-uview-ui/components/u-$1/u-$1.vue" 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/hello/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 45 | 46 | 52 | 53 | 59 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import uni from '@dcloudio/vite-plugin-uni' 3 | import path from 'path' 4 | import Unocss from 'unocss/vite' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | uni(), 10 | // https://github.com/antfu/unocss 11 | Unocss() 12 | ], 13 | server: { 14 | // port: 8080, 15 | host: '0.0.0.0', 16 | proxy: { 17 | '/api/': { 18 | target: 19 | 'https://service-rbji0bev-1256505457.cd.apigw.tencentcs.com/release', 20 | changeOrigin: true, 21 | rewrite: (p) => p.replace(/^\/api/, '') 22 | }, 23 | '/api-prod/': { 24 | target: 'http://localhost:3001', 25 | changeOrigin: true, 26 | rewrite: (p) => p.replace(/^\/api-prod/, '') 27 | } 28 | } 29 | }, 30 | resolve: { 31 | alias: { 32 | '@': path.resolve(__dirname, './src'), 33 | '@components': path.resolve(__dirname, './src/components') 34 | } 35 | }, 36 | css: { 37 | // 配置`scss`和`less`全局变量 38 | preprocessorOptions: { 39 | scss: { 40 | additionalData: '@import "@/styles/vars/_base.scss";' 41 | }, 42 | less: { 43 | additionalData: '@import "@/styles/vars/_base.less";' 44 | } 45 | } 46 | } 47 | }) 48 | -------------------------------------------------------------------------------- /src/pages/pinia/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 47 | 61 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "vue-eslint-parser", 3 | "env": { 4 | "browser": true, 5 | "commonjs": true, 6 | "es2021": true 7 | }, 8 | "parserOptions": { 9 | "ecmaVersion": 2021, 10 | "parser": "@typescript-eslint/parser", 11 | "sourceType": "module", 12 | "ecmaFeatures": { 13 | "jsx": true 14 | } 15 | }, 16 | "extends": [ 17 | "airbnb-base", 18 | "eslint:recommended", 19 | "plugin:prettier/recommended", 20 | "plugin:vue/vue3-essential", 21 | "plugin:@typescript-eslint/recommended" 22 | ], 23 | "plugins": ["vue", "@typescript-eslint", "todo-ddl"], 24 | "rules": { 25 | "@typescript-eslint/ban-types": "off", 26 | "@typescript-eslint/no-explicit-any": "off", 27 | "@typescript-eslint/explicit-module-boundary-types": "off", 28 | "import/extensions": "off", 29 | "quotes": ["warn", "single"], 30 | "semi": ["warn", "never"], 31 | "import/no-unresolved": "off", 32 | "todo-ddl/diy": "warn", 33 | "import/prefer-default-export": "off", 34 | "no-param-reassign": "warn", 35 | "import/no-extraneous-dependencies": "off", 36 | "max-len": "warn", 37 | "no-restricted-syntax": "off", 38 | "no-bitwise": "off", 39 | "camelcase": "off", 40 | "no-case-declarations": "off", 41 | "@typescript-eslint/no-namespace": "off", 42 | "no-undef": "off", 43 | "no-promise-executor-return": "off", 44 | "vue/multi-word-component-names": "off", 45 | "@typescript-eslint/no-non-null-assertion": "off", 46 | "@typescript-eslint/ban-ts-comment": "off", 47 | "linebreak-style": "off" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/uni.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 这里是uni-app内置的常用样式变量 3 | * 4 | * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 5 | * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App 6 | * 7 | */ 8 | 9 | /** 10 | * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 11 | * 12 | * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 13 | */ 14 | 15 | @import 'vk-uview-ui/theme.scss'; 16 | /* 颜色变量 */ 17 | 18 | /* 行为相关颜色 */ 19 | $uni-color-primary: #007aff; 20 | $uni-color-success: #4cd964; 21 | $uni-color-warning: #f0ad4e; 22 | $uni-color-error: #dd524d; 23 | 24 | /* 文字基本颜色 */ 25 | $uni-text-color: #333; //基本色 26 | $uni-text-color-inverse: #fff; //反色 27 | $uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息 28 | $uni-text-color-placeholder: #808080; 29 | $uni-text-color-disable: #c0c0c0; 30 | 31 | /* 背景颜色 */ 32 | $uni-bg-color: #ffffff; 33 | $uni-bg-color-grey: #f8f8f8; 34 | $uni-bg-color-hover: #f1f1f1; //点击状态颜色 35 | $uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色 36 | 37 | /* 边框颜色 */ 38 | $uni-border-color: #c8c7cc; 39 | 40 | /* 尺寸变量 */ 41 | 42 | /* 文字尺寸 */ 43 | $uni-font-size-sm: 24rpx; 44 | $uni-font-size-base: 28rpx; 45 | $uni-font-size-lg: 32rpx; 46 | 47 | /* 图片尺寸 */ 48 | $uni-img-size-sm: 40rpx; 49 | $uni-img-size-base: 52rpx; 50 | $uni-img-size-lg: 80rpx; 51 | 52 | /* Border Radius */ 53 | $uni-border-radius-sm: 4rpx; 54 | $uni-border-radius-base: 6rpx; 55 | $uni-border-radius-lg: 12rpx; 56 | $uni-border-radius-circle: 50%; 57 | 58 | /* 水平间距 */ 59 | $uni-spacing-row-sm: 10px; 60 | $uni-spacing-row-base: 20rpx; 61 | $uni-spacing-row-lg: 30rpx; 62 | 63 | /* 垂直间距 */ 64 | $uni-spacing-col-sm: 8rpx; 65 | $uni-spacing-col-base: 16rpx; 66 | $uni-spacing-col-lg: 24rpx; 67 | 68 | /* 透明度 */ 69 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度 70 | 71 | /* 文章场景相关 */ 72 | $uni-color-title: #2c405a; // 文章标题颜色 73 | $uni-font-size-title: 40rpx; 74 | $uni-color-subtitle: #555555; // 二级标题颜色 75 | $uni-font-size-subtitle: 36rpx; 76 | $uni-color-paragraph: #3f536e; // 文章段落颜色 77 | $uni-font-size-paragraph: 30rpx; 78 | -------------------------------------------------------------------------------- /.commitlintrc.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | /** @type {import('cz-git').UserConfig} */ 3 | module.exports = { 4 | extends: ['@commitlint/config-conventional'], 5 | rules: { 6 | 'body-leading-blank': [2, 'always'], 7 | 'footer-leading-blank': [1, 'always'], 8 | 'header-max-length': [2, 'always', 108], 9 | 'subject-empty': [2, 'never'], 10 | 'type-empty': [2, 'never'], 11 | 'subject-case': [0], 12 | 'type-enum': [ 13 | 2, 14 | 'always', 15 | [ 16 | 'feat', 17 | 'fix', 18 | 'perf', 19 | 'style', 20 | 'docs', 21 | 'test', 22 | 'refactor', 23 | 'build', 24 | 'ci', 25 | 'chore', 26 | 'revert', 27 | 'wip', 28 | 'workflow', 29 | 'types', 30 | 'release' 31 | ] 32 | ] 33 | }, 34 | prompt: { 35 | // 中英文对照版 36 | // messages: { 37 | // type: '选择你要提交的类型 :', 38 | // scope: '选择一个提交范围 (可选):', 39 | // customScope: '请输入自定义的提交范围 :', 40 | // subject: '填写简短精炼的变更描述 :\n', 41 | // body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n', 42 | // breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n', 43 | // footerPrefixsSelect: '选择关联issue前缀 (可选):', 44 | // customFooterPrefixs: '输入自定义issue前缀 :', 45 | // footer: '列举关联issue (可选) 例如: #31, #I3244 :\n', 46 | // confirmCommit: '是否提交或修改commit ?' 47 | // }, 48 | // types: [ 49 | // { value: 'feat', name: 'feat: 新增功能' }, 50 | // { value: 'fix', name: 'fix: 修复缺陷' }, 51 | // { value: 'docs', name: 'docs: 文档变更' }, 52 | // { value: 'style', name: 'style: 代码格式' }, 53 | // { value: 'refactor', name: 'refactor: 代码重构' }, 54 | // { value: 'perf', name: 'perf: 性能优化' }, 55 | // { value: 'test', name: 'test: 添加疏漏测试或已有测试改动' }, 56 | // { 57 | // value: 'build', 58 | // name: 'build: 构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)' 59 | // }, 60 | // { value: 'ci', name: 'ci: 修改 CI 配置、脚本' }, 61 | // { value: 'revert', name: 'revert: 回滚 commit' }, 62 | // { 63 | // value: 'chore', 64 | // name: 'chore: 对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' 65 | // }, 66 | // { value: 'wip', name: 'wip: 正在开发中' }, 67 | // { value: 'workflow', name: 'workflow: 工作流程改进' }, 68 | // { value: 'types', name: 'types: 类型定义文件修改' } 69 | // ] 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/api/http.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | import { getFullURL } from '@/utils/http' 4 | 5 | const instance = axios.create({ 6 | // Web 侧可以通过 vite.config.js 中的 proxy 配置，指定代理 7 | // 小程序APP里需写完整路径，如 https://service-rbji0bev-1256505457.cd.apigw.tencentcs.com/release 8 | // 可使用条件编译,详见 https://uniapp.dcloud.io/tutorial/platform.html#preprocessor 9 | // #ifdef H5 10 | baseURL: import.meta.env.VITE_APP_AXIOS_BASE_URL, 11 | // #endif 12 | // #ifndef H5 13 | // @ts-ignore 14 | baseURL: 'https://service-rbji0bev-1256505457.cd.apigw.tencentcs.com/release', 15 | // #endif 16 | adapter(config) { 17 | console.log('request adapter ↓↓') 18 | console.log(config) 19 | const { url, method, data, params, headers, baseURL, paramsSerializer } = 20 | config 21 | return new Promise((resolve, reject) => { 22 | uni.request({ 23 | method: method!.toUpperCase() as any, 24 | url: getFullURL(baseURL || '', url!, params, paramsSerializer), 25 | header: headers, 26 | data, 27 | dataType: 'json', 28 | responseType: config.responseType, 29 | success: (res: any) => { 30 | console.log('request success ↓↓') 31 | console.log(res) 32 | resolve(res) 33 | }, 34 | fail: (err: any) => { 35 | reject(err) 36 | } 37 | }) 38 | }) 39 | } 40 | }) 41 | 42 | /** 43 | * 请求拦截 44 | */ 45 | instance.interceptors.request.use((config) => { 46 | const { method, params } = config 47 | // 附带鉴权的token 48 | const headers: any = { 49 | token: uni.getStorageSync('token') 50 | } 51 | // 不缓存get请求 52 | if (method === 'get') { 53 | headers['Cache-Control'] = 'no-cache' 54 | } 55 | // delete请求参数放入body中 56 | if (method === 'delete') { 57 | headers['Content-type'] = 'application/json;' 58 | Object.assign(config, { 59 | data: params, 60 | params: {} 61 | }) 62 | } 63 | 64 | return { 65 | ...config, 66 | headers 67 | } 68 | }) 69 | 70 | /** 71 | * 响应拦截 72 | */ 73 | instance.interceptors.response.use((v) => { 74 | if (v.data?.code === 401) { 75 | uni.removeStorageSync('token') 76 | // alert('即将跳转登录页。。。', '登录过期') 77 | // setTimeout(redirectHome, 1500) 78 | return v.data 79 | } 80 | 81 | // @ts-ignore 82 | if ((v.status || v.statusCode) === 200) { 83 | return v.data 84 | } 85 | // alert(v.statusText, '网络错误') 86 | return Promise.reject(v) 87 | }) 88 | 89 | export default instance 90 | -------------------------------------------------------------------------------- /__tests__/http.test.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from 'vitest' 2 | import { getFullURL } from '../src/utils/http' 3 | 4 | test('getFullURL1', () => { 5 | expect(getFullURL('', '/api', {})).toBe('/api') 6 | expect(getFullURL('/', '/api/user', {})).toBe('/api/user') 7 | 8 | expect(getFullURL('/api', 'user', {})).toBe('/api/user') 9 | expect(getFullURL('/api', '/user', {})).toBe('/api/user') 10 | expect(getFullURL('/api', '/user/login', {})).toBe('/api/user/login') 11 | expect(getFullURL('/api', 'user/login', {})).toBe('/api/user/login') 12 | 13 | expect(getFullURL('/api/', 'user', {})).toBe('/api/user') 14 | expect(getFullURL('/api/', '/user', {})).toBe('/api/user') 15 | expect(getFullURL('/api/', '/user/login', {})).toBe('/api/user/login') 16 | expect(getFullURL('/api/', 'user/login', {})).toBe('/api/user/login') 17 | 18 | expect(getFullURL('api/', 'user', {})).toBe('api/user') 19 | expect(getFullURL('api/', '/user', {})).toBe('api/user') 20 | expect(getFullURL('api/', '/user/login', {})).toBe('api/user/login') 21 | expect(getFullURL('api/', 'user/login', {})).toBe('api/user/login') 22 | 23 | expect(getFullURL('http://www.xxx.com', 'user', {})).toBe( 24 | 'http://www.xxx.com/user' 25 | ) 26 | expect(getFullURL('http://www.xxx.com', '/user', {})).toBe( 27 | 'http://www.xxx.com/user' 28 | ) 29 | expect(getFullURL('http://www.xxx.com/', 'user', {})).toBe( 30 | 'http://www.xxx.com/user' 31 | ) 32 | expect(getFullURL('http://www.xxx.com/', '/user', {})).toBe( 33 | 'http://www.xxx.com/user' 34 | ) 35 | expect(getFullURL('http://www.xxx.com/', '/user/login', {})).toBe( 36 | 'http://www.xxx.com/user/login' 37 | ) 38 | expect( 39 | getFullURL('http://www.xxx.com/', 'http://www.xxx.com/user2/login', {}) 40 | ).toBe('http://www.xxx.com/user2/login') 41 | 42 | expect(getFullURL('api/', 'user/getList', { id: 1 })).toBe( 43 | 'api/user/getList?id=1' 44 | ) 45 | expect(getFullURL('api/', 'user/getList?id=2', { age: 18 })).toBe( 46 | 'api/user/getList?id=2&age=18' 47 | ) 48 | expect(getFullURL('api/', 'user/getList?id=2', { id: 2 })).toBe( 49 | 'api/user/getList?id=2&id=2' 50 | ) 51 | expect(getFullURL('api/', 'user/getList?id=2&age=3', { sex: 1 })).toBe( 52 | 'api/user/getList?id=2&age=3&sex=1' 53 | ) 54 | expect(getFullURL('api/', 'user/getList?id=2&age=3', { sex: 1 })).toBe( 55 | 'api/user/getList?id=2&age=3&sex=1' 56 | ) 57 | 58 | expect(getFullURL('api/', 'user/getList?id=2&age=3#123', {})).toBe( 59 | 'api/user/getList?id=2&age=3#123' 60 | ) 61 | }) 62 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uni-vue3-vite-ts-template", 3 | "appid": "__UNI__DA16D5F", 4 | "description": "", 5 | "versionName": "1.0.0", 6 | "versionCode": "100", 7 | "transformPx": false, 8 | /* 5+App特有相关 */ 9 | "app-plus": { 10 | "usingComponents": true, 11 | "nvueStyleCompiler": "uni-app", 12 | "compilerVersion": 3, 13 | "splashscreen": { 14 | "alwaysShowBeforeRender": true, 15 | "waiting": true, 16 | "autoclose": true, 17 | "delay": 0 18 | }, 19 | /* 模块配置 */ 20 | "modules": {}, 21 | /* 应用发布信息 */ 22 | "distribute": { 23 | /* android打包配置 */ 24 | "android": { 25 | "permissions": [ 26 | "", 27 | "", 28 | "", 29 | "", 30 | "", 31 | "", 32 | "", 33 | "", 34 | "", 35 | "", 36 | "", 37 | "", 38 | "", 39 | "", 40 | "" 41 | ] 42 | }, 43 | /* ios打包配置 */ 44 | "ios": { 45 | "dSYMs": false 46 | }, 47 | /* SDK配置 */ 48 | "sdkConfigs": { 49 | "ad": {} 50 | } 51 | } 52 | }, 53 | /* 快应用特有相关 */ 54 | "quickapp": {}, 55 | /* 小程序特有相关 */ 56 | "mp-weixin": { 57 | "appid": "wxf326f1995627c671", 58 | "setting": { 59 | "urlCheck": false 60 | }, 61 | "usingComponents": true 62 | }, 63 | "mp-alipay": { 64 | "usingComponents": true 65 | }, 66 | "mp-baidu": { 67 | "usingComponents": true 68 | }, 69 | "mp-toutiao": { 70 | "usingComponents": true 71 | }, 72 | "uniStatistics": { 73 | "enable": false 74 | }, 75 | "vueVersion": "3" 76 | } 77 | -------------------------------------------------------------------------------- /src/pages/unocss/index.vue: -------------------------------------------------------------------------------- 1 | 87 | 88 | 97 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uni-vue3-ts-template", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev:app": "uni -p app", 7 | "dev:custom": "uni -p", 8 | "dev:h5": "uni", 9 | "dev:h5:ssr": "uni --ssr", 10 | "dev:mp-alipay": "uni -p mp-alipay", 11 | "dev:mp-baidu": "uni -p mp-baidu", 12 | "dev:mp-kuaishou": "uni -p mp-kuaishou", 13 | "dev:mp-lark": "uni -p mp-lark", 14 | "dev:mp-qq": "uni -p mp-qq", 15 | "dev:mp-toutiao": "uni -p mp-toutiao", 16 | "dev:mp-weixin": "uni -p mp-weixin", 17 | "dev:quickapp-webview": "uni -p quickapp-webview", 18 | "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei", 19 | "dev:quickapp-webview-union": "uni -p quickapp-webview-union", 20 | "build:app": "uni build -p app", 21 | "build:custom": "uni build -p", 22 | "build:h5": "uni build", 23 | "build:h5:ssr": "uni build --ssr", 24 | "build:mp-alipay": "uni build -p mp-alipay", 25 | "build:mp-baidu": "uni build -p mp-baidu", 26 | "build:mp-kuaishou": "uni build -p mp-kuaishou", 27 | "build:mp-lark": "uni build -p mp-lark", 28 | "build:mp-qq": "uni build -p mp-qq", 29 | "build:mp-toutiao": "uni build -p mp-toutiao", 30 | "build:mp-weixin": "uni build -p mp-weixin", 31 | "build:quickapp-webview": "uni build -p quickapp-webview", 32 | "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei", 33 | "build:quickapp-webview-union": "uni build -p quickapp-webview-union", 34 | "lint": "eslint --ext .ts,.js,.vue --fix ./", 35 | "test": "vitest", 36 | "test:ui": "vitest --ui", 37 | "test:coverage": "vitest run --coverage", 38 | "cz": "git add . && czg", 39 | "postinstall": "simple-git-hooks", 40 | "updatehooks": "git config core.hooksPath .git/hooks/ && rm -rf .git/hooks && npx simple-git-hooks", 41 | "mac:m1:esbuild": "node arm-esbuild-version.js" 42 | }, 43 | "dependencies": { 44 | "@dcloudio/uni-app": "3.0.0-alpha-3081220230802001", 45 | "@dcloudio/uni-app-plus": "3.0.0-alpha-3081220230802001", 46 | "@dcloudio/uni-components": "3.0.0-alpha-3081220230802001", 47 | "@dcloudio/uni-h5": "3.0.0-alpha-3081220230802001", 48 | "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3081220230802001", 49 | "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3081220230802001", 50 | "@dcloudio/uni-mp-jd": "3.0.0-alpha-3081220230802001", 51 | "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3081220230802001", 52 | "@dcloudio/uni-mp-lark": "3.0.0-alpha-3081220230802001", 53 | "@dcloudio/uni-mp-qq": "3.0.0-alpha-3081220230802001", 54 | "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3081220230802001", 55 | "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3081220230802001", 56 | "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3081220230802001", 57 | "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3081220230802001", 58 | "axios": "^0.27.2", 59 | "cz-git": "^1.4.1", 60 | "pinia": "^2.0.14", 61 | "vk-uview-ui": "^1.3.7", 62 | "vue": "^3.2.45", 63 | "vue-i18n": "^9.1.10" 64 | }, 65 | "devDependencies": { 66 | "@commitlint/cli": "^17.4.2", 67 | "@commitlint/config-conventional": "^17.4.2", 68 | "@dcloudio/types": "^3.3.3", 69 | "@dcloudio/uni-automator": "3.0.0-alpha-3081220230802001", 70 | "@dcloudio/uni-cli-shared": "3.0.0-alpha-3081220230802001", 71 | "@dcloudio/uni-stacktracey": "3.0.0-alpha-3081220230802001", 72 | "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3081220230802001", 73 | "@types/node": "^18.15.3", 74 | "@typescript-eslint/eslint-plugin": "^6.7.0", 75 | "@typescript-eslint/parser": "^6.7.0", 76 | "@vitejs/plugin-vue": "^2.3.3", 77 | "@vitest/ui": "^0.34.4", 78 | "c8": "^7.11.3", 79 | "czg": "^1.4.1", 80 | "eslint": "^8.19.0", 81 | "eslint-config-airbnb-base": "^15.0.0", 82 | "eslint-config-prettier": "^8.5.0", 83 | "eslint-plugin-import": "^2.26.0", 84 | "eslint-plugin-prettier": "^4.2.1", 85 | "eslint-plugin-todo-ddl": "^1.1.1", 86 | "eslint-plugin-vue": "^9.1.1", 87 | "less": "^4.1.3", 88 | "prettier": "^2.7.1", 89 | "sass": "^1.53.0", 90 | "simple-git-hooks": "^2.8.1", 91 | "typescript": "^5.2.2", 92 | "unocss": "^0.55.7", 93 | "unocss-preset-weapp": "^0.55.2", 94 | "vite": "^4.4.9", 95 | "vitest": "^0.34.4" 96 | }, 97 | "simple-git-hooks": { 98 | "commit-msg": "npx --no-install commitlint --edit \"$1\"" 99 | } 100 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # uni-vue3-ts-template 2 | uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目 3 | 4 | 支持小程序，H5，App 5 | 6 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxODc4OTk1OQ==653218789959) 7 | 8 | ![Unocss](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202211121156442.png) 9 | 10 | | H5 | 微信小程序 | App(iOS) | App(Android) | 11 | | :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | 12 | | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzE5Mzc4MzUyMQ==653193783521) | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzE5Mzc1Mzk1MQ==653193753951) | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxMDc2NTcwNg==653210765706) | | 13 | 14 | 其它模板 15 | * Vue3的uni-app 纯js模板：[uni-app-template](https://github.com/ATQQ/uni-app-template) 16 | * Vue3的Web应用模板：[vite-vue3-template](https://github.com/ATQQ/vite-vue3-template) 17 | 18 | ## Env Suggest 19 | **Node >= 18** 20 | 21 | **pnpm 8** 22 | 23 | **Registry taobao - https://registry.npmmirror.com/** 24 | 25 | ## Use This Template 26 | ```sh 27 | npx degit atqq/uni-vue3-ts-template#main my-uni-vue3-ts-vite-project 28 | ``` 29 | ## Feature 30 | ### Prod 31 | * [x] [Vue3](https://vuejs.org/) 32 | * [x] [Pinia](https://pinia.vuejs.org/) - replace vuex 33 | * [x] [Axios](https://github.com/axios/axios) 34 | * UI/组件库 35 | * [x] [uView](https://vkuviewdoc.fsq.pub/) - vk-uview-ui 36 | * [ ] [uni-ui](https://github.com/dcloudio/uni-ui) - 待接入 37 | ### Dev 38 | * [x] [Vite](https://github.com/vitejs/vite) 39 | * [x] [TypeScript](https://github.com/microsoft/TypeScript/#readme) 40 | * [x] [Sass](https://github.com/sass/sass) 41 | * [x] [Less](https://github.com/less/less.js) 42 | * [x] [Eslint](https://eslint.org/) 43 | * [x] [Prettier](https://prettier.io/) 44 | * [x] [Vitest](https://vitest.dev/) - replace jest 45 | * [x] [unocss](https://github.com/unocss/unocss) - 即时按需原子 css 引擎 46 | * [x] GitHooks [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks#readme) 47 | * ~~LintStaged~~ 48 | * ~~StyleLint~~ 49 | 50 | ## 使用 51 | ### 安装依赖 52 | **建议使用pnpm，依赖安装速度更快** 53 | ```sh 54 | npm i -g pnpm 55 | ``` 56 | 57 | ```sh 58 | pnpm install 59 | ``` 60 | 61 | **MAC M1(ARM芯片)，其它操作系统无需关注**，正常运行需要手动安装 `esbuild-darwin-64`即可 62 | ```sh 63 | pnpm add @esbuild/darwin-x64@0.18.20 -D 64 | ``` 65 | 安装的版本或者指令可以运行下面这个脚本获取 66 | ```sh 67 | node arm-esbuild-version.js 68 | 69 | # 或者 70 | pnpm mac:m1:esbuild 71 | ``` 72 | ![](https://img.cdn.sugarat.top/mdImg/MTY5NDk1ODQ0Njk1Ng==694958446956) 73 | 74 | 75 | ## 本地启动 76 | ### 微信小程序 77 | ```sh 78 | # 构建出产物 79 | pnpm dev:mp-weixin 80 | ``` 81 | 82 | > **Q1：** 如果dev的时候发现报错，可以尝试删除`node_modules`之后再在命令行中运行`pnpm install --shamefully-hoist`重新安装依赖再`pnpm dev:mp-weixin` 83 | > 84 | > [详细参考文档](https://pnpm.io/zh/faq#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%883) 85 | 86 | > **Q2：** 如果运行白屏，有报错信息 “app.js错误ReferenceError: regeneratorRuntime is not defined” 87 | > 88 | > 参考[解决方案](https://blog.csdn.net/FUFCY/article/details/125160828) 给微信小程序IDE开启**增强编译选项** 89 | 90 | 然后将编译结果`dist/dev/mp-weixin`导入微信开发者工具即可运行 91 | 92 |
93 | 点击查看 导入详细步骤 94 | 95 | ![图片](https://img.cdn.sugarat.top/mdImg/MTYzNzQxNjc3MjA4Mw==637416772083) 96 | 97 | ![图片](https://img.cdn.sugarat.top/mdImg/MTYzNzQxNjg4MTUwNA==637416881504) 98 | 99 | ![图片](https://img.cdn.sugarat.top/mdImg/MTYzNzQxNjY3OTY0NQ==637416679645) 100 | 101 |
102 | 103 | >Q3：真机运行白屏，模拟器，开发环境都正常 104 | > 105 | >参考[issue 25](https://github.com/ATQQ/uni-vue3-ts-template/issues/25)，使用build 生产的资源进行真机调试就可以了 106 | 107 | ### H5 108 | ```sh 109 | # CSR 110 | pnpm dev:h5 111 | ``` 112 | 113 | 根据提示，打开对应地址即可访问 114 | 115 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxMTE0MDEzMg==653211140132) 116 | 117 | ### App 118 | >**Q1：** 如启动到App侧有报错？ 119 | >请更新至最新的HBuilderX-Alpha客户端 120 | #### 安装一些必要工具 121 | 需要使用 `uni-app` 官方提供的 [HBuilderX](https://www.dcloud.io/hbuilderx.html) 启动项目 122 | 123 | **Android模拟器在MacOSX、Windows上都可以安装；iOS模拟器只能在MacOSX上安装。** 124 | 125 | 先安装相关模拟器，[详细参考文档](https://hx.dcloud.net.cn/Tutorial/App/installSimulator) 126 | * 安卓：[夜神模拟器](https://www.yeshen.com/blog/) 127 | * iOS：Mac上安装Xcode 128 | 129 | 准备就绪后，使用 HBuilderX 打开项目 130 | #### iOS模拟器运行 131 | 通过顶部菜单栏，找到运行入口 132 | 133 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxMjk1MTgzNw==653212951837) 134 | 135 | 选择一个目标设备，点击启动即可 136 | 137 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxMjk3NDM0NQ==653212974345) 138 | 139 | #### Android模拟器运行 140 | 这里以[夜神模拟器](https://www.yeshen.com/blog/)为例 141 | 142 |
143 | 点击查看 详细步骤 144 | 145 | 先通过 HBuilderX 修改模拟器端口为 `62001` 146 | 147 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxNDAzMjIwNg==653214032206) 148 | 149 | 打开夜神模拟器 150 | 151 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxNDA5OTYxNg==653214099616) 152 | 153 | 选择运行到 Android 基座 154 | 155 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxNDEzMzI0OA==653214133248) 156 | 157 | 选择已经打开的模拟器，点击运行即可 158 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxNDIxNjczNw==653214216737) 159 | 160 | ![图片](https://img.cdn.sugarat.top/mdImg/MTY1MzIxMzkyOTQxNg==653213929416) 161 | 162 |
163 | 164 | 165 | ## 打包构建 166 | ### 微信小程序 167 | ``` 168 | pnpm build:mp-weixin 169 | ``` 170 | ### H5 171 | ```sh 172 | # CSR 173 | pnpm build:h5 174 | ``` 175 | 176 | ### App 177 | 基于 `HBuilderX` 参考[官方文档](https://hx.dcloud.net.cn/Tutorial/App/SafePack)进行进一步的操作 178 | 179 | 其它更多运行脚本 查看 [package.json](./package.json)中的scripts 180 | 181 | ## css预处理 182 | 183 | ### 已配置`scss`和`less`全局变量 184 | ```typescript 185 | // vite.config.ts 186 | export default defineConfig({ 187 | // ...... 188 | css: { 189 | preprocessorOptions: { 190 | scss: { 191 | additionalData: '@import "@/static/styles/variables.scss";' 192 | }, 193 | less: { 194 | additionalData: '@import "@/static/styles/variables.less";' 195 | } 196 | } 197 | } 198 | }) 199 | ``` 200 | 201 | 202 | 203 | `additionalData`的值是文件的路径，可以按照自己业务需求去修改，**如果项目样式变量分的比较细，可以使用一个样式文件引入多个变量样式文件，然后在这里引入入口文件** 204 | 205 | 206 | 207 | ## 别名配置 208 | 209 | 如果我们想要在`import`的时候 src 的路径简写成`@`，下面的就是配置 vite 的别名，[属性类型请查看vite文档](https://vitejs.cn/config/#resolve-alias) 210 | 211 | - `@` 代替 `./src` 212 | - `@components`代替`./src/components` 213 | 214 | ```typescript 215 | // vite.config.ts 216 | export default defineConfig({ 217 | // ...... 218 | resolve: { 219 | alias: { 220 | '@': path.resolve(__dirname, './src'), 221 | '@components': path.resolve(__dirname, './src/components') 222 | } 223 | } 224 | }) 225 | ``` 226 | 227 | 例子： 228 | 229 | ```diff 230 | // pages/index/index.vue 231 | - import Hello from '../../components/hello/index.vue' 232 | + import Hello from '@/components/hello/index.vue' 233 | // 或者 234 | + import Hello from '@components/hello/index.vue' 235 | ``` 236 | 237 | 238 | 239 | ### ts 240 | 241 | 如果是使用ts开发，这样还不够，ts不会识别路径的别名，显示找不到模块的报错，这个时候需要修改 `tsconfig.json` 文件，纠正下路径才可以。 242 | 243 | 244 | 245 | ```diff 246 | // tsconfig.json 247 | { 248 | // ...... 249 | "compilerOptions": { 250 | // ...... 251 | + "baseUrl": "./", 252 | + "paths": { 253 | + "@/*": ["src/*"], 254 | + "@components/*": ["src/components/*"] 255 | } 256 | }, 257 | } 258 | 259 | ``` 260 | 261 | 添加 `baseUrl` 和 `paths` 参数，就可以完美解决编辑器的报错提示了！ 262 | 263 | ## 原子化css 264 | * [unocss](https://github.com/unocss/unocss) - 即时按需原子 css 引擎 265 | * [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp) - 兼容小程序 unocss 预设 266 | 267 | > 支持小程序，h5，app 268 | 269 | ![](https://fastly.jsdelivr.net/gh/MellowCo/image-host/2022/202211121156442.png) 270 | --------------------------------------------------------------------------------