Vue 组件化开发实践

Andy,Sat Sep 05 2015•javascript

前言：

这是一篇，在开发掘金 (opens in a new tab)的过程中，思考和总结出来，如何使用 Vue.js (opens in a new tab) 和周边工具集合成一套完整舒适的组件化开发流程的文章。

之前有关如何使用 Webpack 和 vue-loader 开发 Vue 应用的文章有：

勾股大叔的 Vue + webpack 项目实践 (opens in a new tab)
尤大大在 CSDN 上发表的 Vue.js：轻量高效的前端组件化方案 (opens in a new tab)
djyde 的 Vue.js 和 Webpack (opens in a new tab)
百度前端小组的 mvvm学习&vue实践小结 (opens in a new tab)

PS：以下的任何内容都是基于 0.12 以上版本，由于 Vue 作者尤大大 (opens in a new tab)正在不断地加入新特性和推出新版本，1.0正式版本即将推出，不保证下文的任何内容会因新版本的内容而覆盖掉。假如本文有任何令你不爽的地方，请拍砖。

组件化模块化开发

在 Vue 当中，组件被当作是一等公民，所以设计和完成一个 Web App 之前，最好先构思好如何构建各个组件，哪些组建需要被复用到，哪些页面是要切换的。在组件化和模块化的原则上，Vue 提供了一些现有流行的预编译工具的扩展，管理 vue 可预编译文件。分别是 Webpack (opens in a new tab) 派的 vue-loader (opens in a new tab) 和 Gulp (opens in a new tab) 派的 vueify (opens in a new tab)。

Vue 希望每个单页应用都可以通过组建系统简化为各个 component。

使用 Webpack 和 vue-loader 开发的例子

在 vue 后缀文件当中，定义了三个 tag，template，script，style。

<template lang="jade">
</template>
 
<script lang="babel">
 
export default {
 
}
 
</script>
 
<style lang="sass">
</style>

从开发的角度看，维护和开发这样的一个 vue 文件，既可以作为一个主页面引用其他的 vue 组建或者切换页，又可以作为一个 component 被其他 vue 文件引用，所有需要的 html，css，javascript 代码都在里面，结合 MVVM 的概念，使用起来非常清爽和简单。

三个 tag 中，各自可以声明自己的预编译语言，安装 Webpack 和自己所需要的 loader 之后，在 webpack.config.js 文件下配置好 loader 和文件出入口就可以了。Webpack 会将所有内容和资源预编译并打包成一个 js 文件。Webpack 的详细使用请看官网 (opens in a new tab)。

Webpack 的前端哲学和观点就是将一切资源（HTML，CSS，Javascirpt，图片）用 import 和 require 模块化引入，并对资源进行所需要的预处理，最终打包一个 js 文件被单页应用引入。Webpack 中有大量的特性和插件可以用来构建大型单页应用，坑略深。下面使用几个简单的 loader 来展示如何使用 Webpack 和 vue-loader 来管理一个初期的单页应用。

npm install --save-dev 安装 babel-loader，jade-loader，sass-loader，vue-loader 即可：

安装好依赖就可以构思如何设置目录了。由于一切资源都被编译成一个 js 文件，所以 public 目录下只需要保存 build 目录即可。

nodemodule // 各种 npm 库
  xxx
  xxx
public
  build
    index.js // Webpack 预编译之后的文件，最终被 HTML 引入
  index.html // 引入 build 目录中的 index.js
vue
  assets // scss 和图片资源
    scss
      uuu.scss
    images
      ooo.png
  helper
    xxx.js // 一些 helper
  index
    components
      zzz.vue // 各种组件
    views
      xxx.vue // xxx页
      yyy.vue // yyy页
    main.js // Webpack 预编译入口
    app.vue // 被 main.js 引用的主页文件
webpack.config.js // Webpack 配置文件

在 webpack.config.js 中的配置：

module.exports = {
    entry: {
        'index': './vue/index/main.js',
    },
    output: {
        path: './public/bulid',
        filename: '[filename].js' // 可以多点切入
    },
    module: {
        loaders: [
            {
              test: /\.vue$/,
              exclude: /node_modules/,
              loader: vue.withLoaders({
                  js: 'babel?optional[]=runtime'
              })
            },
            { test: /\.scss$/, loader: 'style!css!sass },
            { test: /\.css$/, loader: "style!css" },
            { test: /\.js$/, loader: 'babel-loader' }
        ]
    },
    resolve: { // 解决 npm 的依赖问题
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.json']
    },
}