uni-app Vue3 + TypeScript + Vite + Pinia + Unocss 模板项目
Node >= 18
pnpm 8
Registry taobao - https://registry.npmmirror.com/
npx degit atqq/uni-vue3-ts-template#main my-uni-vue3-ts-vite-project
- Vite
- TypeScript
- Sass
- Less
- Eslint
- Prettier
- Vitest - replace jest
- unocss - 即时按需原子 css 引擎
- GitHooks simple-git-hooks
LintStagedStyleLint
建议使用pnpm,依赖安装速度更快
npm i -g pnpm
pnpm install
MAC M1(ARM芯片),其它操作系统无需关注,正常运行需要手动安装 esbuild-darwin-64
即可
pnpm add @esbuild/[email protected] -D
安装的版本或者指令可以运行下面这个脚本获取
node arm-esbuild-version.js
# 构建出产物
pnpm dev:mp-weixin
# CSR
pnpm dev:h5
pnpm build:mp-weixin
# CSR
pnpm build:h5
如果我们想要在import
的时候 src 的路径简写成@
,下面的就是配置 vite 的别名,属性类型请查看vite文档
@
代替./src
@components
代替./src/components
// vite.config.ts
export default defineConfig({
// ......
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components')
}
}
})
例子:
// pages/index/index.vue
- import Hello from '../../components/hello/index.vue'
+ import Hello from '@/components/hello/index.vue'
// 或者
+ import Hello from '@components/hello/index.vue'
如果是使用ts开发,这样还不够,ts不会识别路径的别名,显示找不到模块的报错,这个时候需要修改 tsconfig.json
文件,纠正下路径才可以。
// tsconfig.json
{
// ......
"compilerOptions": {
// ......
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"],
+ "@components/*": ["src/components/*"]
}
},
}
添加 baseUrl
和 paths
参数,就可以完美解决编辑器的报错提示了!