vue1.0+es6+webpack脚手架搭建

终于es6学完了，过胖开始写demo，欧耶！学vue的时候恰好发布了2.0版本，着渐进增强的原则，本文先用1.0版本写demo，玩过之后再来一发2.0。
本篇属于webpack、vue语法基础篇，只要肯走坑，框架搭起来不是问题。

webpack

vue语法不是浏览器原生支持的，所以需要做依赖管理和打包
loader机制支持载入各种静态资源（把所有非js资源转换成js，url-loader、css/style-loader）
plugin机制对整个流程进行一定的控制

安装

1
2
3
4
npm install -g webpack
//项目文件夹下
npm init
npm install webpack --save-dev //只需要在生产环境使用

配置
webpack使用起来本质就是做一个配置(webpack.config.js)
这里给出了安装相应加载器的配置：
加载器需要先安装，然后才能运行webpack指令

1
npm install --save xxx-loader

webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
module.exports = {
  entry:'./main.js', //入口文件
  output: { //输出
    path: 'dist',
    publicPath: '',
    filename: 'bundle.js'
  }
  module: {
    loaders: [{
      test: /\.vue$/,
      loader: 'vue',
      exclude: /node_modules/
    },
    {
      test: /\.css$/, 
      loader:"style-loader!css-loader"
    },
    {
      test: /\.(png|jpg|gif)$/, 
      loader:"url-loader"
      exclude: /node_modules/,
      query: {
        limit: 1000
      }
    },
    {
      test: /\.js[x]?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader',
      query: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
      }
    }]
  }
  resolve: { //搜索默认路径
    alias: {
      js: path.join(__dirname,""),
      src: path.join(__dirname,"")
    },
    root: [
      path.join(__dirname,"")
    ],
    modulesDirectories: ['node_modules']
  },
}

entry表示输入，output表示输出
/.css$/匹配xx.css文件，/.css/匹配xx.css以及xx.css.zip文件
?aa=bb，表示将aa设置为bb
webpack优先搜索root目录，再搜索modulesDirectories

启动

1
webpack

此时文件被打包到dist目录下，新建index.html默认入口文件，index.html中引入bundle.js文件，此时的dist文件夹就是打包后的目录文件夹。

文件分离按需加载
require.ensure会产生额外的boundle，按具体情况进行配置。

1
2
3
4
5
6
7
require.ensure(["jquery","imgScrll"],function(require){
  var $ = require("jquery");
  require("imgScroll");
  $("#container").scroll({ 
    //do sth
  })
})

其他命令

1
2
webpack -p //uglify
webpack -w //watch

vue-loader

vue-loader是vue作者提供的加载器。
teplate-name有多种，这里使用webpack相关标准来定制。
init时需要按照要求输入文件相关，官方提供了几个模板，支持ESLint以及Mocha（依赖包略多，有点担心升级麻烦）

1
2
npm install -g vue-cli
vue init <template-name> <project-name>

vue

demo01简单形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="vue.js"></script>

<div id="demo">
  <img title="{{name}}" alt="{{name}}" v-attr="src:url">
</div>

<script>
  var vm = new Vue({
    el: '#demo',
    data: {
      name: 'ginny',
      url: 'http://guoningyan.com/test.png'
    }
  })
</script>

思考

“如果想绑定的特性是像 img[src] 这样的不能在 html 中随意初始化的 (可能默认会产生预期外的网络请求)，没关系，有 v-attr=”src: url” 这样的写法，把被绑定的数据里的 url 同步过来。”（引用自勾三股四的blog）
之前写过同样是 MVVM 框架的 angular ，数据绑定写法类似，用的是ng-src=””，使用过程中没有发现上面的问题，这点以后研究一下再补上。

demo02xx.vue格式
这种格式将模板（jade etc..）、样式（css、sass etc..）、脚本（es6 etc..）集合成一整个文件，每个文件是一个组件，预编译文件使用lang说明文件格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="container">
    <other-component></other-component>
  </div>
</template>

<style>
html{
  background-color:red;
}
</style>

<script>
import OtherComponent from './components/other-component.vue'

let testDemo = {
  components: { OtherComponent },
  data() {
    return {
      msg: 'test'
    }
  }
}
export default testDemo;
</script>

使用vue-loader进行预编译打包

1
npm run dev

目录结构
以下的写法皆是使用webpack模板后的目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- build
- node_moudles
- src
	- assets
	- components (每个组件对应.vue文件 )
	- App.vue (主vue)
	- main.js
- static
- test
- .babelrc //babel配置
- eslintrc //eslint配置，建议使用airborb
- config.js //生产建构路径
- gulpfile.js //gulp监听
- index.html //启动后的首页
- package.json

先将组件写在components中，每个.vue文件对应一个组件，然后通过打包工具集成。gulpfile文件配件见附录勾三股四的博客。

附录参考资料
阮老师的webpack很好上手
git上某个webpack简明教程
vue+webpack 勾三股四的blog
vue-loader
eslint