哪些通过,js框架入门

时间:2019-09-24 18:24来源:关于计算机
怎么通过 Vue+Webpack 来做通用的前端组件化框架结构划设想计 2016/07/12 · JavaScript· 1 评论 ·前端框架 正文我: 伯乐在线 -新空气。未经小编许可,禁止转载! 接待参加伯乐在线 专栏撰

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

前段时间正值做三个出品的官方网站项目,此前用jQuery写过贰个,可是是现学现卖的,写的很不佳,並且,也很难保险。于是,上线之后,又用Vue重写了二个。因为想念到成品的SEO必要,而Vue又是做SPA单页面应用的,所以就结成使用了Nuxtjs那些服务端渲染框架。

有关作者:新空气

图片 3

简单介绍还没来得及写 :) 个人主页 · 笔者的篇章 · 3

图片 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。

第二:项目目录结构介绍

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

也提供了一部分的接入效果,再main.css中再增添一样的体制(page改为test),然后将页面组件中的transition属性transition: 'test' 。

编辑:关于计算机 本文来源:哪些通过,js框架入门

关键词: