第一部分:Vue 3 基础入门
第4集:创建第一个Vue 3项目
现在我们已经了解了Vite和Webpack的区别,并且配置好了开发环境,接下来让我们使用Vite创建第一个Vue 3项目。在本集中,我们将学习如何初始化项目、了解项目结构以及进行基本配置。
4.1 使用Vite初始化Vue 3项目
Vite提供了一个简单的命令行工具来初始化Vue 3项目。我们可以使用npm、yarn或pnpm来执行这个命令。
4.1.1 使用npm初始化
npm create vite@latest my-vue3-app -- --template vue4.1.2 使用yarn初始化
yarn create vite my-vue3-app --template vue4.1.3 使用pnpm初始化
pnpm create vite my-vue3-app --template vue4.1.4 选择TypeScript模板
如果需要创建TypeScript项目,可以使用vue-ts模板:
npm create vite@latest my-vue3-app -- --template vue-ts4.2 项目创建过程
执行上述命令后,Vite会引导我们完成项目创建:
- 输入项目名称(默认是vite-project)
- 选择框架(我们选择Vue)
- 选择变体(JavaScript或TypeScript)
- 等待项目创建完成
创建完成后,我们会看到以下输出:
Scaffolding project in ./my-vue3-app...
Done.
Now run:
cd my-vue3-app
npm install
npm run dev4.3 安装依赖和启动开发服务器
按照提示,我们需要进入项目目录,安装依赖并启动开发服务器:
cd my-vue3-app
npm install
npm run dev启动成功后,我们会看到以下输出:
VITE v5.0.0 ready in 300 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help现在,我们可以在浏览器中访问http://localhost:5173/来查看我们的Vue 3应用。
4.4 项目结构解析
让我们来了解一下Vue 3项目的基本结构:
my-vue3-app/
├── public/ # 静态资源目录
│ └── vite.svg # Vite logo
├── src/ # 源代码目录
│ ├── assets/ # 资源文件目录
│ │ └── vue.svg # Vue logo
│ ├── components/ # 组件目录
│ │ └── HelloWorld.vue # 示例组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .gitignore # Git忽略文件
├── index.html # HTML模板
├── package.json # 项目配置文件
├── README.md # 项目说明文件
└── vite.config.js # Vite配置文件4.4.1 核心文件解析
index.html:HTML模板文件,Vite会将我们的Vue应用挂载到这个文件中的指定元素上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>src/main.js:应用的入口文件,负责创建Vue应用实例并挂载到DOM上。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')src/App.vue:根组件,是我们应用的主组件。
<template>
<div>
<a href="https://vite.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>src/components/HelloWorld.vue:示例组件,展示了Vue组件的基本结构。
4.5 基本配置
4.5.1 vite.config.js
Vite配置文件,用于配置Vite的各种选项:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})4.5.2 package.json
项目配置文件,包含项目依赖、脚本命令等:
{
"name": "my-vue3-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.8"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"vite": "^5.0.0"
}
}4.6 第一个自定义组件
让我们创建一个简单的自定义组件,来熟悉Vue 3的组件开发:
- 在src/components目录下创建一个新文件Greeting.vue:
<template>
<div class="greeting">
<h2>你好,{{ name }}!</h2>
<p>欢迎来到Vue 3的世界!</p>
</div>
</template>
<script setup>
// 定义props
const props = defineProps({
name: {
type: String,
default: 'Vue开发者'
}
})
</script>
<style scoped>
.greeting {
background-color: #f0f0f0;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
</style>- 在App.vue中使用这个组件:
<template>
<!-- 现有代码 -->
<HelloWorld msg="Vite + Vue" />
<Greeting name="张三" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
// 引入自定义组件
import Greeting from './components/Greeting.vue'
</script>
<!-- 现有样式 -->- 保存文件后,我们可以在浏览器中看到新添加的组件。
4.7 构建生产版本
当我们的应用开发完成后,可以使用以下命令构建生产版本:
npm run build构建完成后,会生成一个dist目录,包含了优化后的生产版本代码。我们可以使用以下命令预览生产构建:
npm run preview本集小结
在本集中,我们学习了如何使用Vite创建第一个Vue 3项目:
- 初始化项目:使用Vite命令行工具创建Vue 3项目
- 安装依赖:使用npm install安装项目依赖
- 启动开发服务器:使用npm run dev启动开发服务器
- 项目结构:了解了Vue 3项目的基本结构和核心文件
- 创建自定义组件:学习了如何创建和使用自定义组件
- 构建生产版本:学习了如何构建和预览生产版本
现在,我们已经成功创建了第一个Vue 3项目,并且了解了项目的基本结构和配置。在下一集中,我们将深入解析Vue 3项目的结构,包括各个文件的作用和配置选项。