前言

通常我们是这样使用vue的:vue init webpack name
可以使用多种组件和各种npm包 ,实在是很舒服
但是有时候我们只需要在某个页面中使用vue,而不是整个项目
还有些情况是,在某个系统给内部使用vue,如果使用cli建立整个项目的话 ,就需要单独给vue开放授权或者开发接口。这并不是我们想要的效果。
所以就有了第二种办法,在页面中通过cdn或者文件引入编译好的vuejs文件 ,把vue当作angularjs类似的框架来使用
本节主要讲述单文件和cli的异同


单文件引入的缺点

  • 如果使用es6语法 ,无法保证浏览器兼容性
  • 不能使用vue的大部分npm生态。
  • 代码组织结构不明确 ,必须在一个文件中组织一切。
  • 运行时编译,效率堪忧
  • 无法使用nodejs带来的便利
  • 代码直接写在js中,暴露了源码

废话不多说,下面上代码


Code

单文件方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<div id="app" valign="top">
<a class="btn btn-primary" @click="save()">保存</a>
</div>
<script>
new Vue({
el: '#app',
data: {
code: '',
options: [
//
]
},
mounted() {
console.log('vue mounted succcess');
},
methods: {
save() {
axios.post('/api/getUserInfo/12' ,{})
}
}
});
</script>

cli方式

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
<template>
<div class="container">
//
</div>
</template>
<script>
// import 各种生态
export default {
name: 'HelloWorld',
data() {
return {
code: '',
options: [
//
]
}
},
mounted() {
console.log('vue mounted succcess');
},
methods: {
save() {
axios.post('/api/getUserInfo/12' ,{}})
}
}
}
</script>

有没有很像

END