Vue实战硅谷外卖 Vue-router

1) 此项目为外卖 Web App (SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术 4) 采用模块化、组件化、工程化的模式开发 Vue.js 是一款流行的前端JavaScript框架，它以简单易用、高效和可复用性而著称。在这个"Vue实战硅谷外卖Vue-router"项目中，我们将深入探讨如何利用Vue全家桶，包括Vue.js、Vue-router、Vuex（虽然未在描述中提及，但通常在大型项目中会使用）以及相关工具来构建一个功能丰富的Web应用程序。以下是关于这个项目的一些关键知识点： 1. **Vue CLI**: Vue CLI是Vue官方提供的一款快速搭建Vue项目的基础工具，它集成了Webpack和许多预配置的插件，如Babel（用于转换ES6代码），使开发者能够专注于应用的核心逻辑而不是基础设置。使用命令`vue init webpack gshop`可以创建一个新的Vue项目，并通过`npm install`安装依赖，然后运行`npm run dev`启动本地开发服务器。 2. **项目结构**：Vue项目通常包含src、public、node_modules等核心目录。src中包含app入口文件（main.js）、组件、路由、样式等；public中一般存放静态资源，如 favicon.ico 和 index.html。 3. **Vue Router**: Vue Router是Vue.js的官方路由库，它允许我们定义和管理应用中的不同视图。在`router/index.js`中，我们导入Vue Router并定义路由规则，如各个页面组件（Msite、Search、Order、Profile），然后在main.js中引入并挂载到Vue实例上。 4. **编码与测试**：在开发过程中，`npm run dev`会启动一个热重载的开发服务器，自动编译和打包代码，让我们可以在`http://localhost:8080`上实时查看改动。`npm run build`则用于打包生产环境的代码。 5. **Stylus和样式管理**：Stylus是一种CSS预处理器，提供了变量、函数、嵌套等功能。我们可以通过`npm install stylus stylus-loader --save-dev`安装Stylus，然后在Vue组件中使用`