上一篇我们详细讲解了Vue.js 的核心概念与设计理念明白了它是一款渐进式、数据驱动、组件化的前端框架。但理论看懂不代表会写本篇文章直接落地实战带大家从零完成 Vue 环境配置、项目搭建、基础使用、运行调试。本文覆盖两种最常用使用场景CDN 快速引入适合入门/小页面和Vite 工程化项目企业开发主流全程无跳过步骤新手跟着做即可成功跑通第一个 Vue 项目。一、Vue 使用的两种方式Vue 作为渐进式框架最大的特点就是灵活、按需使用官方提供了两种接入方式CDN 引入无需安装脚手架、无需打包工具直接在 HTML 中引入适合快速测试、学习语法、简单页面开发工程化搭建Vite基于构建工具创建完整项目支持组件化、路由、状态管理、打包部署适用于所有企业级项目日常学习建议先用 CDN 熟悉语法再用 Vite 熟悉工程化开发。二、方式一CDN 快速配置使用零门槛1. 引入 Vue3 CDN直接在普通 HTML 文件中引入官方 CDN 链接即可全局使用 Vue无需任何依赖安装。!-- 引入 Vue3 最新生产版本 -- script srchttps://unpkg.com/vue3/dist/vue.global.prod.js/script2. 完整入门示例下面是一个可直接运行的完整 Vue 示例包含创建实例、数据渲染、简单事件复制保存为 HTML 直接打开即可运行。3. 核心知识点解读挂载节点Vue 通过mount(#app)绑定 DOM只会控制该节点内部视图不影响页面其他内容插值 {{}}用于渲染文本数据实现数据动态展示指令 clickVue 事件指令替代原生 onclick简化事件绑定响应式数据修改 data 中数据视图自动更新无需操作 DOM优点开箱即用、无需环境配置缺点只适合学习和简单页面不适合大型项目。三、方式二Vite 搭建 Vue3 工程化项目企业主流真正的开发项目全部采用工程化模式目前官方推荐Vite替代老旧的 Vue CLI启动更快、热更新更快、打包体积更小。1. 前置环境安装 Node.jsVue 工程化项目依赖 Node.js电脑必须提前安装否则无法执行命令。下载地址Node.js — Run JavaScript Everywhere推荐版本v16 / v18 稳定版安装验证终端输入node -v和npm -v输出版本号即安装成功2. 创建 Vue 项目官方标准命令打开终端CMD / PowerShell / 终端执行以下命令创建项目# npm 创建项目 npm create vitelatest my-vue-project -- --template vue # 进入项目文件夹 cd my-vue-project # 安装依赖 npm install # 启动本地开发服务 npm run dev3. 命令步骤详解npm create vitelatest调用 Vite 官方脚手架my-vue-project自定义项目名称--template vue指定模板为 Vue3npm 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.vuetemplate div classhello h3{{ title }}/h3 pVue3 工程化组件使用成功/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.com2. 端口被占用关闭占用端口程序或修改vite.config.js端口配置。3. 页面样式全局污染组件 style 标签务必添加scoped让样式只作用于当前组件。八、总结Vue 的配置和使用可以分为两个阶段1.入门学习使用 CDN 直接引入快速熟悉模板语法、响应式、事件、指令零配置成本2.企业开发使用Vite Vue3工程化方案基于单文件组件开发结构清晰、可维护性高、支持工程化部署。掌握本篇的配置流程你就已经具备了 Vue 项目的基础开发能力后续路由、状态管理、UI 组件库的接入都是在该基础项目上拓展。
