【学习笔记】Vue3 菜鸟入门（一）超详细：介绍、安装、打包、创建项目、目录结构、起步等

关键词：Vue 、Vue 3、Java、Spring Boot、Idea、数据库、一对一、培训、教学
本文主要内容含Vue3介绍、安装、打包、创建项目、目录结构、起步等内容
计划1小时完成，请同学尽量提前准备。本部分主要是理论学习。
有学习需要请联系：xujian_cq
手把手教学、腾讯会议一对一培训，所有代码都要敲一遍，有问题随时暂停解决

1 Vue3介绍

Vue 读作view，就像它的读音一样，Vue的代码编写主要面向视图层，实现前端开发
能实现web、小程序（微信、支付宝、抖音等）、后台管理系统、UniApp（更简化的前端开发、Android、iOS开发）
阅读本文前，您应具备HTML、CSS、JavaScript的基础，并对编程有理解，对网络通信有了解
Vue是一套构建用户界面的渐进式框架。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2 环境安装

-即安装node.js

2.1 下载和安装

此时已更新至v18
下方是下载地址，下载后双击如提示安装即可

https://cdn.npmmirror.com/binaries/node/v18.17.0/node-v18.17.0-x64.msi

2.2 验证

在控制台中输入命令进行验证即可，如下命令和图
出现版本号，即说明安装正常

node -v
npm -v

在这里插入图片描述

2.3 安装VSCode编辑器

vscode是一个比较优秀的代码编辑器
下方是我的下载地址，也可以去官网下载

https://az764295.vo.msecnd.net/stable/8b617bd08fd9e3fc94d14adb8d358b56e3f72314/VSCodeSetup-x64-1.82.0.exe

可以考虑使用IDEA、WebStorm等编辑项目，用起来也很棒

3 创建项目

找一个不含中文、空格、怪异字符的文件夹作为工作目录（workspace）
鼠标不选中任何内容，按住shift不放，鼠标右键点击“在终端打开”或“在此处打开PowserShell 窗口”
在命令行中输入下方命令

npm init vue@latest

接下来如下图操作：
如上图成功创建项目后，可得到下方的文件夹

4 运行和打包

4.1 运行

进入到上述项目目录中，打开命令行
依次执行下方命令
受大环境网络影响，下方过程可能比较慢，请耐心等待

# 这是注释
# 安装依赖命令：
npm install
# 运行开发环境命令
npm run dev

操作过程如下图示意
访问到下图就是成功，真是顺利啊！
edge浏览器可能显示异常，经测Chrome正确显示

4.2 打包

这个是不是讲得太早了？
同样的在项目目录打开命令行，执行如下命令

npm run build

打包成功后，项目目录下会新增一个dist目录，就是可以部署的网站了

5 VSCode应用

5.1 在vscode中打开项目

如下图操作，打开项目文件夹就可以了
打开后如下图

5.2 目录结构

各目录意义如下图
下图来自网络

5.3 VSCode中执行命令

这里不再啰嗦，如下图自上而下操作即可
注意，如果外部的命令行中的测试环境没有关闭，那么这里run dev会失败

5.4 VSCode中修改源代码内容

我们的目标：
上述内容在App.vue中，找到并修改它，保存即可
开发环境会自动刷新页面，如果没有刷新，就在浏览器上刷新一下，即可简单hello world。

6 起步介绍

6.1 程序入口—main.js

我们观察到，刚刚的的首页是App.vue里面的，但它不是正在的入口
vue是基于js逻辑执行的，它的入口在main.js

// 引用包
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 后面这是主要逻辑，APP就是指App.vue，因此程序首页是App.vue中的代码
const app = createApp(App)
app.use(router)
app.mount('#app')