ZEROMAKE | keep codeing and thinking!
2016-11-04 | vue

vue 不使用构建工具

看到各种 vue 入门全部都是 webpack 的我表示没有什么问题。但是却发觉无法将这些 webpack 的工作流推荐给其它人。一说 npm,webpack,babel 什么的纷纷表示太麻烦。

也许他们还是更喜欢 cdn 引入,手写 js 吧。所以这个就是纯粹的 vue 不用 webpack 不用 babel。直接用我们喜欢的 es5 的 js 写。等到觉得 vue 的好再推荐他们 webpack 什么的。

然后模块化还是需要一个所有我选择了 requirejs。

零、文章中的一些定义

  1. 所有的 js 与 css 库都会使用 cdn。
  2. 一些需要修改的库无法使用 cdn 的会说明。
  3. cdn 使用 bootcdn 对应国内环境
  4. 这里面说到的 vue 源码均为 2.0.3
  5. 源码下载: 地址

一、Hello World

hello_world.html

1
<!DOCTYPE html>
2
<html lang="zh">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
<title>hello_world</title>
8
<script
9
type="text/javascript"
10
src="https://cdn.bootcss.com/vue/2.0.3/vue.js"
11
></script>
12
</head>
13
<body>
14
<div id="app">
15
<!--你可以在这里写模板也可以在js的Vue实例中写-->
16
</div>
17
<script src="js/hello_world.js"></script>
18
</body>
19
</html>

以上开头引入了 vue 并在 body 中写了一个 id 为app的 div,其中 vue 的模板我们可以直接写在这个 div 中也可以写在 js 的 vue 实例的 template 中。然后在 body 中的最后引入入口 js/hello_world.js。

js/hello_world.js

1
new Vue(
2
el:'#app',
3
data: {
4
mes: 'hello vue'
5
},
6
template: '<span>{{mes}}</span>'
7
);

el 表示 vue 的实例挂载点,看了 vue 源码使用的是document.querySelector,(vue/src/platforms/web/util/index.js#15)。
选择失败会使用document.createElement,(vue/src/platforms/web/util/index.js#20)为我们生成一个 div。所以document.querySelector能支持的 vue 就能支持。

data 表示 vue 实例的属性。可以被 template 通过{{}}表达式访问

template 表示模板里面的文字会被编译后转换到挂载点上

效果图

hello_world

和我说的一样,但是你会说这样的不需要框架也能做啊,当然 vue 的效果不止这点先说个它的数据绑定看下面的 hello_world2

源码:

在 git 仓库的 hello_world 分支中

二、HelloWorld2

js/hello_world.js

这边不需要修改其他的仅需要 js 即可

1
new Vue({
2
el: "#app",
3
data: {
4
mes: "hello vue"
5
},
6
template: '<div>\
7
<input v-model="mes" type="text">\
8
<br/>\
9
<span>{{ mes }}</span>\
10
</div>'
11
});

这里我写了一个 input 并在上面写了一个 vue 指令 v-model。这个是为 input 之类专用的指令可以把 input 的内容与 vue 实例里的属性绑定。input 的内容修改会改变 mes 然后因为 mes 改变了 span 中的 mes 重新生成了。

效果图

如果使用 vue 的 devtoolt 效果会更好能直接看到数据的变化。
hello_world2

源码:

在 git 仓库的 hello_world2 分支中

三、使用 requirejs

在现在很多库都已经完全支持 amd 规范导入,十分推荐使用 requirejs。当然你使用了 webpack 就没有必要使用 requirejs。这里不说 requirejs 的好处,只是不使用 webpack 的话缺少一个模块化工具。

我们这边把上面第一个 hello_world 修改为 requirejs 的

hello_requirejs.html

1
<!DOCTYPE html>
2
<html lang="zh">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
<title>hello_world</title>
8
<script
9
type="text/javascript"
10
data-main="js/main.js"
11
src="https://cdn.bootcss.com/require.js/2.3.2/require.min.js"
12
></script>
13
</head>
14
<body>
15
<div id="app">
16
<!--你可以在这里写模板也可以在js的Vue实例中写-->
17
</div>
18
</body>
19
</html>

js/main.js

1
// 习惯写iife了可以不需要
2
(function(require, define) {
3
require.config({
4
paths: {
5
// vue cdn别名
6
vue: "https://cdn.bootcss.com/vue/2.0.3/vue"
7
}
8
});
9
// 下面的应该放到其他文件中
10
define(function(require, exports, module) {
11
// 使用别名加载vue
12
var Vue = require("vue");
13
new Vue({
14
el: "#app",
15
data: {
16
mes: "hello vue to requirejs"
17
},
18
template: "<span>{{ mes }}</span>"
19
});
20
});
21
/*另一种requirejs的模块声明
22
define(['vue'], function(Vue){
23
24
});
25
*/
26
})(require, define);

效果图

这个没有必要效果图了。。

源码:

在 git 仓库的 hello_requirejs 分支中

四、使用其它 vue 库

这里我用element-ui来做示例
使用 hello_requirejs 修改

hello_requirejs.html

1
<!DOCTYPE html>
2
<html lang="zh">
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
<title>hello_world</title>
8
<link
9
rel="stylesheet"
10
href="https://cdn.bootcss.com/element-ui/1.0.0-rc.8/theme-default/index.css"
11
/>
12
<script
13
type="text/javascript"
14
data-main="js/main.js"
15
src="https://cdn.bootcss.com/require.js/2.3.2/require.min.js"
16
></script>
17
</head>
18
<body>
19
<div id="app">
20
<!--你可以在这里写模板也可以在js的Vue实例中写-->
21
</div>
22
</body>
23
</html>

增加一个 element 的 css。也可以使用 requirejs 的插件来加载 css

js/main.js

1
(function(require, define) {
2
require.config({
3
paths: {
4
vue: "https://cdn.bootcss.com/vue/2.0.3/vue",
5
// 使用cdn无法加载找了一下是因为define("ELEMENT",["vue"],t)多了一个"ELEMENT"参数
6
element: "element"
7
}
8
});
9
define(function(require, exports, module) {
10
var element_ui = require("element");
11
var Vue = require("vue");
12
element_ui.install(Vue);
13
new Vue({
14
el: "#app",
15
data: {
16
mes: "hello_el-button"
17
},
18
template: "<el-button>{{ mes }}</el-button>"
19
});
20
});
21
})(require, define);

效果图

hello_element

源码:

在 git 仓库的 hello_element 分支中