您的位置:澳门新葡8455最新网站 > Web前端 > js框架入门,来做通用的前端组件化结构设计

js框架入门,来做通用的前端组件化结构设计

发布时间:2019-12-02 18:02编辑:Web前端浏览(164)

    怎么通过 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/

     

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

    自己的前端组件化构造划捏造计,目录如下:

    澳门新葡8455最新网站 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 文件构造如下:

    澳门新葡8455最新网站 2

    [4]  : babel-loader  :实现对vue文件中 es6 语法的编写翻译解析

     [5]  : vue-router :用来做路由分发,并且文书档案特别的完善(学习地方:)。

     [6]  : vue (插件式方式):vue自身提供了多个install 格局用来注入,大家能够注入一些大局的(属性、方法、以致通用的ui组件卡塔尔(英语:State of Qatar)。

    下边说说文件夹的含义:

      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 评论

    近日正值做叁个出品的官方网站项目,以前用jQuery写过二个,可是是现学现卖的,写的很倒霉,并且,也很难保险。于是,上线之后,又用Vue重写了叁个。因为思谋到成品的SEO供给,而Vue又是做SPA单页面应用的,所以就重新整合使用了Nuxtjs这一个服务端渲染框架。

    有关作者:新空气

    澳门新葡8455最新网站 3

    简要介绍尚未来得及写 :) 个人主页 · 小编的篇章 · 3

    澳门新葡8455最新网站 4

    上面就带着大家来入门一下,供给有料定的Vue和Nodejs底工。

    在行使前,先介绍一下,什么是nuxtjs?小编的明亮是,它是一个以vuejs为底蕴的采纳框架,在内部安顿了vuejs服务端渲染的各样配置。

    Nuxtjs集成了vue及此外一些组件/框架和工具,如vuex、vue-router、vue-meta,而且利用webpack、vue-loader、babel-loader来处理代码的自动化创设筑工程作,如打包、热加载、压缩等。

    有关它的特色,实在记不住那么多,笔者从官方网址直接拉下来给大家看一下:

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

    下边,介绍一下怎样使用。

    第一:安装

    Node版本必要在7.0以上。

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

    第二:项目目录布局介绍

    澳门新葡8455最新网站 5

    花色开端化后的目录构造大要上是那般,少年老成一介绍一下:

    .nuxt:应该就是nuxt的代码了

    assets:用来寄存在未编写翻译的静态能源如图片,sass文件等。需求webpack编写翻译

    components:存放vuejs组件

    layout:构造组件

    pages:页面文件,生成对应的视图及路由,nuxtjs会读取上面全数的文件,并自动生成路由所急需的构造。

    plugins:插件目录

    static:静态文件,webpack不会编写翻译那之中的文本

    store:nuxtjs世襲了vuex,在这里处运用vuex

    nuxt.config.js:nuxtjs配置文件

    package.json:体系正视包及运转脚本命令

    第三:配置

    nuxtjs运维在nuxt.config.js中自定义配置来隐蔽它原来的配备。笔者那边就举多少个例证。

    build:当使用第三方模块的时候,build让你能够自定义webpack的安插。该配置对象里边有众多项配置,举例loader能够自定义webpack加载器,plugins配置webpack插件。

    css:配置全局的css文件,那样在每一种文件中都会引进。当然,也能够在modules中,通过任何loader来管理css文件。注意modules中的模块是按顺序实施的。

    第四:路由

    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' 。

    澳门新葡8455最新网站,也提供了黄金年代部分的交接效果,再main.css中再加多相同的体裁(page改为test),然后将页面组件中的transition属性transition: 'test' 。

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:js框架入门,来做通用的前端组件化结构设计

    关键词:

上一篇:没有了

下一篇:没有了