吐槽
上一篇吐槽了一番vue-cli手脚架，有点个人感情色彩，也许只是个人洁癖作怪，并不代表主流开发习惯。然而但存在即是合理，流行更因占理。其实，手脚架对于团队项目的开发管理和发布还是非常好用的（这里不展开说了，自己体会就好）。但是对于简单的仅有几个页面的项目，个人觉得用手脚架就有点多余，好比杀鸡用屠龙刀。
代码实现
因此，学习了一套免手脚架使用vue的方案，专业的叫法“CDN引入”。就是不使用npm webpack来打包js库，而是跟传统做法一样，直接在html页面用<script>标签引入。
<html>
<head>
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
<head>
<body>
<div id="app">
<router-view></router-view>
</div>
.............
对于写惯HTML的你来说，是不是很简单很顺手呢？然后，接下来的就是javascript的部分，依然还是熟悉的味道。
<script>
//定义路由
const routes=[
{path:'/',component: { template: '<h3>Home</h3>' }},
{path:'/about',component: { template: '<h3>About</h3>' }},
{path:'/login',component:{ template: '<h3>Login</h3>' }}
]
//创建路由实例
const router=new VueRouter({
routes:routes
})
//注册
const app=new Vue({
el: '#app',
router
})
</script>
以上便是一个 vue.js+router CDN引入 完整的示例。
总结
1.对于一些简单的SPA小项目来说，只要打开notepad撸起袖子，在完全放飞的状态就可以编码，非常方便！
2.按需引入脚本，没有如手脚架打包出来的vendor.js那么臃肿不堪，自然用户加载页面也会快一些。
3.但是还是有一些vue.js 或者 webpack的特性发挥不出的，譬如：用Import的方法去加载模块，加载component；*.vue 的单文件引用也做不了。
4.或许还有其他的，日后再补充吧~
网友评论