安装node与nvm

node安装

略

nvm安装

可以切换node版本
略

构建项目

Vite构建

• 使用vite构建项目：

  ╰─ npm init vite@latest
  npx: 1 安装成功，用时 1.413 秒
  ✔ Project name: … vite-demo
  ✔ Select a framework: › Vue
  ✔ Select a variant: › TypeScript
  
  Scaffolding project in /Users/jiawuwei/Desktop/javascript/vue3学习/vite-demo...
  
  Done. Now run:
  
  cd vite-demo
  npm install
  npm run dev

  接着运行 npm install 会安装packge.json中的依赖
  启动命令有三个：dev开发环境启动、build打包命令、preview预览生产环境
  

  Vue脚手架

• 使用vue脚手架构建项目,配置会比vite构建vue项目要全一点,会将router、pinia等等都安装进来。

  ╰─ npm init vue@latest
  npx: 1 安装成功，用时 2.61 秒
  
  Vue.js - The Progressive JavaScript Framework
  
  ✔ Project name: … vue-demo
  ✔ Add TypeScript? … No / Yes
  ✔ Add JSX Support? … No / Yes
  ✔ Add Vue Router for Single Page Application development? … No / Yes
  ✔ Add Pinia for state management? … No / Yes
  ✔ Add Vitest for Unit Testing? … No / Yes
  ✔ Add Cypress for End-to-End testing? … No / Yes
  ✔ Add ESLint for code quality? … No / Yes
  ✔ Add Prettier for code formatting? … No / Yes
  
  Scaffolding project in /Users/jiawuwei/Desktop/javascript/vue3学习/vue-demo...
  
  Done. Now run:
  
  cd vue-demo
  npm install
  npm run lint
  npm run dev

  使用npm run dev 运行项目,访问页面: