神刀安全网

[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本地开发框架 [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.js学习笔记1] 搭建vue.js本地开发框架

再使用一下这个图,和启用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就只对本文件有效啦,再也不用担心命名冲突了。

5. 生成自己的vue 模板

上面说过vue-cli可以支持自定义的vue模板。具体的操作也很简单,在本地把代码写好之后,将代码全部拷贝到一个template的文件夹里,然后提交到github上。比如我自己就推了一个到我的 github 上。

然后在本地运行下面命令就生成之前定义的模板啦。 [vue.js学习笔记1] 搭建vue.js本地开发框架

6. sublime插件

最后提一下,使用sublime的朋友,可能要安装一下vue syntax highlighter这个package,不然vue文件就是灰蒙蒙一片了。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » [vue.js学习笔记1] 搭建vue.js本地开发框架

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮