【Vue3速成】01-npm+vue初体验+vite构建vue工程化

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🎯你正在阅读「半路出家玩前端」系列文章🎯
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🔥弹简特 个人主页

❄️个人专栏直通车：

• 💻软件测试入门记
• 📱野生测试修炼手册 | APP 专项测试笔记
• 🔌接口测试从入门到跑路
• ☕一个后端的 JavaEE 续命指南
• 🛜网络原理续命手册
• 🐍Python 从零摸索日记

✨靠热爱去书写自己，靠勇敢去书写生活！
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🌟 博主简介:

一、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的作用

1. 快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力；
2. 统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量；
3. 代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑；
4. 自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等；