✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🎯 你正在阅读「半路出家玩前端」系列文章 🎯✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🔥 弹简特 个人主页
❄️ 个人专栏直通车：
✨ 靠热爱去书写自己，靠勇敢去书写生活！
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🌟 博主简介:
文章目录：
一、npm常见的命令
1、项目初始化
生成 package.json 项目配置文件（等价于 Maven 的 pom.xml，里面有对应的依赖）
npm init
交互式填写项目信息，一步步生成配置文件npm init -y（y代表的是yes）
快速初始化，所有选项使用默认值，直接生成package.json
2、安装依赖
注意：只有已经有了 package.json 配置文件之后我们才可以安装依赖
语法：
npm install 依赖名称 或者 npm i 依赖名称
比如：安装vue
下载完成之后：多了node_modules 和 package-lock.json
其中package-lock.json存放详细的依赖信息，而node_modules 存的是你下载的依赖。
2.1 常用命令
npm install 包名/npm i 包名
安装项目依赖（写入 dependencies）npm install 包名@版本号
安装指定版本的依赖npm install -g 包名
安装全局依赖，所有项目均可使用npm install
根据package.json安装所有依赖
其中注意npm i在哪里使用？
场景如下：
3、升级依赖
npm update 包名
将指定依赖升级到最新兼容版本
4、卸载依赖
npm uninstall 包名
卸载项目依赖，并自动更新配置文件
5、查看依赖
npm ls
查看当前项目的所有依赖npm list -g
查看全局安装的所有依赖
6、运行脚本命令（npm run）
语法：
npm run 运行脚本的键
什么事运行脚本中的键呢？请看下述：
然后怎么运行呢？如下所示：
二、vue3初体验
1、要有一个基本的标签
2、导入vue框架
首先我们的vue是一堆js写的，那么你想要人家写的框架，你就得导进来呀 👇
3、创建vue对象
4、设置值
你创建vue对象干什么？我们就是为了设置值呀，怎么设置？
你看好：
然后给我在里面设置对应的值：
那么请问：你设置这个msg的值干什么？有什么用？就只是干巴巴的设置？
咱们肯定是要在页面展示的呀，那谁来展示？肯定是html标签来展示呀，所以你得将这个msg值返回给html标签，👇
那么，此时，你返回就完了吗？肯定不是呀，你说让他给html标签展示，那你告诉他是哪一个标签了么？没有啊，所以我们就得告诉他你要在哪一个表情中展示，所以下一步就是：挂载
5、挂载
如何访问？
使用{``{变量}}访问👇
结果：
注意事项：
那么后续我们学习vite构建工程化之后，我们是不需要写什么creatApp和setup以及mount的，我们直接写属性和函数就行
三、使用vite构建vue前端工程化
vite是构建工程化的脚手架，帮我们创建工程，帮我们提前设置好一些依赖
1、创建工程
如何使用vite构建vue项目呢？
输入：npm create vite
输入项目名
选择vue框架
选择语言JavaScript
选择yes，然后回车
此时我们的工程就创建出来了：
结果：
2、如何下载依赖和运行
如果依赖还没有下载：
1）进入项目目录下
2）使用 npm i 下载依赖
3）使用npm run dev 运行开发环境的项目
浏览器访问
3、vite的作用
- 快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力；
- 统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量；
- 代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑；
- 自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等；