使用Vue.js 2.0搭建单页应用：从构建到部署

入门请参考这篇文章：Vue构建单页应用最佳实战

在此记录下在我使用Vue.js 2.0开发较大型的单页应用时遇到的困难。

写文章不容易，如果这篇文章对你有帮助，请给我的github仓库加个star~

github项目地址

项目结构

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

Vue相关

Vue.js 2.0

载入静态资源

参考链接：

Handing Static Assets

static/

目录下的文件不会被webpack处理，可以在index.html中直接引用其中的资源

Transition Effects

参考链接：

Transition Effects

Vue提供多种在items被插入，更新或者从DOM中移除时应用过渡效果的方式。它包括以下的方式：

自动应用CSS transitions 和 animations

集成第三方CSS animation 库，例如Animate.css

使用JavaScript 直接在transition 钩子期间操纵DOM

集成第三方JavaScript animation 库，例如Velocity.js

在此处，我主要讲讲使用transition为mdl-spinner添加CSS动画的经验。

Vue提供4种应用在 enter/leave 过渡上的class：

v-enter

: 进入的初始状态。在元素被插入前应用，一帧后被移除。

v-enter-active

: 进入的激活和结束状态。在元素被插入前应用，在过渡/动画结束后移除。

v-leave

: 离开的初始状态。在离开过渡效果触发的时候应用，一帧后被移除。

v-leave-active

: 离开的激活和结束状态。在离开过渡效果触发的时候应用，在过渡/动画结束后移除。



上代码：

<transition name="spinner-move">
<div v-show="$store.state.common.loading">
<div class="mdl-spinner mdl-js-spinner is-active loading"></div>
</div>
</transition>

.spinner-move-enter-active {
position: relative;
animation: move-in .5s;
}
.spinner-move-leave-active {
position: relative;
animation: move-out .5s;
}
@keyframes move-in {
0% {
top: -50px;
}
50% {
top: 10px;
}
100% {
top: 0px;
}
}
@keyframes move-out {
0% {
top: 0px;
}
50% {
top: 10px;
}
100% {
top: -50px;
}
}

Watchers

参考文章：

vm.$watch( expOrFn, callback, [options] )

vuejs怎么watch对象里某个属性的变化呢？

观察Vue实例上的一个表达式或者computed function的改变。

我的需求是，设置Tip组件出现的条件。

1.在vuex中的state中设置一个属性及其mutation：

const state = {
tip: {
message: '',
actionHandler: function (event) {},
timeout: 2000,
actionText: ''
}
//
}

const mutations = {
[SET_TIP] (state, tip) {
state.tip = tip
}
//
}

2.新建Tip.vue:

<template>
<div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</template>

<script>
export default {
data () {
return {
//将Store.state绑定在data上
data: this.$store.state
}
},
watch: {
// 但state中的tip改变时调用showTip方法
'data.doc.tip': 'showTip'
},
methods: {
showTip () {
let snackbarContainer = document.querySelector('#snackbar')
snackbarContainer.MaterialSnackbar.showSnackbar(this.data.doc.tip)
}
}
}
</script>

3.在需要时commit：

commit(types.SET_TIP, {
message: err.statusText,
actionHandler: function (event) {},
timeout: 2000,
actionText: 'Undo'
})

Computed Properties

参考链接：

Computed Properties

我想使loading组件根据当前路由清空展示不同的样式，由于判断表达式比较复杂且不止在一个地方调用了该判断表达式，我使用了computed属性：

computed: {
forLogin: function () {
return this.$route.path === '/login'
}
}

<div>
<transition name="spinner-move">
<div v-show="$store.state.doc.loading && forLogin" class="loading-wrapper loading-login-wrapper">
<div class="mdl-spinner mdl-js-spinner is-active loading"></div>
</div>
</transition>
<transition name="spinner-move">
<div v-show="$store.state.doc.loading && !forLogin" class="loading-wrapper">
<div class="mdl-spinner mdl-js-spinner is-active loading loading-common"></div>
</div>
</transition>
</div>

通过Props与

<router-view>

子组件通信

参考链接：

Props

通过阅读官方文档可知，Vue.js可以通过Pros将数据从父组件中传递到子组件，但官网给的例子一般是这样的：

Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

props传递的数据直接在模板中使用，但是，开发中还会经常遇到另外一种情况，在

<script>

中引用props的数据，事实上，官方文档也给了例子：

props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}

然而，非常遗憾的是，这段代码在我这里跑不通，于是，我就去研究Vue实例的生命周期图：



注意右下角的圆环处，当数据改变时，virtual DOM 会重新渲染更新，结合上面提到的props传递的数据直接在模板中使用可以正常引用，所以我想到了下面这种方式：

<template>
<div>
<span style="display:none;">
{{initialCounter}}
</span>
</div>
</template>

<script>
export default {
props: ['initialCounter'],
updated () {
// props中的值只有在updated钩子中才能正常访问
// next(this.initialCounter)
}
}
</script>

模板中引用props的值，会触发updated钩子，此时this.initialCounter已经被初始化可以被引用了，至于为什么要多次一举，也许就要问尤大大了。

vue-router

<router-view>

正确渲染

<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>

<router-view>

组件是一个 functional 组件，渲染路径匹配到的视图组件。

<router-view>

渲染的组件还可以内嵌自己的

<router-view>

，根据嵌套路径，渲染嵌套组件。

踩到的坑：

如果在某个组件中需要嵌套组件，记得加上

<router-view>

不要试图跳过父组件，直接访问更上层的组件或是该类组件的子组件。惨痛教训，chrome会报这个神奇的bug：



Vue.js的作者尤雨溪说：

vue-router组件渲染和virtual DOM更新构成了竞争情况

使用懒加载异步加载组件

参考链接：

懒加载 · GitBook

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

导航钩子

参考链接：

导航钩子 · GitBook

今天在试图在使用百度地图api的时候，动态加载远程script遇到了大麻烦的回调，最后用组件内的钩子的钩子解决。

代码：

beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
next(() => {
loadScript()
initialize()
})
}

动态路由匹配

参考链接：

动态路由匹配 · GitBook

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：

<div id="app">
<p>
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/bar">/user/bar</router-link>
</p>
<router-view></router-view>
</div>

const User = {
template: `<div>User {{ $route.params.id }}</div>`
}

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

const app = new Vue({ router }).$mount('#app')

上面是官方文档中的例子，可以发现在传递路径参数的时候，使用的是固定的值，那么，当需要传递动态的路径参数时该如何做呢？

答案是使用v-bind 的 JS 表达式，直接上例子：

<table>
<tbody>
<tr v-for="(item, index) in items">
<th >{{ index }}</th>
<td>
<router-link v-bind:to="{ name: 'example', params: { id: index }}">{{ item }}</router-link>
</td>
</tr>
</tbody>
</table>

解释一下，`:to`属性中的值会被解析成js表达式，所以例子中的`index`可以被识别成当前循环元素的索引，进而体现路径匹配中的动态性。

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

借助 `vue-router`，使用嵌套路由配置，就可以很简单地表达这种关系。

在由`vue-cli`创建的项目中， `` 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 ``。例如，在 User 组件的模板添加一个 ``：

const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})

上面的例子可以符合简单的业务逻辑，但是一旦业务逻辑变得复杂起来，就需要自己摸索一定的技巧了。这就是这篇文章下一个探讨的话题

嵌套路由与动态路由匹配结合使用

前面探讨了动态路由匹配和嵌套路由的基本使用方式，但是在现实的开发过程中，难免会遇到二者相结合的情况，接着上面的例子：

/user/:id/posts/:id/comments
+------------------+
| User             |
| +--------------+ |
| | Posts        | |
| | ------------ |
| |   Comments   | |
| | ------------ | |
| +--------------+ |
+------------------+

上面的例子嵌套了2层路由，且包含了2层的动态路由匹配，一般的方法无法解决这个问题，需要一些特殊的方法。

其实上述提到过，:to中包含的是js表达式，所以可以以此为切入点，将:to的值与`computed`中的变量绑定：

<router-link :to="link">
test
</router-link>

computed: {
link () {
return '/user/' + this.$route.params.id + '/chart/' + this.id
}
},

使用重定向模拟嵌套二级菜单效果

前面已经提到过，APP.vue中包含的

<router-view>

作为顶层路由渲染出口，其子组件中可以包含嵌套的

<router-view>

路由渲染出口。按照上面的思路，我们可以轻松的实现二级菜单甚至多级菜单。

现在考虑一下这种情况，在我们的应用中，侧边一个Drawer作为一级菜单，页面顶部一个TapBar作为二级菜单，类似这样：



我们可以把二级菜单的内容放置在顶层路由渲染出口中渲染，这么做有几个好处：

<router-view>

层级减少，提高渲染性能；

在特定的需求下，二级菜单内容在APP.vue中渲染更合适；

可以利用vue-router的

.router-link-active

属性添加链接被点击后效果的CSS样式；

那么，该如何实现呢？

可以使用重定向进行模拟

将二级菜单的路由设置成2层路由，但该组件依旧在顶层的出口渲染；

'/children1' => '/parent/children1'
'/children2' => '/parent/children2'

使用重定向将虚拟的一级菜单路由重定向到某个真实子路由上；

{
path: '/parent',
redirect: '/parent/children1'
}

在一级菜单的链接中使用虚拟的一级菜单路由；

<router-link to="/parent">一级菜单</router-link>

以上！

JavaScript问题

setTimeout

中的

this

今天在项目开发过程中遇到大坑了，鼓搞了两小时发现是`setTimeout`中的`this`被自动指向了`window`的原因，还是基础没学好。。。

贴上部分代码：

// 因为setTimeout中的this指向window，所以得耍个trick，保存当前对象this
let that = this

setTimeout(function () {
that.loadingDisplay = 'none'
}, 1000)

使用

classList

改变

element

的

class

今天想做点击后使选中链接高亮，其他链接自动恢复默认的样式的功能。一开始直接修改通过`element.style` 实现效果， 在Chrome下测试通过，但是在Edge和IE中都会报错，经查证发现严格模式无法修改只读属性，于是在MDN上发现使用`classList`改变`element`的`class`的方法

上代码：

if (this.lastElement !== null) {
this.lastElement.classList.remove('activate')
}
this.lastElement = event.target
event.target.classList.add('activate')

SVG绘制圆环图

参考文章：

小tip: 使用SVG寥寥数行实现圆环loading进度效果

使用 `stroke-dasharray` 属性实现如下效果：



图中的小圆点使用是用 `` 画的小实心圆:

<circle cx="240" cy="94" r="3" fill="#9e9e9e"></circle>

虚线使用 `` ：

<line x1="240" y1="88" x2="240" y2="55" stroke="#9e9e9e" stroke-width="2" stroke-dasharray="2 2" />

页面滚动添加动画

为scroll事件添加监听器

使用scrollTop获取当前视口顶部距离页面顶部的高度：

let scrollTop = document.getElementById('scroll').scrollTop

将scrollTop与window.innerHeight相加获得当前视口底部距离页面顶部的高度：

let scrollBottom = scrollTop + window.innerHeight

根据特定div的高度为其设置相应的动画：

if (scrollTop > 20 && scrollBottom < (ribbonHeight + servicesHeight / 2)) {
intro1.classList.add('vertical-anim')
device1.classList.add('vertical-anim')
device2.classList.add('vertical-anim')
}

大功告成！

CSS问题

overflow属性

参考链接：

overflow - CSS | MDN

overflow 属性规定当内容溢出元素框时发生的事情。
语法

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

当我在设计登录界面的卡片框的时候，我想在基本的卡片框上方露出一小截白边，这个技术使用`:before`伪类可以坐到，但也需要在改容器中设置`overflow`属性的值。

**`overflow: hidden;`效果：**



**`overflow: visible;`效果：**

::before伪类

参考链接：

::before (:before) - CSS | MDN

::before 会创建一个作为当前元素子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。

/* CSS3 语法 */
element::before { 样式 }

/* (单冒号)CSS2 过时语法 (仅用来支持 IE8) */
element:before  { 样式 }

/* 在每一个p元素前插入内容 */
p::before { content: "Hello world!"; }

::after伪类

参考链接：

::after (:after) - CSS | MDN

::after伪元素匹配一个作为当前元素最后一个子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。

我使用::after伪类为当前激活链接添加一个标记，效果如图：

box-shadow 属性

参考链接：

CSS3 box-shadow 属性

使用下面这个box-shadow属性：

box-shadow: #666 0px 0px 10px;

为载入进度圆环加上如下阴影效果：

绝对定位的水平居中

最近遇到一个需求，需要把用户头像嵌入到父级div的兄弟div上，完成的效果图如下：



一开始采用方式是``使用相对布局，父元素加上属性`text-align: center;`,但是无效，而且相对布局中的元素就算被改变位置之后，依旧会占据原来的位置，造成大面积留白，非常丑，故弃之。

后来尝试使用绝对布局，因为给``设定的宽度和高度是固定的，于是就可以结合left属性进行水平居中。

left: 50%;
margin-left: -50px;

这两行代码的意思是，首先设置``的最左边距离左边框50%，然后因为半径是50px，所以通过设置margin-left将元素整体左移50px，使圆心水平居中。

Flex 布局

参考文章：

Flex 布局教程：语法篇

我使用下面的代码：

justify-content: center;

对齐我的TapBar：



两端对齐，项目之间的间隔都相等，并且在交叉轴上居中对齐：

justify-content: space-between;
align-items: center;

部署

双十一的时候阿里云9.9元买云服务器，可惜没抢到，但是后来发现有个学生优惠49包半年也还还挺便宜于是就购买之。

服务器的操作系统：CentOS 6.5 64位，所以下面从0开始讲解Vue.js 2.0工程部署在操作系统为CentOS 6.5服务器的步骤。

首先，你当然得有台服务器……躲过了双十一还是得挨一刀啊=.=

Linux中创建用户

由于到手的是一台裸机，所以一切都得自己配，不过也好，温习一下以前学习的Linux基础知识~

*众所周知，生产环境中的Linux系统不推荐直接使用root 帐号，这是因为root权限最大，你的任何误操作就可能使数据找不回来，而普通用户对系统的操作是有限的。*

对于一个刚到手的新服务器，你的第一次SSH连接应该是以root的身份登录的，你需要手动添加一个普通用户。

下面讲解添加一个普通用户的基本步骤：

在Linux系统中，只有root用户才能够创建一个新用户，如下的命令将新建一个登录名 ‘xxx’的用户。

sudo useradd xxx

完成了这一操作后，你还应该使用passwd命令为其设置一个初始密码。输入该命令后，会系统会请求输入密码。

sudo passwd xxx

在生产环境中，我们经常需要提升普通用户的权限以完成某种操作，这时就要用到

sudo

命令，如果你按照上述的步骤，你应该会遇到下面这个错误：

XXX is not in the sudoers file

这是因为 ‘xxx’用户不在`sudoers`组中。
我参考这篇文章解决了这个问题：

Linux有问必答：怎样解决“XXX is not in the sudoers file”错误

现在，一个具有sudo权限的普通用户已经创建好了。

安装Node.js

众所周知，Linux的各种发行版的包管理器中的Node.js版本都相当之老，这也给新手带来了不少麻烦。
我尝试过以下几种安装Node.js的方法：

yum install, 版本太老。

nvm, 安装的都在本地，不能加 sudo的,sudo 回去/usr/bin 或/usr/local/bin下面去找的，遇到权限问题很蛋疼！

直接编译最新版的Node.js源代码，同时也要安装好多依赖包，相当麻烦。

直接下载使用最新的编译好的Node.js，方便快捷。

我参考了这篇文章：

在centOS 6下部署node

安装Nginx

vue-cli生成的项目可以使用

npm run dev

命令直接让程序跑起来，但是生产环境中还使用开发环境的服务器是不行的，我们需要的服务器性能要高，占用内存要小，并发性要好，于是我的目光投向了服务器界大名鼎鼎的Nginx.

在安装Nginx的工程中遇到的问题和安装Node.js类似，我参考下面这篇文章成功的安装的Nginx:

CENTOS 6.5 配置YUM安装NGINX

配置Nginx访问应用

Beginner’s Guide

在工程目录下使用如下代码生成dist目录

npm run build

参考官方教程添加一个server节点，其中的root参数绑定dist文件夹的绝对路径即可。

其中一开始遇到一个bug，

nginx 403 forbidden

查证后发现是权限问题，参考下面这篇文章，把nginx的启动用户改成目录的所属用户即可。

nginx 403 forbidden 二种原因

未完待续……