上一篇我们详细讲解了 Vue.js 的核心概念与设计理念 ，明白了它是一款渐进式、数据驱动、组件化的前端框架。但理论看懂不代表会写，本篇文章直接落地实战，带大家 从零完成 Vue 环境配置、项目搭建、基础使用、运行调试。
本文覆盖两种最常用使用场景：CDN 快速引入（适合入门/小页面） 和 Vite 工程化项目（企业开发主流），全程无跳过步骤，新手跟着做即可成功跑通第一个 Vue 项目。
一、Vue 使用的两种方式
Vue 作为渐进式框架，最大的特点就是 灵活、按需使用，官方提供了两种接入方式：
-
CDN 引入：无需安装脚手架、无需打包工具，直接在 HTML 中引入，适合快速测试、学习语法、简单页面开发
-
工程化搭建（Vite）：基于构建工具创建完整项目，支持组件化、路由、状态管理、打包部署，适用于所有企业级项目
日常学习建议：先用 CDN 熟悉语法，再用 Vite 熟悉工程化开发。
二、方式一：CDN 快速配置使用（零门槛）
1. 引入 Vue3 CDN
直接在普通 HTML 文件中引入官方 CDN 链接，即可全局使用 Vue，无需任何依赖安装。
<!-- 引入 Vue3 最新生产版本 --> <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，电脑必须提前安装，否则无法执行命令。
-
推荐版本：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>
六、常用项目命令与打包部署
开发过程中只需掌握三条核心命令：
# 启动本地开发服务（日常开发使用） npm run dev # 项目打包（上线部署使用） npm run build # 预览打包后的项目 npm run preview
执行 npm run build 后，项目会生成 dist 文件夹，将该文件夹上传服务器即可完成线上部署。
七、新手常见配置问题与解决方案
1. npm 下载依赖慢 / 报错
切换淘宝镜像源，提速且解决下载失败：
npm config set registry https://registry.npmmirror.com
2. 端口被占用
关闭占用端口程序，或修改 vite.config.js 端口配置。
3. 页面样式全局污染
组件 style 标签务必添加 scoped，让样式只作用于当前组件。
八、总结
Vue 的配置和使用可以分为两个阶段：
-
入门学习：使用 CDN 直接引入，快速熟悉模板语法、响应式、事件、指令，零配置成本；
-
企业开发 ：使用 Vite + Vue3 工程化方案，基于单文件组件开发，结构清晰、可维护性高、支持工程化部署。
掌握本篇的配置流程，你就已经具备了 Vue 项目的基础开发能力，后续路由、状态管理、UI 组件库的接入，都是在该基础项目上拓展。