vue3 - 创建一个vue3工程

官方文档： 快速上手 | Vue.js

vue 是什么

一套用于构建用户界面的渐进式JavaScript 框架

（把获取到的数据变成用户看到的界面）

Vue 特点

1. 采用组件化模式，提高代码复用率，且让代码更好维护

2. 声明式编码，让开发人员无需直接操作DOM，提高开发效率

3. 使用虚拟DOM+优秀的DIff算法，尽量复用DOM节点

安装环境（npm）

• 检查系统npm ,node 版本，版本过低可能无法创建工程
• nodejs 下载:  https://nodejs.org
• 下载对应系统安装包，直接安装/覆盖安装 即可

192:~$ node -v
v21.7.3

192:~ $ npm -v
10.5.0

创建Vue工程

• npm create vue@latest
• npm init vue@latest

192:$ npm init vue@latest

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称： … vue3_hello
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Prettier 用于代码格式化？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

正在初始化项目 /Users/shy/vchen/vue/vue3/vue3_hello...

项目初始化完成，可执行以下命令：

  cd vue3_hello
  npm install
  npm run dev

192:$ npm create vue@latest

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称： … vue3_hello2
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

正在初始化项目 /Users/shy/vchen/vue/vue3/vue3_hello2...

项目初始化完成，可执行以下命令：

  cd vue3_hello2
  npm install
  npm run dev

启动Vue工程

• 根据工程创建完成后给出的提示命令运行即可
• 进入创建的 vue工程目录 cd vue_project_dir/
• 安装工程依赖

  • 192:$ npm install
    
    added 63 packages in 8s
    
    7 packages are looking for funding
      run `npm fund` for details
    

• dev环境 启动项目
  • 浏览器访问 本地启动的端口 即可看到工程页面
  • 命令行 输入  h，可以查看对应命令

  • 192:$ npm run dev
    
    > vue3_hello2@0.0.0 dev
    > vite
    
    
      VITE v5.2.9  ready in 475 ms
    
      ➜  Local:   http://localhost:5173/
      ➜  Network: use --host to expose
      ➜  press h + enter to show help
    h
    
      Shortcuts
      press r + enter to restart the server
      press u + enter to show server url
      press o + enter to open in browser
      press c + enter to clear console
      press q + enter to quit
    
    o
    

•