wonderfulliu/vue3-vite-ts

Vue 3 + TypeScript + Vite

初始化

git

git init

删除无用组件

配置别名@

vite.config.ts中配置 tsconfig.json中配置

项目结构

src api assets components config hooks plugins router store types utils views

安装相关工具

Vue

yarn add pinia
# or with npm
npm install pinia

yarn add vue-router@4
npm install vue-router@4

npm install axios
yarn add axios

UI 框架

npm install element-plus --save
yarn add element-plus

样式

# 格式化样式
npm install --save normalize.css
# main.js/ts 引入
import 'normalize.css/normalize.css'

npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport

npm i autoprefixer -D

npm i sass -D

工具

npm i js-cookie

npm install dayjs --save

npm i --save lodash

# 浏览器唯一标识
npm i @fingerprintjs/fingerprintjs

npm i jwt-decode

便捷

# 自动引入vue api
npm i -D unplugin-auto-import

# 自动引入vue组件
npm i unplugin-vue-components -D

国际化实现方式

1. 根据系统的语言环境，从server端获取对应的语言文件
2. 语言文件文件放在前端，点击切换，调用api直接切换