C41. Vue 环境配置

1.1. 使用 npm 安装 Vite

Vite 是新一代的前端构建工具，能显著提升开发速度。它通过原生 ES 模块支持实现“冷启动零配置”，是 Vue 开发的首选工具。

🛠️ 安装步骤：

确认环境：
- 确保已安装 Node.js（建议版本 ≥ 16.14.0）和 npm（版本 ≥ 8.5.0）。
- 检查版本：
  bash
```
node -v   # 查看 Node.js 版本
npm -v    # 查看 npm 版本
```
  1
  2
全局安装 Vite：
bash
```
npm install -g vite
```
1
WARNING
- 若权限不足，可添加 --force 或 --legacy-peer-deps 参数。
- Windows 用户建议以管理员身份运行命令行。
验证安装：
bash
```
vite --version  # 输出 Vite 版本号
```
1

1.2. 使用 npm create 创建 Vue 项目

通过 Vite 的模板功能快速生成 Vue 项目骨架，省去手动配置的麻烦。

🎯 创建步骤：

执行命令：
bash
```
npm create vite@latest
```
1
- 回车后按提示操作：
  - 项目名称：输入项目文件夹名（如 my-vue-app）。
  - 选择框架：输入 vue 并回车。
  - 选择 Variants：选择 vue2 或 vue3（默认推荐 Vue 3）。
  - 是否使用 TypeScript：按需选择 y/n。
TIP
可直接指定参数快速创建（无需交互）：
bash
```
npm create vite@latest my-vue-app -- --template vue
```
1
进入项目目录：
bash
```
cd my-vue-app
```
1

项目结构示例：

text

my-vue-app/
├── node_modules/          # 依赖库
├── public/                # 静态资源（如 favicon.ico）
├── src/                   # 源代码
│   ├── assets/            # 图标、图片等
│   ├── components/        # Vue 组件
│   └── main.js            # 入口文件
│   └── App.vue            # 根组件
├── index.html             # 入口 HTML
├── package.json           # 项目配置
└── vite.config.js         # Vite 配置（可选）

1.3. 使用 npm run dev 启动 Vue 项目

通过开发服务器实时预览页面，支持热更新（代码保存后无需刷新页面）。

🚀 启动命令：

bash

npm run dev

成功后会输出类似以下信息：

bash

VITE v4.4.9  ready in 1000ms
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

🔍 访问项目：

浏览器打开 http://localhost:5173，即可看到默认的 Vue 欢迎界面。

1.4. 打包与预览 Vue 项目

打包后生成的静态资源可部署到任意服务器。

📦 打包命令：

bash

npm run build

生成目录 dist/，包含压缩后的 HTML、CSS、JS 文件及资源。

🌐 预览打包结果：

使用 serve 工具（需提前安装）：
bash
```
npm install -g serve
serve -s dist
```
1
2
- 访问 http://localhost:3000 查看打包效果。
直接打开 dist/index.html（需服务器支持）。

1.5. 单个 Vue 文件包含三种语言

Vue 单文件组件（.vue） 是 Vue 的核心概念，将 HTML、CSS、JavaScript 三者整合为一个文件。

📄 文件结构示例：

vue

<template>
  <!-- HTML 模板：界面结构 -->
  <div class="container">
    <h1>{{ title }}</h1>
    <button @click="increment">点击计数</button>
    <p>计数器：{{ count }}</p>
  </div>
</template>

<script setup>
// JavaScript 逻辑：数据与方法
import { ref } from 'vue';

const title = '欢迎使用 Vue!';
const count = ref(0);

function increment() {
  count.value++;
}
</script>

<style scoped>
/* CSS 样式：样式仅作用于当前组件 */
.container {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}
</style>

🛠️ 关键特性：

模板（Template）：
- 使用双花括号插入数据，@click 等指令绑定事件。
脚本（Script）：
- 使用 ref 管理响应式数据，定义方法。
样式（Style）：
- scoped 属性确保样式仅作用于当前组件，避免冲突。

1.6. Vue 文件可以通过 import 谓词调用

Vue 支持 ES 模块化语法，可通过 import 引入其他组件、资源或第三方库。

📚 常见 import 场景：

导入组件：

vue

<!-- 在 App.vue 中导入子组件 -->
<script setup>
import MyButton from './components/MyButton.vue';
</script>

<template>
  <MyButton>点击我</MyButton>
</template>

导入 CSS 文件：

vue

<style>
/* 全局样式 */
@import './assets/styles/global.css';
</style>

导入第三方库：

vue

<script setup>
import { ref } from 'vue';
import axios from 'axios';  // 需先安装 axios
</script>

WARNING

文件路径需正确（相对路径或绝对路径）。
第三方库需先通过 npm install 安装。

1.7. Vue 可配置多种语言

Vue 支持通过配置文件或插件实现多语言支持，如国际化（i18n）。

🌍 基础配置步骤（以 vue-i18n 为例）：

安装插件：
bash
```
npm install vue-i18n
```
1

创建语言文件：

json

// src/locales/zh.json
{
  "welcome": "欢迎使用 Vue!",
  "counter": "计数器：{count}"
}

// src/locales/en.json
{
  "welcome": "Welcome to Vue!",
  "counter": "Counter: {count}"
}

配置插件：

javascript

// src/main.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'zh', // 默认语言
  messages: {
    en: require('./locales/en.json'),
    zh: require('./locales/zh.json'),
  },
});

createApp(App).use(i18n).mount('#app');

模板中使用：

vue

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('counter', { count }) }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
const toggleLanguage = () => {
  $i18n.locale = $i18n.locale === 'zh' ? 'en' : 'zh';
};
</script>

TIP

可通过 $i18n.locale 动态切换语言。
支持占位符（如 {count}）和复数化。

知识回顾

环境准备：
- 安装 Vite：npm install -g vite
- 创建项目：npm create vite@latest [项目名] -- --template vue
- 启动开发服务器：npm run dev
- 打包部署：npm run build
Vue 单文件组件：
- 三要素：<template>、<script setup>、<style scoped>。
- 数据绑定：通过插入变量，@事件名 绑定函数。
模块化与扩展：
- 使用 import 导入组件、资源或第三方库。
- 通过插件（如 vue-i18n）实现多语言配置。

课后练习

单选题： Vue 单文件组件中，<style scoped> 的作用是？
- A. 全局样式生效
- B. 仅当前组件生效
- C. 禁用 CSS
- D. 合并所有样式
填空题：在 Vue 项目中，npm run dev 的作用是______，npm run build 的作用是______。

代码纠错：修复以下 App.vue 代码中的语法错误：

vue

<tempalte>
  <h1>测试页面</h1>
</tempalte>
<script>
  const message = 'Hello Vue!'
</script>

操作题：按步骤创建一个 Vue 项目，添加一个按钮，点击后在控制台输出“Hello Vite!”。
扩展题：在现有项目中实现多语言切换功能，要求：
- 添加中英文切换按钮。
- 修改 App.vue 的欢迎语为多语言版本。
- 提供 zh 和 en 两种语言支持。

🧱 A1. HTML 入门

🎨 A2. CSS 入门

⚡ A3. JavaScript 入门

🌐 B1. Web 通识及工具

🧱 B2. HTML 进阶

🎨 B3. CSS 进阶

⚡ B4. JavaScript 初级

⚡ C1. JavaScript 进阶

📦 C2. 环境搭建与网页部署

🛡️ C3. TypeScript 基础

🔧 C4. Vue 基础

🎨 C5. CSS 高级

💡 D1. 算法基础

🛡️ D2. Typescript 进阶

🔧 D3. Vue 进阶

⚙️ D4. 前端原理

☁️ E1. 服务器基础

☁️ E2. Express.js 基础

C41. Vue 环境配置

1.1. 使用 npm 安装 Vite

🛠️ 安装步骤：

1.2. 使用 npm create 创建 Vue 项目

🎯 创建步骤：

1.3. 使用 npm run dev 启动 Vue 项目

🚀 启动命令：

🔍 访问项目：

1.4. 打包与预览 Vue 项目

📦 打包命令：

🌐 预览打包结果：

1.5. 单个 Vue 文件包含三种语言

📄 文件结构示例：

🛠️ 关键特性：

1.6. Vue 文件可以通过 import 谓词调用

📚 常见 import 场景：

1.7. Vue 可配置多种语言

🌍 基础配置步骤（以 vue-i18n 为例）：

知识回顾

课后练习

C41. Vue 环境配置 ​

1.1. 使用 npm 安装 Vite ​

🛠️ 安装步骤： ​

1.2. 使用 npm create 创建 Vue 项目 ​

🎯 创建步骤： ​

1.3. 使用 npm run dev 启动 Vue 项目 ​

🚀 启动命令： ​

🔍 访问项目： ​

1.4. 打包与预览 Vue 项目 ​

📦 打包命令： ​

🌐 预览打包结果： ​

1.5. 单个 Vue 文件包含三种语言 ​

📄 文件结构示例： ​

🛠️ 关键特性： ​

1.6. Vue 文件可以通过 import 谓词调用 ​

📚 常见 import 场景： ​

1.7. Vue 可配置多种语言 ​

🌍 基础配置步骤（以 vue-i18n 为例）： ​

知识回顾 ​

课后练习 ​

C41. Vue 环境配置

1.1. 使用 npm 安装 Vite

🛠️ 安装步骤：

1.2. 使用 npm create 创建 Vue 项目

🎯 创建步骤：

1.3. 使用 npm run dev 启动 Vue 项目

🚀 启动命令：

🔍 访问项目：

1.4. 打包与预览 Vue 项目

📦 打包命令：

🌐 预览打包结果：

1.5. 单个 Vue 文件包含三种语言

📄 文件结构示例：

🛠️ 关键特性：

1.6. Vue 文件可以通过 import 谓词调用

📚 常见 import 场景：

1.7. Vue 可配置多种语言

🌍 基础配置步骤（以 vue-i18n 为例）：

知识回顾

课后练习