使用vue-cli和vue-router创建简单列表页教程

"这篇教程介绍了如何使用Vue 2.0和vue-router构建一个简单的列表页面。首先通过vue-cli搭建项目环境，然后在main.js中引入Vue、App组件和路由配置，同时利用vue-resource进行网络请求。在App.vue文件中设置导航链接，并定义路由组件。" 在开发Web应用时，Vue.js是一个流行的前端框架，而vue-router则是Vue生态中的官方路由管理器，用于处理页面间的导航和状态管理。本示例展示了如何结合两者创建一个简单的列表页面。 1. **环境搭建**： 首先，需要安装Vue CLI全局工具，这可以通过运行`npm install -g vue-cli`来完成。接着，使用`vue init`命令初始化一个新的项目，例如`vue init demo1`，然后进入项目目录`cd demo1`。接下来，安装项目依赖包，执行`npm install`，最后启动开发服务器，运行`npm run dev`，浏览器访问`http://localhost:8080`预览应用。 2. **项目结构**： - **index.html**：这是应用的入口文件，包含`<div id="app">`作为Vue实例挂载点。 - **main.js**：这里是应用的核心，导入Vue、App组件和路由配置，并实例化Vue对象。 - **App.vue**：组件入口文件，通常包含应用的主要布局或导航元素。 3. **引入依赖**： 在`main.js`中，除了引入Vue之外，还引入了`./App`和`./router`。`./router`通常包含了路由配置，Vue Router会自动查找名为`index.js`的文件（不可更改文件名）。 4. **配置Vue Router**： 在`./router/index.js`中，可以定义路由规则，如各个页面（列表页、详情页等）的路径、对应的组件等。Vue Router通过`<router-link>`组件创建链接，通过`<router-view>`标签渲染匹配到的组件。 5. **使用Vue Resource**： `import VueResource from 'vue-resource'`引入了vue-resource，这是一个HTTP客户端，允许Vue组件直接发起HTTP请求。Vue.use(VueResource)激活插件，使Vue实例能使用`this.$http`进行网络请求。 6. **App.vue组件**： 这里定义了应用的顶级组件，包含导航链接（如Home和About）和`<router-view>`，后者用于显示根据当前路由动态渲染的子组件。`<router-link>`的`to`属性指定了链接目标。 7. **创建列表页组件**： 在`./router/index.js`中，你需要定义一个路由，如`{ path: '/list', component: List }`，并在项目中创建`List.vue`组件来展示列表数据。列表页组件可以从API获取数据，使用`this.$http.get()`发送请求。 8. **路由导航**： 当用户点击导航链接时，vue-router会根据`to`属性的值更新当前路由，并重新渲染`<router-view>`，显示对应组件的内容。 总结来说，这个示例演示了从零开始创建一个基于Vue 2.0和vue-router的简单应用的基本步骤，包括环境配置、路由设定、组件创建和网络请求。通过理解这些概念，开发者可以构建更复杂的单页应用。