-
1.1 参考文档：
-
1.2 搭建项目之创建项目必要的文件和文件夹
注意:创建的项目的文件夹不要放在中文目录下，项目的名称不要有中文
src: 项目源代码所在目录 main.js 项目打包的入口文件 App.vue 启动项目之后，用户看到的第一个组件
package.json：项目的描述文件 webpack.config.dev.js ： 开发阶段的webpack的配置文件
-
1.3 搭建项目，当更改了App.vue中内容的时候，实现热重载
1、写好App.vue中的代码 写在template之间 2、在main.js中写代码 2.1、导入App.vue 2.2、使用Vue框架，把App.vue作为第一个让用户看到的组件 安装vue: cnpm i vue --save 创建根实例，在根实例中，让我们的框架第一个显示App.vue 3、在webpack.config.dev.js中配置打包的指令 入口 loader: 安装`vue-loader`对我们.vue结尾的文件打包 4、使用`html-webpack-plugin`，来根据参照文件(template.html)，生成一个index.html 4.1、先写好template中的内容，里面要写上id=app的div 4.2、安装`html-webpack-plugin`插件，在webpack.config.dev.js中写好代码 参考:https://github.com/jantimon/html-webpack-plugin 5、使用 webpack-dev-server 打包 在我们项目的根目录下，运行下面的代码: webpack-dev-server --progress --config webpack.config.dev.js --open --port 6008 --hot 解释: --progress 查看打包进度 --config xxx.js 指定打包的配置文件 --open 打开默认浏览器 --port 6008 指定打开的端口，如果不指定，默认是8080 --hot 启动热重载，告诉vue-loader可以进行热重载了注意： 开发阶段，生成的index.html及bundle.js都发布到
webpack-dev-server这个服务器上面去了，我们在项目里面是看不到生成的实实在在的这些文件的 -
1.4 相关插件
mint-ui 基于Vue的移动端组件库:https://mint-ui.github.io/#!/zh-cn
mui UI组件库：http://www.dcloud.io/hellomui
moment 日期处理类库：http://momentjs.cn/docs/
预览图片：
- vue-preview，基于vue，地址：https://github.com/LS1231/vue-preview
- photoswipe，纯原生，没有依赖于任何第三方库，地址：http://photoswipe.com/documentation/getting-started.html
-
1.5 App.vue
头部
1、集成mint-ui到项目中 安装 main.js中，导入并且集成，Vue.use(xxx) 2、在需要的地方去使用它 App.vue的头部底部TabBar
实现中间的路由部分
1、集成vue-router到项目中 安装 main.js中，导入并且集成，Vue.use(xxx) 2、在需要的地方去使用它 html中 router-link：触发路径 router-view：占位符 js中 定义/新建组件 创建路由对象，设置路由规则(自动帮助我们注册) 把我们创建好的路由对象，注入到根实例中 -
1.6 home.vue
轮播图
1、利用vue-resource获取轮播的数据 把vue-resource集成到我们项目中来 安装 在main.js中导入并且Vue.use(xxx) 在需要的地方使用它 2、使用mint-ui中的swipe组件来实现轮播功能 参考:https://mint-ui.github.io/docs/#/zh-cn2/swipe九宫格布局
1、把mui集成到项目中(假设它没有上传到npm) 把mui的dist目录下面的那些需要的内容，拷贝到当前目录下 在main.js导入其样式文件 2、在需要使用它的地方，使用 home.vue新闻列表
1、点击首页的新闻资讯按钮，跳转到新闻列表组件 在home.vue中，点击新闻咨询，使用router-link触发 创建newslist.vue main.js中写代码，设置路由规则 2、使用vue-resource发送网络请求 this.$http.get(xxx).then() 注意: 必须在main.js中使用Vue.use(VueResource) 3、渲染新闻列表 -
1.7 newslist.vue
1、渲染
2、对服务器返回的时间，进行过滤
全局的过滤器 + momentjs 全局过滤器的语法: Vue.filter('过滤器名称',处理函数) moment的语法 moment(时间的原始数据) format(要格式化的时间格式字符串) -
1.8 newsinfo.vue
1、点击了新闻列表中的某一项，跳转到新闻详情组件，并且要带上新闻id newslist.vue中通过router-link实现跳转 创建newsinfo.vue并且在main.js中导入，并且设置路由规则 2、拿着新闻id获取新闻详情的数据 3、渲染组件 -
1.9 显示和隐藏TabBar和导航栏的返回按钮
要解决问题的关键点:
监控路由的变化，获取当前的路径 在App.vue中，通过`watch`监控`$route`，为什么要把监控的代码写在App.vue中 因为我们导航栏的返回按钮和底部TabBar是写在App.vue中的步骤:
1、根据路径来显示和隐藏导航栏上面的返回按钮 创建一个返回按钮 给返回按钮添加点击事件，并且通过编程式导航，进行回退 参考:https://router.vuejs.org/zh-cn/essentials/navigation.html 2、根据路径来显示和隐藏底部的TabBar 还可以使用动态绑定class的方式来实现 注意点：动态添加class也是根据boolean值 参考:https://cn.vuejs.org/v2/guide/class-and-style.html -
1.10 新闻详情组件中显示评论内容
父组件:新闻详情组件
子组件:评论子组件
1、在父组件(新闻详情)包含/集成评论子组件 1.1、新建一个评论子组件 1.2、在父组件中导入评论子组件 1.3、在父组件的`components`注册 1.4、在父组件的template中，以自定义标签的形式使用子组件 2、父组件把新闻id传递到子组件中去 接收方(评论子组件): 通过props来声明我要的值 发送方(新闻详情父组件): 在template中使用子组件的时候，通过属性名称=值的方式来传递 3、子组件拿着新闻id去完成他自己的业务逻辑 3.1、搭建子组件的UI界面 3.2、完成评论数据的加载(包括加载更多) 3.3、提交评论 -
1.11 图片分类 & 图片列表
1、通过路由导航到photolist.vue
1.1、创建photolist.vue 1.2、在main.js中导入photolist.vue，设置路由规则 1.3、在home.vue中，通过声明式导航，进行路由跳转 注意点:我们在.vue文件中，除了通过template写内容，还可以通过自己实现js中的render函数来写组件内容2、实现图片分类
2.1、先获取数据 2.2、渲染3、根据分类id加载图片列表
3.1、监听分类id的点击 3.2、根据id获取对应id的图片列表数据 3.3、渲染 -
1.12 商品详情组件
1、创建goodsinfo.vue 2、在main.js中，导入并且设置路由规则 3、在goodslist.vue，通过声明式导航，触发路由 完成商品详情数据的展示 1、根据id获取数据 2、渲染数据 -
1.13 子组件(subnumber.vue)传值给父组件(goodsinfo.vue)
原理:通过自定义事件传递值
步骤:
1、创建subnumber.vue 2、在父组件中集成subnumber.vue 3、子组件当它内部数据变化之后，传递给父组件子组件传值给父组件
接收方:(父组件) 在使用子组件的地方，使用v-on监听事件，写好事件处理函数，并且这个函数是写在父组件的methods中的 发送方:(子组件) 使用this.$emit('自定义事件名称',值) 触发注意点:
1、自定义事件千万不要和系统的，比如click、mouseover等冲突 2、我们父组件中监听自定义事件的时候，写处理函数的时候，只需要写函数名称即可，千万不要加`()`调用 -
1.14 非父子关系组件传值
原理:通过自定义事件传递值
达到的目的：
当我们点击了goodsinfo.vue加入购物车按钮，把值传递到App.vue组件中去，并且更新徽标的值步骤:
1、先在App.vue的TabBar购物车那一个标签中，写一个徽标的span(默认值0) 2、从goodsinfo.vue中把商品的数量值，传递到App.vue【重点】 2.1、创建一个公共的Vue对象(bus) 2.2、在发送方(goodsinfo.vue)，通过bus.$emit('自定义事件名称',值) 2.3、在接收方(App.vue)中，通过bus.$on('自定义事件名称',处理函数) 3、App.vue根据接收到的值，更新徽标上面的数组，如果是0隐藏，非0就显示 遇到了一个问题，就是在处理函数中，通过this想更改badge，但是失败了，原因是里面this,现在代表的是bus对象 解决方式： 1. 可以在外面先把this保存起来 2. 可以使用es6的箭头函数（箭头函数本身并没有this） 3. 使用bind改变函数内部this的指向 -
1.15 Vuex
全家桶: vue、vue-router、vuex
作用:类似于仓库的作用，在项目中进行全局存取数据用的
解释:
状态 === 数据 状态/数据 管理模式Vuex 是什么？
专门给vue设计的状态管理模式，可以利用它，在全局中对数据进行增删改查Vuex的五个核心概念：
state:最终存储数据的地方 getter:从仓库中取 mutation:同步往仓库中存，直接可以操作state中数据 action:异步往仓库中存，不可以直接操作state中的数据，必须借助与mutations再操作 module : 可以创建多个仓库使用Vuex
1、把vuex集成到项目中 1.1、安装 1.2、在main.js中导入并且通过Vue.use(xxx) 2、创建仓库 2.1 通过 const store = new Vuex.Store({}) 创建仓库 2.2 把创建好的仓库，注入到根实例，这样整个项目才能使用 3、在项目中，通过写代码往仓库中存取数据在项目中，使用Vuex存取数据
以goodsinfo.vue中 点击加入购物车为例，把数据存到仓库 在shopcart.vue 中 取出仓库中的值，展示 在App.vue中，取出仓库中放的商品的总个数，展示 1、先写state，它的值是一个对象，在这个对象里面，要写好我们存数数据的名称，它的格式是什么？比如数组，对象... 2、写好mutations里面的代码，它也是一个对象，对象里面是函数（函数第一个参数是state，这是固定的写法） 调用必须使用 this.$store.commit('方法名称',载荷) 3、写好getters中的代码，getters中也是一个对象，对象里面也是一个方法（函数第一个参数是state，这是固定的写法）并且要有返回值 调用必须使用 this.$store.getters.函数名称 4、写actions中的代码注意：
1、state、getter、mutation、action都是以对象的形式书写代码 2、在mutations中写函数的时候，第一个参数是固定的，就是state,从第二个参数开始，就是载荷(说白了就是参数) 3、在getters中写的方法，必须要有返回值，函数中的第一个参数也是state完成购物车页面的展示及操作
比如我现在存储到仓库中的数据是下面这样滴 [{goodsId:87,count:2}, {goodsId:88,count:3}, {goodsId:87,count:3}]步骤:
1、先搞定数据 1.1、先把 [{goodsId:87,count:2}, {goodsId:88,count:3}, {goodsId:87,count:3}] var tempObj = {87:5,88:3}//因为后面获取的数据没有count，弄成这样的格式是为了方便取到count值 var tempArray = [87,88].join(',') var idsString = 87,88 发送网络请求 最终数据格式： [{ id:87, title:'华为', count:5,// 网络请求回来后动态添加 ... },{ id:88, title:'苹果', count:3, ... }] 2、渲染视图 见代码 3、对购物车的操作 3.1、一进来计算总数量和总价格 3.2、根据开关的状态，来重新计算总数量和总价格，并且设置开关的启用和禁用状态 3.3、删除我们购物车中的某一项商品 弹出一个确认删除框 把该商品从仓库中删除(根据商品id来删除) 重新渲染(更改模型数据) //重新计算总数量和总价格(将计算的函数调用放在update钩子函数里可以不做这步) 注意:我们统计总数量和总价格是根据开关的状态来的，只统计开启的商品项 -
1.16 使用webpack将项目打包成生产模式
1、在项目根目录下创建一个生产阶段的webpack.config.prod.js配置文件
注意:生产阶段配置文件中的内容，就是在开发阶段的基础上，多写一些针对生产环境的配置2、在package.json中增加一个scripts的配置
"build":"webpack --progress --config webpack.config.prod.js"3、对我们项目中es6的代码转es5[babel]
参考:https://babeljs.io/docs/setup/#installation 选择webpack构建工具 3.1、安装包 cnpm i babel-loader babel-core babel-preset-env --save-dev 3.2、使用 在当前根目录下，创建一个babel的配置文件，写好预设代码 { "presets": ["env"] } 在webpack.config.prod.js中对js进行转换 { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /vue-preview.src.*?js$/, loader: 'babel-loader' }4、对bundle.js和index.html压缩
压缩bundle.js 参考:https://cn.vuejs.org/v2/guide/deployment.html 在 webpack.config.prod.js 中配置 new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false //压缩警告 }, comments: false //去掉版权信息等注释 }) 压缩index.html 参考:https://github.com/jantimon/html-webpack-plugin https://github.com/kangax/html-minifier#options-quick-reference minify:{ collapseWhitespace:true,//压缩空格 removeComments:true,//去除注释 minifyJS:true,//压缩js minifyCSS:true//压缩css }5、对bundle.js进行优化
达到的目的： bundle.js 尽可能小，可包含我们自己写的源代码 什么原因造成他过大? 项目中用的图标 第三方包 项目中的样式6、 把项目中的图片和第三方包及样式，从bundle.js抽离出来
1、从bundle.js中抽离图片(见代码) 2、从bundle.js中抽离第三方包(见代码) entry: 改成对象，多入口 output 改成多出口 plugin 见代码 3、从bundle.js中抽离第三方样式 使用一个第三方插件 https://github.com/webpack-contrib/extract-text-webpack-plugin 4、vue提供了路由懒加载（把每个组件从bundle.js中抽离出来，等需要的时候，再按需加载...） 第一步：安装 https://babeljs.io/docs/plugins/syntax-dynamic-import/ 第二步：把router.js中，导入组件的方式改成 const Foo = () => import('./Foo.vue') -
1.17 将打包好dist文件夹里的内容发布到云服务器上