如何通过,js框架入门

哪些通过 Vue+Webpack 来做通用的前端组件化构造划设想计

2016/07/12 · JavaScript
· 1 评论 ·
前面一个框架

正文小编: 伯乐在线 –
新空气
。未经作者许可,禁止转发!
招待参预伯乐在线 专栏编辑者。

目录:

  1. 布局选型

    2. 布局目录介绍

    3. 布局说明

    4. 招徕约请消息

 

一时风流浪漫经要说比较盛行的前端布局哪家强,微乎其微:reactjsangularjsemberjsavalonjsvuejs

自己个人接触使用过:avalonjsangularjsvuejs。因为专门的学业以致前端团队手艺的主题素材,所以在不一样的营业所,在付出专门的学业中选择了分裂的前端布局。

以下仅仅是意味自身个人采用布局的一些视角和理由,如下:

angular:

小编感到angularjs的上学上手周期比较长,恐怕遇见标题,都心余力绌马上消除,何况编码的成色了然于目的很差,尽管组织尚未制定标准,这写出来的代码就没办法看。对于四个选拔angularjs的公司来讲,作者觉着编码规范是很入眼的,否则对编码技能是从未有过进步的。

avalon:

avalonjs文书档案资料未有那么全,作者备感有个别开源帮忙的力量远远不足多。可是,倘若有品种供给,须要去做IE浏览器的协助话,笔者建议选取avalonjs

vue:

vuejs 文书档案相比完善,vue吸收了angularjs
的局地亮点,隐蔽了部分毛病,起码编码标准上有了一个质的短平快,学习上手的周期超短。vue初阶只是二个轻量级的类库,用来做相通于react的事体,同一时候vue也是足以拿来做前端构造划杜撰计的,比如:vueify

  • vue-router(spa框架)。

vue学习地方:http://cn.vuejs.org/

 

上述说了那么多没用的,下边就来点干活了!

自个儿的前端组件化结构划伪造计,目录如下:

图片 1

系列结构用到的知识点,照旧挺多的,知识清单如下:

[1]:   gulp + webpack 创设打包工具,
使用了一应有尽有的loader,例如:vue-loader,  sass-loader,
babel-loader , 以及 postcss,postcss-custom-properties,等等

[2]  :   postcss-custom-properties : 用来做样式全局化,
只必要经过变量去维护,通过编写翻译变量不仅可以够换肤。

 [3]  :   vue-loader (vue文件组件化):用来去编译管理 *.vue
的公文,三个vue
文件正是叁个单独的机件,vue组件开垦具有高独立且易维护。组件的划分可大可小,八个页面也足以作为成由八个vue
组件构成的,叁个页面也能够是二个vue组件, vue 文件构造如下:

图片 2

[4]  : babel-loader  :完结对vue文件中 es6 语法的编写翻译深入解析

 [5]  : vue-router
:用来做路由分发,何况文书档案极度的齐全(学习地点:)。

 [6]  : vue (插件式形式):vue自身提供了三个install
方式用来注入,我们能够注入一些大局的(属性、方法、以至通用的ui组件卡塔尔(قطر‎。

上面说说文件夹的含义:

  common 文件夹: 是用来存一些通用的事物,比如样式,以致全局的js等等

  components 文件夹:用来放独立的机件,作者准备早先时期做细分,ui
组件,甚至page
组件等等,那此中正是集体的头脑,以往就能够做成独立的零部件库了。

  filters 文件夹:用来放通用的过滤器操作。

  plugins 文件夹:用来放 Vue.use
注入到Vue全局的插件库,例如:乞请加载、弹框、分页、ui组件
等等。plugins
只是把 componets零零件暴露给 Vue全局。

  views 文件夹: 用来寄存在页面模块

  app.vue 文件:第叁回运行的主程序模块

  app.js 文件:运转前的加载,注入,实例化

  router.config.js 文件:路由模块

 

当前该布局在前后台的SPA架构都适用,可能依旧有很多不圆满,可是自身还很年轻,vue也还狠年轻,望各位道友多给我们年轻人一些机会。

2 赞 6 收藏 1
评论

基于
Vue.js/自动代码分层/服务端渲染/强盛的路由成效,帮忙异步数据/静态文件服务/ES6/ES7
语法扶助/打包和压缩 JS 和
CSS/HTML底部标签管理/本地开垦协助热加载/集成ESLint/扶植各类体制预微处理器:/SASS、LESS、
Stylus等等

关于我:新空气

图片 3

简要介绍还未有赶趟写 :)
个人主页 ·
小编的篇章 ·
3

图片 4

第四:路由

nuxtjs集成了强盛的路由作用,大家竟然没有必要自个儿安顿vue-router的任何参数,nuxtjs会自动生成路由布署,具体的事例能够看一下官方网址的牵线,简单易懂。

底子路由:只须求依照你想要的一流路线,二级路线,把组件放进对应的公文夹里面就能够。

动态路由

嵌套路由

在页面之间跳转链接的时候,nuxtjs提供了<nuxt-link>标签来张开跳转。

nuxtjs提供了页面跳转的大局过渡效果,在assests目录中定义main.css文件并丰盛一些体裁:

.page-enter-active, .page-leave-active {

    transition: opacity .5s;

}

.page-enter, .page-leave-active {

    opacity: 0;

}

然后在nuxt.config.js中配置css属性: css: ‘assest/main.css’ 。

也提供了有的的对接效果,再main.css中再加多近似的样式(page改为test),然后将页面组件中的transition属性transition:
‘test’ 。

关于它的特色,实在记不住那么多,笔者从官网直接拉下来给我们看一下:

这段时间正值做四个出品的官方网址项目,在此以前用jQuery写过一个,不过是现学现卖的,写的很倒霉,况且,也很难保障。于是,上线之后,又用Vue重写了叁个。因为考虑到成品的SEO供给,而Vue又是做SPA单页面应用的,所以就结成使用了Nuxtjs这几个服务端渲染框架。

第一:安装

Node版本须要在7.0上述。

利用vue-cli来安装(确认保证您早已设置了vue-cli):vue init
nuxt-community/starter-template
<project-name>,安装完后,cd步入项目,别忘了npm install。

在使用前,先介绍一下,什么是nuxtjs?作者的通晓是,它是一个以vuejs为底子的采纳框架,在里边计划了vuejs服务端渲染的各类配置。

发表评论

电子邮件地址不会被公开。 必填项已用*标注