Vite 新一代前端構(gòu)建工具。
- 開發(fā)環(huán)境中，無需打包操作，可快速的冷啟動。
- 輕量快速的熱重載。
- 按需編譯。
# yarn 命令 (只會提示安裝 vue-ts)
yarn create @vitejs/app 項目名稱
# npm 命令 (只會提示安裝 vue-ts)
npm init @vitejs/app 項目名稱
- npm安裝會提示是否安裝依賴
# npm 命令（常用，會推薦安裝常用第三方包）
> npm init vue@3
Vue.js - The Progressive JavaScript Framework
√ Project name: ... vite-study-v3
√ Add TypeScript? ... No
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... No
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... No
√ Add Cypress for both Unit and End-to-End testing? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes
Scaffolding project in ...
Done. Now run:
cd vite-study-v3
npm install
npm run lint
npm run dev
項目結(jié)構(gòu)
| 項目名稱
|-- node_modules
|-- public
|-- src
|-- assets # 靜態(tài)資源
|-- components # 組件
|-- App.vue # 根組件
|-- index.css # 通用css樣式
|-- main.js # 引入掛載
|-- .gitignore # 忽略文件
|-- index.html # 項目首頁
|-- package-lock.json #
|-- package.json # 版本統(tǒng)一
配置文件
- 在項目中引入組件或文件時，使用
@/別名引入文件路徑報錯問題。
在
vite.config.js配置文件中修改別名。
const { resolve } = require('path')
export default {
// 別名
alias: {
'@': resolve(__dirname, './src')
},
server: {
open: true,
},
}
在 tsconfig.json 中配置 baseUrl，paths文章來源：http://www.zghlxwxcb.cn/news/detail-509234.html
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
},
}
在項目中使用 /@/ 進行引入。文章來源地址http://www.zghlxwxcb.cn/news/detail-509234.html
<template>
</template>
<script setup lang='ts'>
import head from '@/components/head.vue'
</script>
到了這里，關(guān)于Vue3：Vite 構(gòu)建 Vue 項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
