vue.js-使用webpack

项目相关

这是给陈馨妹妹写的书篇*1
项目要求是开发移动app，利用组件化、模块化的开发方式开发一个手机单词本WebApp。

项目功能技术分析

1. 使用vue-resource与后端数据交互
2. 使用vue-router做前端路由
3. 实现单页面引用，最大程度组件化
4. 图标字体使用
5. 移动端1像素边框
6. css sticky footer布局
7. flex弹性布局

需要完善的报告

• 需求分析
• 概要设计（功能图、流程图、函数调用图）
• 功能拓展
  功能1：加入背景图片、背景色、菜单图片
  功能2：根据关键词搜索单词的功能
  功能3：实现单词自动播放
  功能4：调用“有道”等网站的单词本接口实现朗读单词的功能
  功能5：模拟数据（json数据）替代服务器获取的数据
• DIY功能
• 测试过程与结果

webpack引言

webpack是一个前段资源加载/打包工具，根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack可以将多种静态资源JS、CSS、less转换成一个静态文件，减少页面的请求。

webpack基础

webpack是一个开源前端模块构建工具，它的基本功能是将以模块格式书写的多个Js文件打包成一个文件。

webpack安装

在安装webpack签，本地环境必须已经安装node.js和npm
安装webpack和webpack_cli
npm install webpack --save-dev
npm install webpack-cli -g

通过vue-cli构建工具初始化项目目录

-由于Vue项目依赖node.js、npm，因此要先安装node.js和npm，然后安装Vue：npm install -g vue -cli

• 创建项目，打开终端，cd进入要创建项目的目录下，输入vue init webpack 项目名 （例如 vue init webpack words_app)
  
• 安装依赖包，进入项目输入npm install，不过在建项目是最后一个选项好像帮我安装好了
• 输入npm run dev 运行项目
  
  如图所示的结果则成功
  
  如果没有安装vue-router可以直接执行npm install vue-router --save

项目相关插件

vue-router

Vue路由vue-router是官方的路由插件，适用于构建单页面应用。
Vue的单页面应用是基于路由和组件的：路由用于设定访问路径，并将路径和组件映射起来

创建router对象及配置路由

1. 在main.js中引入vue和vue-router

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  components: {
    
     App },
  template: '<App/>'
})

2. 在router目录下的index.js通过Vue的use方式注入Router，并创建Router实例，然后配置路由具体路径。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

vue-resource

vue-resource是vue.js的一款插件，它可以通过XMLHttpRequest或JASON发起请求并处理响应。
可以使用命令行npm install vue-resource安装插件

vue-resource插件的引用

书上写了在main.js(使用需要的插件)中加入resource，import resource from './resource'，但是好像没必要router需要在main中导入是因为在下载配置的时候有生成文件夹，但是vue-resource的下载是没有文件夹的，应该只要在router文件夹下的index.js中配置resource就行了。

index.js：import VueResource from 'vue-resource'

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
Vue.use(VueResource)

//设置路由
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在其他页面或组件中发起数据请求

created(){
    
    
	this.$http.jsonap(url).then(function(response){
    
    //处理数据});
}

生成目录解析

• node_modules 文件夹
  该文件夹下是使用npm install安装生成大文件，都是项目依赖，具体的依赖可以在package.json里看到。
• src文件夹
  项目原目录
• App.vue和main.js
  main.js是项目的入口文件，主要作用是初始化vue实例并使用需要的插件
  App.vue是主组件，所有的页面都是在App.vue下进行切换的，可以理解为所有的路由都是App.vue的子组件

project words_app

相关插件

DrawerLayout

1. 下载DrawerLayout指令 npm install vue-drawer-layout
2. 在main.js中导入

   import DrawerLayout from 'vue-drawer-layout'
   
   Vue.use(DraerLayout)
   

   注有待解决的问题：为什么这个插件要在main.js下use而不是在router的index.js下use
3. 使用 这里参考 DrawerLayout简单使用

使用的注意事项
1.主内容视图一定要是DrawerLayout的第一个子视图
2.主内容视图宽度和高度需要match_parent
3.代码中使用的时候，要调用openDrawer方法来打开
4.必须显示指定侧滑视图的android:layout_gravity属性
android:layout_gravity = “start”时，从左向右滑出菜单
android:layout_gravity = “end”时，从右向左滑出菜单
不推荐使用left和right!!!
侧滑视图的宽度以dp为单位，不建议超过320dp(为了总能看到一些主内容视图)

相关功能实现

css sticky footer布局

我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时，页脚能随着文档流撑开始终显示在页面的最下方。

flex弹性布局

使用flex的容器，内部元素自动成为flex项目，容器有水平的主轴（main axis)和竖直的交叉轴（cross axis)，且使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。

flex容器属性

参考文章 flex弹性布局学习总结

1. flex-direction
   决定主轴的方向，即项目排列的方向：row(默认)、row-reverse、column、column-reverse
   row:主轴为水平方向，项目沿主轴从左至右排列
   column：主轴为竖直方向，项目沿主轴从上至下排列
   row-reverse：主轴水平，项目从右至左排列，与row反向
   column-reverse：主轴竖直，项目从下至上排列，与column反向

2. flex-wrap
   默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式：nowrap(默认)、wrap、wrap-reverse
   nowrap：自动缩小项目，不换行
   wrap：换行，且第一行在上方
   wrap-reverse：换行，第一行在下面

3. justify-content
   决定item在主轴上的对齐方式：flex-start（默认），flex-end，center，space-between，space-around
   当主轴沿水平方向时，具体含义为
   flex-start：左对齐
   flex-end：右对齐
   center：居中对齐
   space- between：两端对齐
   space-around：沿轴线均匀分布
   

4. align-items
   决定了item在交叉轴上的对齐方式：flex-start、flex-end、center、baseline、stretch
   当主轴水平时，其具体含义为
   flex-start：顶端对齐
   flex-end：底部对齐
   center：竖直方向上居中对齐
   baseline：item第一行文字的底部对齐
   stretch：当item未设置高度时，item将和容器等高对齐
   

视口单位(Viewport units)

视口：

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）

视口单位主要包括以下4个：

1. vw：1vw等于视口宽度的1%。
2. vh：1vh等于视口高度的1%。
3. vmin：选取vw和vh中最小的那个。
4. vmax：选取vw和vh中最大的那个。

移动端1像素边框问题

参考文章：移动端1像素边框问题

对于前端开发者来说，要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]。

为什么1px看起来变粗了？

为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用javascript中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取。当然，比例多少与设备相关。
在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致，iPhone的devicePixelRatio==2，而border-width: 1px描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

一般在移动端开发中，常需要在html中head中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页面的viewport的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放。

export default

参考文件： exoport default
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

export跟export default 有什么区别呢？如下：
1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个
4、通过export方式导出，在导入时要加{ }，export default则不需要

var name="李四";
export {
    
     name }
//import {
    
     name } from "/.a.js" 
可以写成：
var name="李四"; 
export default name 
//import name from "/.a.js" 
//这里name不需要大括号

模拟后台数据数据

在前端开发中，对于一些不容易构造或者不容易获取的对象，用一个虚拟的对象来代替以便测试，这个虚拟对象就是mock对象。mock对象就是真实对象在调试期间的替代品，一般用一个接口来描述这个对象。
参考：mock
没有dev-server

为什么要运用Mock模拟数据？直接将数据放在data内部不就可以了吗？这样显得数据过多，后期不利于维护。
moke直接在某个文件夹下创建json文件模拟。
步骤：

1. 在src目录下创建一个mock文件夹，在该文件夹内部创建相关的data.json文件。
2. 在build配置文件夹下找到dev-server.js文件，在内部引入你的json文件,可以按照相关的数据进行分类。
3. 再找到var app = express()这一行，定义一个接口api
4. 接口连接json数据
5. 最后根组件连接该接口api

因为版本问题没有dev-server?

这是因为在新版本中, vue-cli已经放弃dev-server.js，需要在webpack.dev.conf.js文件中配置。

1. 首先, 我们将模拟的数据放在自己能找到的位置, 我放在了buil的同级目录下
   2. 然后新版配置要在webpack.dev.conf.js中找到 const portfinder = require('portfinder')，然后在它的下面添加代码。
   3.找到devServer属性，在devServer中添加代码。
   4.最后重启项目 npm run dev，一定要重启服务，这样就可以在浏览器中访问http://localhost:8080/api/appData接口了。

配置访问接口

设置访问请求

访问接口返回数据

有道单词发音接口

http://dict.youdao.com/dictvoice?audio=+单词