node下载
node下载应该很简单吧，正确找到官网，然后找到对应的版本，然后下载安装包，如果是msi的就不用配置环境变量，如果是zip的就需要配置环境变量
node下载的官网 https://nodejs.org/zh-cn/download
我的node和npm版本
node -v
v22.11.0
npm -v
10.9.0
如果你们的node版本和我的差异很大，有可能在创建vue项目或者运行一些命令的时候，会有差异或者报错
npm换源
很多人反馈，自己拿到一个前端项目，npm install总是报错
其中一个原因大概率就是npm没有换源，当然还有其他的原因，这个我们后面讲工程化的时候会讲到
默认的npm源是国外的，下载依赖的时候有可能会报错
所以可以换一下源
# 查看当前源
npm config get registry
# 更换npm源为国内淘宝镜像
npm config set registry https://registry.npmmirror.com/
vue3工程创建
使用npm init命令创建vue3的工程
npm init vue
如果后续你们生成的版本差异很大的话，有可能一些api不一样，要和课程里面保持一致的话可以直接复制我的package.json
{
"name": "vue3_study",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build"
},
"dependencies": {
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@tsconfig/node22": "^22.0.1",
"@types/node": "^22.14.0",
"@vitejs/plugin-vue": "^5.2.3",
"@vue/tsconfig": "^0.7.0",
"npm-run-all2": "^7.0.2",
"typescript": "~5.8.0",
"vite": "^6.2.4",
"vite-plugin-vue-devtools": "^7.7.2",
"vue-tsc": "^2.2.8"
}
}
网上还有npm init vue@版本 的写法，这个版本指定的是create-vue的版本，也就是生成vue工程的那个代码版本，并不是vue的版本，这个一定要注意，之前我也以为这个版本是vue的版本
vue3项目结构
看看vue3的项目结构
public // 静态资源文件夹，构建时文件会原封不动复制到dist根目录
favicon.ico // 网站页签图标文件
src // 项目源代码核心目录，所有业务代码、组件、逻辑均存放于此
assets // 项目静态资源目录，Vite会对其中资源做编译（如图片hash命名）
components // 全局/通用组件目录，存放可复用的Vue组件
router // 路由配置目录，存放Vue Router的路由规则、路由守卫等相关代码
stores // Pinia状态管理目录，存放全局状态的store模块
views // 页面级组件目录，存放对应路由的页面组件
App.vue // 根组件，项目所有页面的父容器，可配置全局布局、路由出口等
main.ts // 项目入口文件，创建Vue实例、挂载根组件、配置全局插件等
.gitignore // Git版本控制忽略文件配置
env.d.ts // TypeScript类型声明文件，解决TS类型提示问题
index.html // 项目入口HTML文件，包含Vue挂载的根节点
package.json // 项目依赖配置文件
README.md // 项目说明文档
tsconfig.app.json // TypeScript针对Vue应用代码的编译配置，仅作用于src目录下的业务代码
tsconfig.json // TypeScript根配置文件，全局通用的TS编译规则
tsconfig.node.json // TypeScript针对Vite/node端代码的编译配置
vite.config.ts // Vite构建工具的配置文件
前期先对这些文件有个印象就行，不用死记每个文件是干啥的
后期需要配置哪个文件的时候，就重点讲一下
