Node.js + Express + Vue.js 自动化开发环境部署

正文

今天打算用vue.js来做练手项目。之前配置了前端开发的环境，因为我现阶段开发都是基于Node.js+Express4.x的。而且之前用gulp来配置环境，于是想把vue.j的自动化开发配置放在gulp里。

但是经过查找，发现vue.js的作者是支持用webpack的,我找到了勾股的文章,写的不错,但是坑大！直接套用他的方法是直接报错,而且错误提示很奇怪，找不到一个文件路径。

后来在github上找，发现基于vue gulp关键词的内容基本上还是很少。捣鼓了几个小时，最后放弃把vue.js的自动化流程写到gulp里。而是采用webpack。

最后目录结构是这样的

 vue-gulp
├── Gulpfile.js
├── app.js
├── bin
│   └── www
├── node_modules

├── package.json
├── public
│   ├── images
│   │   ├── build
│   │   └── src
│   ├── javascripts
│   │   ├── build
│   │   └── src
│   │       ├── components
│   │       │   ├── app.vue
│   │       │   ├── b.vue
│   │       │   └── main.js
│   │       └── jquery.js
│   └── stylesheets
│       ├── build
│       └── src
├── routes
│   ├── index.js
│   └── users.js
├── views
│   ├── error.jade
│   ├── index.jade
│   └── layout.jade
└── webpack.config.js

Gulpfile.js的内容还是老样子，这是普通前端环境自动化。

webpack.config.js里的内容如下：

module.exports = {
entry: "./public/javascripts/src/components/main.js",
output: {
path: "./public/javascripts/build/",
filename: "vueApp.js"
 },
module: {
loaders: [
  { test: /\.vue$/, loader: "vue" },
]
},
 devtool: 'source-map'
}

主入口文件为main.js，它来包含所有的组件并加到dom里。

Main.js:

var Vue = require('vue')
var appOptions = require('./app.vue')
var app = new Vue(appOptions).$mount('#app')

app.vue相当于一个组件，b.vue是第二个组件，被app所包含。

app.vue:

<style>
  comp-a h2 {
  color: #f00;
 }
</style>

<template>
  <h2 class="red"></h2>
  <comp-b></comp-b>
</template>

<script>
var MyComponentB = require('./b.vue');
module.exports = {
  data: function () {
    return {
      msg: 'Hello from Component A!' 
    }
  },
    components: {
    'comp-b': MyComponentB
  }
}
</script>

b.vue:

<style>
.t {
  color: red;
}

</style>

<template>
  <h2 class="t"></h2>
</template>

<script>
module.exports = {
  data: function () {
    return {
      msg: 'Hello from Component B!'
    }
  }
}
</script>

之后组件是在components/目录下开发，写完后，用main.js包含进来或者用其他vue加载。

在views/index.jade里面加上#app 就可以确保让组件加到这个ID内。

在layout.jade里面把vueApp.js加载。

这样就完成了自动化流程。

开发开发的时候只要在根目录下

 执行命令
 gulp 
 webpack -w 就可以自由的开发了。

我的vue的自动化流程就是通过Main.js入口来加载一些后缀.vue的组件。

Table of Contents