创建 Vue 项目

 Vue 官网 https://cn.vuejs.org/

一、安装 Node.js

在官网安装 Node.js，由于 vue2 已经停止维护，故需安装 18.3 或更高版本的 Node.js

Node.js — Download Node.js®

安装过后在命令行输入 node -v 查看 node.js版本

二、创建一个 Vue 项目

1. 进入你想创建项目的文件夹，并进入 cmd 命令行窗口

2. 输入 npm create vue@latest

该命令会安装并执行 create-vue，他是 Vue 官方的项目脚手架工具

3. 此时输入要创建项目的名称

之后根据提示，选择相应的选项

4. 依次执行给出的三行命令

 

5. 此时按住 ctrl，点击链接就能进入 vue 项目的默认页面

三、分析项目中的文件

使用 vs Code 打开刚才创建的项目

 选择刚才创建的 vue3-demo 并打开，左图为 vue 项目的各级目录，右图为安装的插件

下面是对左图中部分文件/目录的说明

1. .vscode：存放 vscode 的一些相关配置

2. node_modules：存放当前项目在运行时所需要的一些依赖文件（通过 npm install 命令引入的）

3. public：存放静态资源和公共资源，如 favicon.ico 图标

4. src：项目开发主要使用的目录

5. index.html：入口的 html 文件

6. package.json：项目的描述文件

{
  "name": "vue-demo",  // 项目名称
  "version": "0.0.0",  // 项目版本
  "private": true,     // 表示是私有项目
  "type": "module",    // 项目的模块类型
  "scripts": {
    "dev": "vite",             // 运行当前项目
    "build": "vite build",     // 构建当前项目
    "preview": "vite preview"  // 可以在本地预览当前项目
  },
  "dependencies": {
    "vue": "^3.4.29"                 // 项目依赖，vue3
  },
  "devDependencies": {               // 开发环境的依赖
    "@vitejs/plugin-vue": "^5.0.5",  // vite插件
    "vite": "^5.3.1"
  }
}

7. vite.config.js：项目的配置文件