使用 Vue CLIVue项目·也就是·如何添加路由和页面到 Vue 项目中

作者：网络发烧程序猿 | 发布时间：2025-06-27 |

使用 Vue CLI 创建 Vue 项目

创建一个 Vue 项目就像搭积木一样简单，Vue CLI 就是那个帮你快速搭建的“积木工具”。下面我带你一步步来玩转它！

安装 Vue CLI

得确保你的电脑上装了 Node.js 和 npm（也就是 Node 的包管理器）。你可以这么检查： ```bash node -v npm -v ``` 如果没装，就去 Node.js 官网下载安装吧！然后，用 npm 把 Vue CLI 安装到全局： ```bash npm install -g @vue/cli ``` 安装好之后，用这个命令来确认一下： ```bash vue --version ```

初始化项目

接下来，用 Vue CLI 创建一个新的项目。命令是这样的： ```bash vue create 项目名称 ``` 这里的“项目名称”你可以自己起，想叫啥就叫啥。

选择项目配置

创建项目的时候，Vue CLI 会让你选配置。你可以用默认的，也可以手动选。比如： - Vue 2 或 Vue 3：想用哪个版本就用哪个。 - TypeScript 支持：如果项目需要，可以选这个。 - CSS 预处理器：比如 SCSS 或 Less，看个人喜好。 - 路由和状态管理：比如 Vue Router 和 Vuex，如果需要动态页面和状态管理，就选它们。

安装依赖

选好配置后，Vue CLI 会自动帮你下载安装依赖。这个过程可能得等一会儿，具体时间看你的网速。

启动开发服务器

一切就绪后，进入项目文件夹，然后启动开发服务器： ```bash npm run serve ``` 浏览器里访问就能看到你的 Vue 项目啦！

项目结构介绍

一个 Vue 项目一般包括以下文件和目录： - `src`：存放源代码，比如组件、路由、状态管理等。 - `public`：放静态文件，比如 HTML 模板、图片等。 - `package.json`：定义项目的元数据和依赖项。 - `node_modules`：存放安装的 npm 包。 - 配置文件：比如 `.env`、`.vuepress` 等。

常见问题和解决方法

创建 Vue 项目可能会遇到一些小麻烦，不过别担心，以下是一些常见问题和解决方法： | 问题 | 解决方法 | | --- | --- | | 网络问题 | 使用镜像源，比如淘宝镜像：`npm config set registry | | 权限问题 | 使用 `sudo` 命令：`sudo npm install -g @vue/cli` | | 版本问题 | 确保使用最新版本的 Node.js 和 npm |

总结和建议

创建 Vue 项目简单又方便，Vue CLI 真的是神器！选好配置，定期更新依赖，让你的项目更稳定、更安全。