Vue-3开发指南一

2025-08-26 约 2661 字预计阅读 6 分钟

https://bing.ee123.net/img/rand?artid=150815987

Vue 3开发指南（一）

✍因为时间有限小程序开发指南（实战篇）暂时不做过多的介入，后续有时间完善。优先找工作要紧，目前先像Vue3与React、Uni-app、鸿蒙（harmonyOS）、Nodejs我也会慢慢的去整理。如果有不好或者有错误的地方请告知！希望可以与大家相互的交流学习！

Vue.js 是一个渐进式 JavaScript 框架，可以按需引入其特性（如 Vue Router 和 Pinia），适应不同规模的项目。您不需要一次性使用框架的全部功能。

渐进式框架对比

Vue - 渐进式、易上手
React - 灵活但需要更多配置
Angular - 完整但学习曲线较陡

Vue.js 核心优势

组件化开发 - 提高代码复用性和可维护性
简洁的模板语法 - 如 v-if、v-for 等指令
双向数据绑定 - 简化数据流管理
轻量级 - 相比 Angular 和 React 更轻量
易于上手 - 学习曲线平缓
虚拟 DOM - 减少实际 DOM 操作，提高性能

注意：Vue.js 不支持 IE8 及其以下版本。

官方资源

官方网站：https://cn.vuejs.org/
中文文档：https://cn.vuejs.org/guide/introduction.html

开发环境配置

编辑器推荐

Visual Studio Code (VS Code) 是一个由微软开发的免费、开源的代码编辑器。

官方网址:

Vue 插件推荐

插件	状态	适用版本
Vetur	❌ 不再推荐	Vue 2
Volar (Vue - Official)	✅ 强烈推荐	Vue 3 (及 2.7+)

建议：

开发 Vue 3 项目时，应禁用或卸载 Vetur，避免与 Volar 冲突
同时维护 Vue 2 和 Vue 3 项目时，可在项目根目录创建 .vscode/extensions.json：

{
  "recommendations": ["Vue.volar"] // Vue 3 项目
  // "recommendations": ["octref.vetur"] // Vue 2 项目
}

快速开始：单页面应用

CDN 引入方式

开发环境：

<script src="https://unpkg.com/vue@3.5.20/dist/vue.global.js"></script>

生产环境（体积减小 30%以上，性能更快）：

<!-- 选择其中之一即可，推荐 .min.js -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- 或者 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.min.js"></script>

基础示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 示例</title>
</head>
<body>
  <div id="app">{{ message }}</div>
  
  <script src="https://unpkg.com/vue@3.5.20/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    const app = createApp({
      data() {
        return {
          message: 'Hello Vue!'
        };
      }
    });
    app.mount('#app');
  </script>
</body>
</html>

包管理工具

npm 与 cnpm

Node.js 自带的默认包管理器是 npm。由于国内访问速度问题，可以使用以下解决方案：

使用淘宝镜像源：

npm config set registry https://registry.npmmirror.com/

升级 npm：

npm install -g npm

恢复官方源：

npm config set registry https://registry.npmjs.org/

cnpm安装：(相比于npm是加速依赖下载的工具)

npm install cnpm -g

项目创建方式

1. 使用 create-vue (官方推荐)

底层构建工具：Vite (默认且唯一选择)

npm init vue@latest

交互式配置示例：

$ npm init vue@latest
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y # 安装create-vue@3.6.1是否继续操作

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 runoob-vue3-test，其他默认回车即可
-> Project name: … runoob-vue3-test # 项目名
-> Add TypeScript? … No / Yes # 支持ts (可选)
-> Add JSX Support? … Yes # 支持jsx语法 , JSX (JavaScript XML) 是一种 JavaScript 的语法扩展。它允许你在 JavaScript 代码中编写类似 HTML 的标记结构
-> Add Vue Router for Single Page Application development? …  Yes # 路由
-> Add Pinia for state management? … Yes # 状态管理
-> Add Vitest for Unit Testing? … No # 单元测试
-> Add an End-to-End Testing Solution? › No # 端到端测试
-> Add ESLint for code quality? … No / Yes # eslint代码质量检测(可选)

完成后的操作：

cd my-vue-app
npm install
npm run dev

2. 使用 create-vite (需要手动配置)

npm create vite@latest my-vue-app

交互式选择：

✔ Select a framework: › Vue
✔ Select a variant: › JavaScript / TypeScript

3. 使用 Vue CLI 创建项目

底层构建工具：Webpack (默认)
Webpack 入门教程：https://www.runoob.com/w3cnote/webpack-tutorial.html

npm install -g @vue/cli
vue create my-project

注意:npm init vite-app runoob-vue3-test2 , Vite 发展早期（约 2020-2021 年）使用的命令。像是买了一台 10 年前的古董电脑，系统老旧。旧/过时/不推荐已废弃

项目结构详解

my-vue-app/
├── node_modules/           # 项目依赖
├── public/                 # 静态资源
│   ├── index.html         # HTML 模板
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码
│   ├── assets/            # 静态资源（图片、字体等）
│   ├── components/        # 可复用组件
│   ├── views/             # 页面级组件
│   ├── App.vue            # 根组件
│   ├── main.js            # 入口文件
│   ├── router.js          # 路由配置（如使用）
│   └── store.js           # 状态管理配置（如使用）
├── package.json           # 项目配置和依赖
├── vite.config.js         # Vite 配置文件
└── README.md              # 项目说明文档

核心文件说明

public/index.html - 应用 HTML 模板，Vue 应用挂载点
src/main.js - 应用入口，创建 Vue 实例并挂载
src/App.vue - 根组件，包含主要布局和路由视图
src/components/ - 可复用组件目录
src/views/ - 页面级组件目录

单文件组件结构

Vue 单文件组件 (.vue) 包含三个部分：

<template>
  <!-- HTML 模板 -->
  <div>{{ message }}</div>
</template>

<script>
// JavaScript 逻辑
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<style>
/* CSS 样式 */
div {
  color: blue;
}
</style>

CSS 预处理器支持

Vite 支持多种 CSS 预处理器，需要先安装相应依赖：

Sass:

npm install -D sass

Less:

npm install -D less

Stylus:

npm install -D stylus

使用示例：

<style lang="scss">
// SCSS 代码
$primary-color: blue;
div {
  color: $primary-color;
}
</style>

环境变量配置

创建 .env 文件定义环境变量：

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vue App

在代码中使用环境变量：

const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

Vite 配置详解

import { defineConfig } from 'vite'; // 导入 defineConfig 函数，用于定义 Vite 配置
import vue from '@vitejs/plugin-vue'; // 导入 Vue 插件，用于支持 Vue 项目
import path from 'path'; // 导入 path 模块，用于处理路径

export default defineConfig({
  // 项目根目录，默认为当前工作目录
  root: path.resolve(__dirname, './src'),
  
  // 基础路径（用于子路径部署）
  base: '/my-app/',
  
  // 开发服务器配置
  server: {
    port: 3000, // 指定开发服务器端口
    open: true, // 是否自动打开浏览器
    proxy: { // 配置代理服务器，用于解决跨域问题
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, // 是否改变请求源
        rewrite: (path) => path.replace(/^\/api/, '') // 重写请求路径
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: path.resolve(__dirname, '../dist'), // 指定输出目录
    assetsDir: 'static', // 指定静态资源目录
    sourcemap: true, // 是否生成 sourcemap 文件
    minify: 'terser', // 是否压缩代码
    rollupOptions: { // 配置 Rollup 选项
      external: ['lodash'], // 配置外部依赖
      output: { // 配置输出格式
        manualChunks: { // 将 lodash 单独打包
          lodash: ['lodash']
        }
      }
    }
  },
  
  // 插件配置
  plugins: [vue()], // 使用 Vue 插件
  
  // 模块解析配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 配置路径别名, 将 @ 映射到 src 目录
    }
  },
  
  // CSS 配置
  css: {
    preprocessorOptions: { // 配置 CSS 预处理器选项
      scss: {
        additionalData: `@import "@/styles/variables.scss";` // 全局注入 SCSS 变量
      }
    }
  },
  
  // 环境变量前缀
  envPrefix: 'VITE_' // 环境变量前缀，默认为 VITE_
});

应用实例与挂载

Vue.createApp() 方法创建 Vue 应用实例，通过 .mount() 方法挂载到 DOM：

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    };
  }
};

Vue.createApp(HelloVueApp).mount('#hello-vue');
</script>

执行过程：

浏览器解析 HTML 和 JavaScript
Vue.js 脚本执行，创建应用实例
实例绑定到指定元素，根据初始数据渲染内容
数据变化时自动更新视图

AI 编程助手

推荐使用 Fitten Code 插件提升开发效率：

确保 VSCode 版本 ≥ 1.68.0
安装 Fitten Code 插件并登录
使用 Tab 键接受代码补全建议

项目构建与部署

打包项目

npm run build

打包后的文件位于 dist/ 目录，可直接部署到服务器。

预览生产版本

npm run preview

扩展学习资源

- 官方路由管理器
- 官方状态管理库
- 构建工具文档
- 精选资源列表

本文档将持续更新，建议定期查看获取最新信息。