转载

[vue.js学习笔记1] 搭建vue.js本地开发框架

去年一年，用angular和react做了多个项目。在两者之间换来换去，一方面享受着angular双向绑定带来的傻瓜式的便利，一方面喜欢react的组件及redux的单向数据流带来的调试的便利，和time travel的爽快。总想着有什么东西是介于两者之间的。第一眼看到vue.js的时候，我觉得好像这就是我想要的东西，于是决定从零开始学习。

看了遍vue.js的开发文档，觉得大部分是在angular或者react中相似的概念，于是就照着以往的经验，想搭建一个本地开发的架子出来，方便以后进一步学习实践。列出来以下的内容：

我想要一个最初始的boilerplate -- vue-cli
我想要类似angular中ui-router的东西 -- vue-router
我想要angular中$http的东西 -- vue-resource
我想要用sass -- 在vue.js中好方便
我想要类似flux，redux的数据流 -- vuex（本文暂不涉及）

除了这些，vue.js还有单文件组件，一个组件一个文件，好吧，目前为止觉得好cool。 [vue.js学习笔记1] 搭建vue.js本地开发框架

1. 使用vue-cli

vue.js官方给出了构建项目的命令行vue-cli，比起在yeoman或者github上漫无目的搜索各种boilerplate，vue-cli方便也放心多了。vue-cli给出了webpack和browserify两种方案，这里选择了webpack

[vue.js学习笔记1] 搭建vue.js本地开发框架

轻松加愉快，然后就可以启程coding了。vue-cli也支持自定义模板，这个最后会讲到。

2. 加入vue-router

在第一步中生成的项目里是不包含路由的，路由是SPA中最重要的一部分，而vue-router完成了vue中路由的工作。加入项目很和ui-router很相似。

首先在app.vue中加入一个页面的容器： [vue.js学习笔记1] 搭建vue.js本地开发框架

上图中的router-view即这所谓的容器，所有路由中的页面都会在这里渲染，和ui-view一毛一样。接下来在vue中启用vue-router，这和express或者redux中使用中间件，或者叫插件吧，方式差不多，看下面代码：

[vue.js学习笔记1] 搭建vue.js本地开发框架

最后就是定义路由文件啦：

[vue.js学习笔记1] 搭建vue.js本地开发框架

这样就定义了一个url为'/hello'的路由，该路由使用了Hello.vue，因为vue的单文件组件，所以这里不用像ui-router一样，指向一个controller然后指向一个template，在.vue的单文件组件里html js css是捆绑在一起的。

3. 加入vue-resource

vue-resource是在vue中用来发ajax请求之类的插件。

再使用一下这个图，和启用vue-router一样，启用vue-resource也非常简单，这样之后就可以在组件里愉快的发请求了: [vue.js学习笔记1] 搭建vue.js本地开发框架

4. 教练我想用sass

之前在angular或者react中，使用sass就是写那么些个scss文件，然后通过gulp或者webpack的sass插件转化一下，但是在使用vue的单文件组件时，所有东西包括css就在.vue文件里，哪有scss文件。但是vue提供了更加优雅的方式使用sass或者其他css预处理库。

[vue.js学习笔记1] 搭建vue.js本地开发框架

这是app.vue文件中的css部分，在style的标签里面添加了一个lang="scss"，里面使用了sass的嵌套的语法，此时，如果你的开发环境运行在npm run dev上，就会报错说sass-loader找不到，看了下模板里的webpack文件，原来是根据定义的lang去找对应的webpack loader，于是运行npm install node-sass sass-loader --save就好了!这里注意写lang="scss"而不是sass，当然你如果更喜欢sass那种锯齿状的写法就写sass。

.vue文件的style标签里提供了scoped属性，如果你写了该属性，那么标签内的css就只对本文件有效啦，再也不用担心命名冲突了。