第一部分: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 vue

4.1.2 使用yarn初始化

yarn create vite my-vue3-app --template vue

4.1.3 使用pnpm初始化

pnpm create vite my-vue3-app --template vue

4.1.4 选择TypeScript模板

如果需要创建TypeScript项目,可以使用vue-ts模板:

npm create vite@latest my-vue3-app -- --template vue-ts

4.2 项目创建过程

执行上述命令后,Vite会引导我们完成项目创建:

  1. 输入项目名称(默认是vite-project)
  2. 选择框架(我们选择Vue)
  3. 选择变体(JavaScript或TypeScript)
  4. 等待项目创建完成

创建完成后,我们会看到以下输出:

Scaffolding project in ./my-vue3-app...
Done.

Now run:
  cd my-vue3-app
  npm install
  npm run dev

4.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的组件开发:

  1. 在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>
  1. 在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>

<!-- 现有样式 -->
  1. 保存文件后,我们可以在浏览器中看到新添加的组件。

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项目的结构,包括各个文件的作用和配置选项。

« 上一篇 Vite vs Webpack深度对比 下一篇 » 项目结构深度解析