核心内容摘要
AI时代程序员生存指南：从代码民工到人机协作架构师
引言欢迎来到Vue3零基础入门的第1课。
作为前端初学者从最基础的认知到实际搭建项目一步一步把基础打牢
初识Vue3它到底是什么值不值得学首先咱们得搞清楚核心定位Vue3是一套用于构建用户界面的前端JavaScript框架。
简单说原生写HTML/CSS/JS时你需要手动操作DOM比如改文本、加样式而Vue把这些繁琐操作封装好了让你只需要关注“页面该展示什么、交互逻辑是什么”不用再纠结怎么操作DOM。
对新手来说学习Vue3的
核心价值上手快语法贴近原生HTML/JS比React、Angular更友好生态全有大量现成组件/工具开发效率高就业广企业前端岗位中Vue3是高频要求的技能。
Vue3核心优势 与Vue2的极简区别新手版不用记复杂原理只记你能感知到的核心差异性能更好运行更快、占用内存更少底层优化不用深究写法更灵活新增“组合式API”代码组织更自由后面课程会重点讲体积更小支持按需引入打包后的文件更小对新手更友好新增setup语法糖少写很多冗余代码。
前置基础要求这些必须先掌握不然后面会懵Vue3是基于HTML/CSS/JS的框架你得先掌握这些基础不用精通但要会用HTML能写div、p、button、input等基础标签认识class、id、src等属性CSS能写基础样式会用类选择器、行内样式JS核心重点变量声明用let/const别再用var函数定义普通函数、箭头函数数组/对象的基础操作遍历、增删改知道DOM是什么不用会原生DOM操作。
如果这些基础还不熟建议先补
天否则学Vue会很吃力
开发环境搭建Node.js npm一步到位Vue3项目需要依赖Node.js提供运行环境和npm包管理器下载依赖咱们一步步来全程无坑步骤1安装Node.js下载地址https://nodejs.org/选LTS版本比如
x长期支持版更稳定安装双击安装包一路“下一步”即可Windows记得勾选“Add to PATH”自动配置环境变量验证安装打开电脑终端WindowsCMD/PowerShellMac终端输入以下命令能显示版本号就是成功node-v# 查看Node版本比如v
20.
1
0npm-v# 查看npm版本比如
10.
3步骤2npm基础认知npm是Node自带的包管理器核心作用就是下载、管理项目需要的依赖比如Vue、Vite新手先不用学复杂命令记住“npm install”就行后面会用。
零门槛体验Vue3CDN方式写第一个示例不用先搭复杂项目咱们先用CDN直接引入Vue3文件写个极简示例先感受Vue的核心用法新建一个index.html文件复制以下代码用浏览器打开就能看到效果!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我的第一个Vue3示例/title!-- 引入Vue3的CDN文件 --scriptsrchttps://unpkg.com/vue3/dist/vue.global.js/script/headbody!-- Vue要控制的DOM容器 --dividapp!-- 插值表达式展示数据 --/divscript//
从Vue中取出创建应用的方法const{createApp}Vue;//
创建Vue应用实例createApp({//
定义响应式数据后面会细讲data(){return{message:你好Vue3};}})//
把应用挂载到id为app的div上.mount(#app);/script/body/html✅ 效果浏览器页面会显示“你好Vue3”。
简单解释createApp创建Vue应用的核心方法data()定义Vue的响应式数据数据变页面自动变mount(#app)把Vue应用绑定到指定DOM元素上插值表达式把数据渲染到页面。
实际开发用Vite创建Vue3项目CDN适合快速体验实际开发要搭标准化项目Vue官方推荐用Vite新一代构建工具比Webpack快很多步骤1创建项目打开终端输入以下命令新手推荐npm方式# npm方式推荐npmcreate vitelatest my-vue3-demo -- --template vue# 解释# my-vue3-demo → 你的项目名称可自定义比如vue3-first# --template vue → 指定模板为Vue纯JS版本新手友好执行后终端提示“Done”就说明项目创建成功了。
步骤2安装依赖进入项目目录安装项目需要的依赖# 进入项目文件夹cdmy-vue3-demo# 安装依赖npminstall
看懂Vue3项目目录核心文件/文件夹有啥用打开创建好的my-vue3-demo文件夹只讲新手必懂的核心结构my-vue3-demo/ ├── node_modules/ # 项目依赖包npm install下载的不用改 ├── src/ # 你主要写代码的地方核心 │ ├── assets/ # 图片、样式等静态资源会被打包 │ ├── components/ # 组件文件夹后面学组件化会用 │ ├── App.vue # 根组件所有页面内容都嵌套在这里 │ └── main.js # 项目入口文件创建Vue应用、挂载 ├── index.html # HTML入口Vite的特殊处理 └── package.json # 项目配置依赖、启动命令等核心文件解释main.js项目入口负责创建Vue应用并挂载到HTML的#app上App.vue根组件是页面的核心容器package.json里面的scripts字段有dev启动项目、build打包等命令。
启动项目体验热更新超方便步骤1启动开发服务器在项目目录的终端输入npmrun dev执行后终端会显示类似信息VITE v
5.
0 ready in 300 ms ➜ Local: http://
127.
0.
1:5173/ ➜ Network: use --host to expose步骤2访问项目打开浏览器输入终端里的Local地址比如http://
127.
0.
1:5173/就能看到Vue3的默认欢迎页面。
热更新体验新手必试打开src/App.vue文件把里面的“Vite Vue”改成“我的第一个Vue3项目”保存后——浏览器页面会自动刷新不用手动点刷新这就是Vite的热更新开发时改代码超高效。