1. 初始化
npm init vite
2. 输入项目名称
- vue3-ts
3. 选择vue
4. 选择typescript
5. 进入新建的项目
- cd vue3-ts
6. 安装依赖
- npm install
7. 运行
- npm run dev 或者 yarn dev
- 访问
http://localhost:5173/
8. 安装路由
- yarn add vue-router -S
9. 安装element-plus
- yarn add element-plus -S
10. 安装自动导入组件插件
- yarn add unplugin-vue-components -D
11. 安装自动导入api插件
- yarn add unplugin-auto-import -D
文章来源：https://www.toymoban.com/news/detail-411797.html
12. 将./src变为@
- 下载@types/node依赖
npm i -D @types/node
- vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src')
},
],
//extensions数组的意思是在import组件的时候自动补全.vue等文件后缀
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}
})
- tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
}
13. 安装pinia
- yarn add pinia -S
文章来源地址https://www.toymoban.com/news/detail-411797.html
到了这里，关于Vite构建Vue3项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
