第 1 章: 准备 1.1. 项目描述 1) 此项目为外卖 WebApp(SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术 4) 采用模块化.组件化.工程化的模式开发 1.2. 项目功能界面 1.3. 技术选型 1.4. 前端路由 1.5. API 接口 1.6. 项目 vue 组件 1.7. 你能从此项目中学到什么? 1) 熟悉一个项目的开发流程 2) 学会组件化.模块化.工程化的开发模式 3) 掌握使用…

一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\nodejs\) - 可以通过node提供的npm包管理器安装vue脚手架 - 通过npm安装淘宝镜像cnpm,将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://regis…

前言 公司的这个项目从去年底启动.至今经历winform版本与当前的VUE两个版本,前后经历不足3个月的时间.从纯技术角度来看,推进速度都很优异.究其原因,大抵我们都是喜欢“偷懒”的程序员,把能封装.能公用的代码尽可能的整合起来.多写一行代码都觉得遭罪.一路懒下来,倒也有所收获.接下来进行一些总结,不求大而全,只求小而精,不积小流无以成江海. 数据转换之道 今天我要分享的是云仓VUE项目中,快速简单地实现接口返回的列表数据自动在前端完成键值数据转换方案.接下来先贴一张图,说明我们的解决方案,如下…

vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 再下载npm 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 6.4.1 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下:…

二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置选项,此时一直回车就好: 然后进入项目文件夹,输入: npm run serve 出现以上情况,则说明运行成功,此时,在浏览器打开链接http://localhost:8080/,会看到如下界面: 然后安装element-ui(一定要在该项目根目录下安装): npm i element-ui -s…

六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本,请运行以下命令之一: npm install --save-dev webpack npm install --save-dev webpack@<version> 如果你使用 webpack 4+ 版本,你还需要安装 CLI: npm install --save-dev webpack-cl…

八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vue成功解决问题 id命名不能包含html保留字引起的错误: 修改方法很简单,只需要将保留字id稍作改变即可 return返回对象问题: 错误原因很容易看出,是因为此处的return返回的数据应该是一个对象: 修改后错误排除:…

十.徒手撸一个vue下拉左侧二级导航 先附上最终效果图: vue代码: <div class="dropdown-menu-explore" v-on:mouseover="addDropdownContent(this)" v-on:mouseout="removeDropdownContent(this)" > <span class="dropdown-menu">探索</span>…

十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能.简单点理解,就是凡是将数据用状态管理模式来存储,在用到该数据的地方,只要一处地方发生变化,另一处也会发生变化,这样就解决了vue中非父子组件…

十六.vue-lazyload的使用 首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图片懒加载 import VueLazyload from 'vue-lazyload' //vue-lazyload配置 Vue.use(VueLazyload, { preLoad: 1.3, //发生错误时显示的图片 error: require("./assets/error.gif"…