一、前言很多前端新人分不清 Vue2 和 Vue3 区别现在企业新项目全部主推 Vue3 Vite本系列从零起步不跳过任何基础今天第一篇先搞定本地开发环境跑通第一个 Vue3 页面。二、前置工具安装安装 Node.jsVue3 项目依赖 npm/yarn 包管理器必须先装 Node。下载地址nodejs.org安装完成打开终端校验版本node-vnpm-v要求版本 Node ≥14.18推荐 16/18 LTS 稳定版。npm 换国内镜像解决下载慢npmconfigsetregistry https://registry.npmmirror.com# 查看镜像是否生效npmconfig get registry三、Vite 创建 Vue3 项目官方推荐比 vue-cli 快Vite 是 Vue 官方新一代构建工具启动、热更新速度远超旧版 webpack。终端执行创建命令# 创建项目项目名自定义 vue3-demonpmcreate vitelatest vue3-demo ----templatevue# 进入项目文件夹cdvue3-demo# 安装依赖npminstall# 启动本地开发服务器npmrun dev四、目录结构极简讲解新手只看核心文件vue3-demo/ ├── src/ │ ├── App.vue# 根组件页面主入口│ └── main.js# 项目入口文件挂载Vue实例├── index.html# 唯一html模板└── vite.config.js# vite配置文件main.js 代码解析Vue3 核心挂载逻辑// 引入createApp创建应用实例import{createApp}fromvue// 引入根组件importApp from./App.vue// 创建实例并挂载到index.html中id为app的dom节点 createApp(App).mount(#app)Vue3 抛弃了 Vue2 的 new Vue() 写法采用 createApp 函数式 API多个实例互不干扰。App.vue 单文件组件 SFCVue 单文件组件分为三块template模板、script逻辑、style样式template!-- HTML结构只能有一个根节点 --h1Hello Vue3我的第一个Vue页面/h1/templatescript setup// Vue3script setup语法糖现在项目默认使用 console.log(vue3 setup 启动)/scriptstyle scoped/* scoped 代表样式只作用于当前组件不会污染全局 */ h1{color:#42b983;}/style五、运行效果执行 npm run dev 终端会输出本地访问地址http://127.0.0.1:5173/打开浏览器即可看到文字至此 Vue3 环境搭建完成。六、今日小结Vue3 推荐 Vite 构建工具核心 APIcreateApp 创建应用单文件组件三大块template/script/stylescoped 样式隔离避免全局污染。
