Vue3：Vite 构建 Vue 项目

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

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        },
    },
}

在项目中使用 /@/ 进行引入。

<template>
	
</template>

<script setup lang='ts'>
	import head from '@/components/head.vue'
</script>