终于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
启动
此时文件被打包到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({
})
})
|
其他命令
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进行预编译打包
目录结构
以下的写法皆是使用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