安装 Node + Vue + vue CLI 创建 Vue 应用

Vue CLI 创建应用

前提条件

• 熟悉命令行
• 安装 Vue 需要先安装 Node.js

1. 安装 Node.js

1.1. 下载 Node.js

• 访问 Node.js 官网

• 点击网站上的“Download”按钮
• 选择适合你的操作系统的版本（Windows 64位或32位）

1.2. 运行 Node.js

• 下载完成后，运行下载的 .msi 安装程序
• 按照安装向导的指示进行操作，通常只需点击“Next”和“Install”即可
• 在安装过程中，通常选择添加 npm 到你的环境变量中，这样可以在任何地方使用 npm 命令

1.3. 验证安装

• 安装完成后，打开命令提示符（CMD）或 PowerShell，输入以下命令来检查 Node.js 和 npm 是否正确安装

node -v
npm -v

• 如果这些命令返回了版本号，那么说明 Node.js 和 npm 已经成功安装

2. 安装 Vue CLI

• 打开命令提示符（CMD）或 PowerShell，运行以下命令来全局安装 Vue CLI

npm install -g @vue/cli

• 验证安装

vue -V

3. 创建 Vue 项目

• 使用 Vue CLI 创建一个新的 Vue 项目

vue create vue-demo-v1

• 按照提示选择配置，建议选择 Vue3，因为 Vue2 已在 2023 年 12 月 31 日停止维护

‌4. 运行 Vue 项目

• 进入项目目录

cd vue-demo-v1

• 启动项目

npm run serve

• 浏览器中输入http://localhost:8080或者http://127.0.0.1:8080或者http://你的电脑IP:8080即可打开并显示你的 Vue 应用

5. 项目结构

vue-demo-v1/
├── node_modules/（存放 npm 或 yarn 安装的所有依赖包）
├── public/（存放静态资源，如 index.html、图片 等）
│   ├── index.html（如果使用 vite+vue 创建的项目，index.html 与 public 同级）
│   └── favicon.ico
├── src/（源代码目录，包含所有的 Vue 组件、JavaScript、CSS等）
│   ├── assets/（存放静态资源，如图片、字体等）
│   │   ├── images/
│   │   └── styles/
│   ├── components/（存放 Vue 组件，通常按照功能或模块划分子文件夹）
│   │   ├── Header.vue
│   │   └── Footer.vue
│   ├── views/（项目里没有，实际后续开发要有，存放页面组件，通常对应于路由的路径）
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── router/（项目里没有，实际后续开发要有，存放 Vue Router 的配置文件，通常是 index.js）
│   │   └── index.js
│   ├── stores/（项目里没有，实际后续开发要有，存放 Vue 的状态管理配置，包括 store 文件夹和可能的 modules 文件夹）
│   │   ├── index.js
│   │   └── modules/
│   ├── App.vue（根 Vue 组件，所有的子组件都将嵌套在这个组件内）
│   └── main.js（存放 Vue 的状态管理配置，包括 store 文件夹和可能的 modules 文件夹）
├── .gitignore
├── package.json（项目的元数据和依赖信息）
├── package-lock.json
├── jsconfig.json
├── README.md（项目的说明文档）
├── vue.config.js (Vue 创建项目的配置文件)
└── babel.config.js (可选，项目的入口文件，负责创建 Vue 实例并挂载到 DOM 上)

6. Vue 相关网站

• 官方网站：https://cn.vuejs.org/
• GitHub：https://github.com/vuejs/vue