Vue3极简2025版教程笔记

知识补充

nodejs类似于maven依赖，有远程仓库
需要依赖nodejs
使用VITE打包组件，类似于maven功能
使用vs code

安装nodejs

需要魔法加速

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.6/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
#设置镜像
export NVM_NODEJS_ORG_MIRROR=https://mirrors.ustc.edu.cn/node/

#查看远程nodejs版本列表
nvm ls-remote 

# Download and install Node.js:
nvm install 24

# Verify the Node.js version:
node -v # Should print "v24.18.0".

# Verify npm version:
npm -v # Should print "11.16.0".

#为 npm 设置国内镜像
npm config set registry https://registry.npmmirror.com

# Download and install pnpm:
corepack enable pnpm
# Verify pnpm version:
pnpm -v

#使用官方脚手架创建vue项目
npm create vue@latest
#经过一系列选择
# 项目初始化完成，可执行以下命令：
cd vue-demo
npm install
npm run dev

#启动项目成功后按o，回车会使用浏览器主打开主页
#默认本地端口5173
#http://localhost:5173/
#启动项目成功后按q退出

vue3新特性

组合式API
更好地支持TypeScript
状态存储框架Pinia
新组件

快速上手

node_modules :nodejs下载的vue项目依赖，类似与maven，如果启动不起来可以删掉这个文件夹依赖重新install下载。
.vscode :项目工作区的缓存配置
public :放静态资源，比如图片等。
src :源码目录
- index.html :页面访问的入口。
- package.json :项目的依赖项目配置
  - scripts :项目的启动脚本
    - lint ：代码检测
- vue文件包含三大部分
- template 模板
- script 脚本
- style 样式
dist : npm run build 打包出来用于部署的目录