当前位置：首页 > news >正文

Vue 从零配置与完整使用教程（零基础保姆级）

news 2026/7/3 17:40:15

上一篇我们详细讲解了Vue.js 的核心概念与设计理念，明白了它是一款渐进式、数据驱动、组件化的前端框架。但理论看懂不代表会写，本篇文章直接落地实战，带大家从零完成 Vue 环境配置、项目搭建、基础使用、运行调试。

本文覆盖两种最常用使用场景：CDN 快速引入（适合入门/小页面）和Vite 工程化项目（企业开发主流），全程无跳过步骤，新手跟着做即可成功跑通第一个 Vue 项目。

一、Vue 使用的两种方式

Vue 作为渐进式框架，最大的特点就是灵活、按需使用，官方提供了两种接入方式：

CDN 引入：无需安装脚手架、无需打包工具，直接在 HTML 中引入，适合快速测试、学习语法、简单页面开发
工程化搭建（Vite）：基于构建工具创建完整项目，支持组件化、路由、状态管理、打包部署，适用于所有企业级项目

日常学习建议：先用 CDN 熟悉语法，再用 Vite 熟悉工程化开发。

二、方式一：CDN 快速配置使用（零门槛）

1. 引入 Vue3 CDN

直接在普通 HTML 文件中引入官方 CDN 链接，即可全局使用 Vue，无需任何依赖安装。

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

2. 完整入门示例

下面是一个可直接运行的完整 Vue 示例，包含创建实例、数据渲染、简单事件，复制保存为 HTML 直接打开即可运行。

3. 核心知识点解读

挂载节点：Vue 通过mount('#app')绑定 DOM，只会控制该节点内部视图，不影响页面其他内容
插值 {{}}：用于渲染文本数据，实现数据动态展示
指令 @click：Vue 事件指令，替代原生 onclick，简化事件绑定
响应式数据：修改 data 中数据，视图自动更新，无需操作 DOM

优点：开箱即用、无需环境配置；缺点：只适合学习和简单页面，不适合大型项目。

三、方式二：Vite 搭建 Vue3 工程化项目（企业主流）

真正的开发项目全部采用工程化模式，目前官方推荐Vite替代老旧的 Vue CLI，启动更快、热更新更快、打包体积更小。

1. 前置环境：安装 Node.js

Vue 工程化项目依赖 Node.js，电脑必须提前安装，否则无法执行命令。

下载地址：Node.js — Run JavaScript Everywhere
推荐版本：v16+ / v18+ 稳定版
安装验证：终端输入node -v和npm -v，输出版本号即安装成功

2. 创建 Vue 项目（官方标准命令）

打开终端（CMD / PowerShell / 终端），执行以下命令创建项目：

# npm 创建项目 npm create vite@latest my-vue-project -- --template vue # 进入项目文件夹 cd my-vue-project # 安装依赖 npm install # 启动本地开发服务 npm run dev

3. 命令步骤详解

npm create vite@latest：调用 Vite 官方脚手架
my-vue-project：自定义项目名称
--template vue：指定模板为 Vue3
npm install：读取 package.json 下载所有项目依赖
npm run dev：启动开发服务器，支持热更新

4. 访问项目

启动成功后终端会输出本地地址，默认http://localhost:5173，打开浏览器即可看到 Vue 默认页面，修改代码页面会实时刷新。

四、Vue 工程化项目目录结构详解

刚创建的项目文件不多，但每个文件都有固定作用，新手必须搞懂核心文件用途，避免修改出错。

my-vue-project ├── public # 静态资源文件夹（不会被打包编译） ├── src # 项目源码目录（核心开发目录） │ ├── assets # 图片、字体等静态资源 │ ├── components # 公共组件存放目录 │ ├── App.vue # 根组件（项目最大的组件） │ └── main.js # 项目入口文件 ├── .gitignore # git 忽略文件配置 ├── index.html # 项目入口页面 ├── package.json # 项目依赖、脚本命令配置 └── vite.config.js # Vite 打包配置

核心文件说明

main.js：项目入口，全局创建 Vue 实例、挂载、注册全局组件
App.vue：根组件，所有页面、组件的父组件
index.html：唯一的 HTML 模板，项目所有内容都通过 JS 挂载到这里

五、Vue 单文件组件（.vue 文件）使用规范

工程化项目中，Vue 以.vue 单文件组件（SFC）为最小开发单元，一个文件就是一个独立组件，结构分为三部分：

template：模板结构，写 HTML 代码（必须有且仅有一个根节点）
script：业务逻辑、数据、方法、接口请求
style：样式代码，支持 scoped 局部样式

实战：自定义第一个组件

在src/components/新建Hello.vue：

<template> <div class="hello"> <h3>{{ title }}</h3> <p>Vue3 工程化组件使用成功！</p> </div> </template> <script setup> // Vue3 主流语法：setup 语法糖 const title = '欢迎使用 Vue3 + Vite' </script> <style scoped> .hello { padding: 20px; color: #42b983; } </style>

在根组件 App.vue 中引入使用

<template> <div> <Hello /> </div> </template> <script setup> // 导入组件 import Hello from './components/Hello.vue' </script>