要想用vue开发项目,会简单的语法还不够满足项目的需求,首先我们考虑的就是如果用vue快速投入的项目中,关注亮点
1、如何更好的支持组件开发
2、如何构建打包程序,例如我们用es6开发

一、组件开发

看过了组件的看法文档,先写两个例子

1
2
3
4
5
6
7
8
<div id="test-container">
    Hello {{msg}}
    <my-component></my-component>
    <my-component1></my-component1>
</div>
<template id="component-1">
    <div>我是一个自定义的组件dddddddddddddddddddd</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var MyComponent = Vue.extend({
    template: '#component-1'
});
// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent);
var MyComponent1 = Vue.extend({
    template: '<div>我是一个自定义的组件1,我的模板文件在html里面哦</div>'
});
// 全局注册组件，tag 为 my-component
Vue.component('my-component1', MyComponent1);
new Vue({
    el: '#test-container',
    data: {
        msg: 'Great Boy'
    }
})

目前看来组件实现比较方便呀, 那怎么传值呢????

看看props 传值

1
2
3
4
5
6
7
8
9
10
11
<h2>组件props 传值</h2>
<div id="props-container">
    Hello {{msg}}
     <my-component2 msg='[{"name":"测试一"},{"name":"测试二"}]' title="title值"></my-component2>
</div>
<template id="component-2">
    <div>我是一个自定义的组件,传过来的值是{{title}}</div>
    <ul>
        <li v-for='item in msg|jsonParse'>{{item.name}}</li>
    </ul>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.filter('jsonParse', function (value) {
    return JSON.parse(value);
});
var MyComponent2 = Vue.extend({
    props:['msg','title'],
    template: '#component-2'
});
// 全局注册组件，tag 为 my-component
Vue.component('my-component2', MyComponent2);
new Vue({
    el:'#props-container',
    data:{
    }
})

查看demo
传值也比较简单, 我觉得vue成功的的一部分原因就在于它的灵活性以及简单优美.

二、组件打包合并

当今的前端发展非常迅速,有非常好用的打包合并工具,例如gulp grunt webpack browserify fis等等构建工具,
由于在百度工作了一段时间,所以对fis还是比较熟悉,但是webpack目前还没用过,因为fis我已经觉得非常好用了,它就是有点重.
说说他们的区别吧
1) gulp和grunt更倾向于小工具,做一些打包合并压缩,以及你可以去写一些自己的插件,来优化构建.
2) browserify webpack 是模块化发展的结果 , 一开始主要还是在线编译的seajs 和 requirejs, browserify webpack 可以实现预编译, 在后台编译好,省去了在线编译加载多个文件的方式.
3) fis 主要是比较完善的构建工具,百度前端团队开发,支持打包合并压缩以及模块化的编译等等.

新： 使用脚手架工具 vue-cli 可以快速地构建项目：单文件 Vue 组件，热加载，保存时检查代码，单元测试等。
官方推荐,对于大型项目，为了更好地管理代码使用模块构建系统非常必要。推荐代码使用 CommonJS 或 ES6 模块，然后使用 Webpack 或 Browserify 打包。
Webpack 和 Browserify 不只是模块打包器。两者都提供了源码转换 API，通过它可以用其它预处理器转换源码。例如，借助 babel-loader 或 babelify 代码可以使用 ES2015/2016 语法。
如果你之前没有用过它们，我强烈推荐你阅读一些教程，了解模块打包器，然后使用最新的 ECMAScript 特性写 JavaScript。

vue-cli方案

官方给的脚手架工具vue-cli 安装方法:

intall

1
$ npm install -g vue-cli

Usage

1
$ vue init <template-name> <project-name>

Example:

1
$ vue init webpack my-project

安装完毕后
在命令行执行 vue init webpack my-project

生成的目录结构

打开md文件,看任何一下项目一定要扫一眼md文件,这里有作者对项目的描述以及用法等.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test

文件夹目录src里存放的源码.vue的源码,我们用这个脚手架就可以开发前端程序了,还是比较简单,我觉得这个脚手架开发spa应用没啥问题,
但是如果开发跟后台对接的,肯定就不行了,需要跟后台结合一下,需要把发布后的路径发布到后台可以访问的模板路径就好了.

三、vue 打包demo