Vite 新一代前端构建工具。
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载。
- 按需编译。
# 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
项目结构
| 项目名称
|-- node_modules
|-- public
|-- src
|-- assets # 静态资源
|-- components # 组件
|-- App.vue # 根组件
|-- index.css # 通用css样式
|-- main.js # 引入挂载
|-- .gitignore # 忽略文件
|-- index.html # 项目首页
|-- package-lock.json #
|-- package.json # 版本统一
配置文件
- 在项目中引入组件或文件时，使用
@/别名引入文件路径报错问题。
在
vite.config.js配置文件中修改别名。
const { resolve } = require('path')
export default {
// 别名
alias: {
'@': resolve(__dirname, './src')
},
server: {
open: true,
},
}
在 tsconfig.json 中配置 baseUrl，paths文章来源：https://www.toymoban.com/news/detail-509234.html
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
},
}
在项目中使用 /@/ 进行引入。文章来源地址https://www.toymoban.com/news/detail-509234.html
<template>
</template>
<script setup lang='ts'>
import head from '@/components/head.vue'
</script>
到了这里，关于Vue3：Vite 构建 Vue 项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
