Vue.js 是一款流行的前端框架，用于构建用户界面。Vue CLI（命令行接口）是官方提供的一个脚手架工具，用于快速搭建 Vue 项目。本文将详细介绍如何使用 Vue CLI 和 Vue Router 进行基本操作。
确保已安装 Vue CLI。在安装好 Vue CLI 并执行 `cnpm install`（推荐使用 cnpm，因为它比 npm 更快，且更少出现安装问题）之后，你可以开始创建项目。如果你想要启用 ESLint，这是一个代码风格检查工具，对于保持代码规范很有帮助。但对于初学者，如果不想被代码规范问题困扰，可以选择关闭 ESLint。
启动项目很简单，只需在终端输入 `npm run dev`。然后，浏览器中访问 `localhost:8080` 即可查看运行中的项目。
Vue 项目的目录结构通常包括：
1. `build`：配置构建项目和 Webpack 的地方。
2. `config`：项目开发配置文件。
3. `node_modules`：通过 npm 或 cnpm 安装的依赖包。
4. `src`：你的源代码所在之处。
5. `static`：存放静态文件，这些文件在 webpack 打包时不会被处理。
6. `index.html`：应用的入口文件，通常设置页面标题等元信息。
7. `package.json`：存储项目依赖和配置的 JSON 文件。
`App.vue` 是核心组件，它包含所有非入口页面。每个 `.vue` 文件都是一个组件，由 `template`、`script` 和 `style` 三部分组成。`template` 中的 `div` 包含组件内容，`router-view` 是 Vue Router 用于渲染路由匹配到的组件的地方，类似于 iframe。
Vue Router 是 Vue.js 的官方路由库，用于管理页面间的导航。路由配置文件位于 `router/index.js`。初次打开时可能会有语法错误，因为默认配置可能不支持 ES6 语法。在 IDE 中设置合适的语言版本即可解决。
在 `router/index.js` 中，`routes` 数组定义了所有路由，`path` 是访问路径，`component` 是对应的组件。例如，创建一个新组件 `Test.vue` 并添加到路由中，需要在 `router/index.js` 引入并配置路径。在 Vue CLI 中，所有页面默认嵌套在 `App.vue` 下，但可以通过自定义路由实现任意层次的嵌套。
路由跳转可以通过 `$router` 对象的方法实现。例如，`this.$router.push({ path: '/test' })` 可以跳转到 `/test` 路径，而 `this.$router.go(-1)` 可以返回上一页面。
Vue CLI 提供了快速构建 Vue 项目的便捷方式，Vue Router 则负责管理应用的路由。通过理解和掌握这两个工具，开发者能够高效地开发和组织 Vue 应用。希望这篇文章能对初学者有所帮助，如有疑问或需要进一步交流，请随时提问。感谢您对我们的支持！
- 1
- 2
前往页