www.bifa88.com 5

www.bifa88.comvue学习大纲6,来做通用的前端组件化架构设计

怎么样通过 Vue+Webpack 来做通用的前端组件化架构划设想计

2016/07/12 · JavaScript
· 1 评论 ·
前者框架

正文作者: 伯乐在线 –
新空气
。未经笔者许可,禁止转发!
应接参与伯乐在线 专辑作者。

目录:

  1. 架构选型

    2. 框架结构目录介绍

    三. 框架结构表达

    肆. 招聘消息

 

近来①旦要说相比较流行的前端架构哪家强,屈指可数:reactjsangularjsemberjsavalonjsvuejs

本身个人接触使用过:avalonjsangularjsvuejs。因为职业以及前端团队工夫的标题,所以在分歧的店堂,在开拓专门的学业中采用了差别的前端框架结构。

以下仅仅是意味着本身个人采取架构的1对观念和理由,如下:

angular:

自身觉着angularjs的读书上手周期相比较长,恐怕遭遇难点,都心有余而力不足即刻消除,而且编码的身分肯定的很差,要是组织尚未制定标准,那写出来的代码就没办法看。对于贰个选择angularjs的集体来讲,作者感到编码标准是很要紧的,不然对编码技巧是不曾进级的。

avalon:

avalonjs文书档案资料尚未那么全,小编认为有些开源援助的技巧不够多。然则,若是有档案的次序必要,必要去做IE浏览器的支持话,小编提议选用avalonjs

vue:

vuejs 文书档案相比完备,vue吸取了angularjs
的部分优点,规避了某些缺点,至少编码标准上有了2个质的便捷,学习上手的周期不够长。vue早先只是一个轻量级的类库,用来做类似于react的政工,同时vue也是能够拿来做前端架构划设想计的,比如:vueify

  • vue-router(spa框架)。

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

 

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

自家的前端组件化架构划设想计,目录如下:

www.bifa88.com 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
文件正是2个单独的零部件,vue组件开垦具有高独立且易维护。组件的分割可大可小,八个页面也足以当做成由八个vue
组件构成的,2个页面也得以是3个vue组件, vue 文件结构如下:

www.bifa88.com 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等等

路由配置

壹、在main.js中引进,注册 vue-router;
因为布置的路由大概会无尽,所以,把安插部分单独拎到 router.js文件中

  • Vue.use(VueRouter)
    它可以把VueRouter注册为全局组件;那样在任何组件中都能使用;

    import VueRouter from ‘vue-router’;
    import Route from ‘./router’;
    Vue.use(VueRouter);
    var router=new VueRouter(Route);

二、在router.js中引进大家须求映射的机件,导出写好的炫丽;

export default {
    routes:[
        {path:'/about',component:About},
        {path:'/contact',component:Contact}
    ]
}

三、在main.js中程导弹入已经计划好的router.js,并把router加多到app的实例中
四、在导航组件Navs.js中增添路由跳转和渲染;

<div>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/contact">联系我们</router-link>
    <router-view></router-view>
</div>

有关小编:新空气

www.bifa88.com 3

简单介绍还没赶趟写 :)
个人主页 ·
笔者的小说 ·
3

www.bifa88.com 4

在应用前,先介绍一下,什么是nuxtjs?作者的通晓是,它是二个以vuejs为底蕴的接纳框架,在其间安顿了vuejs服务端渲染的种种配置。

子组件样式的采纳

  • 在style中设置样式的时候,如若只对现阶段组件有效
    • 给style加上”scoped”属性;
  • 设置less样式;需要在style中设置lang和rel如下
    • 那时候会报错,需求安装less 和 less-loader

<style scoped lang="less" rel="stylesheet/less">
div{
    background: blue;
    h1{
        color: #ffffff;
    }
}
</style>

近来正值做二个出品的官方网站项目,在此之前用jQuery写过三个,可是是现学现卖的,写的很倒霉,而且,也很难保障。于是,上线之后,又用Vue重写了2个。因为思考到成品的SEO须求,而Vue又是做SPA单页面应用的,所以就构成使用了Nuxtjs那几个服务端渲染框架。

axios:它的利用办法跟vue-resource同样;差别是

  • vue-resource 通过Vue.use() 注册为大局组件
  • axios:通过 Vue.prototype.$http=axios 注册为全局组件

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

路由动画

  • 在main.js中引进第2方库:animate.css
  • 透过vue提供的transition来设置动画:让哪个人动,就对何人安装动画

其次:项目目录结构介绍

www.bifa88.com 5

类型初叶化后的目录结构概况上是这样,一一介绍一下:

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

assets:用来存放未编写翻译的静态财富如图片,sass文件等。需求webpack编写翻译

components:存放vuejs组件

layout:布局组件

pages:页面文件,生成对应的视图及路由,nuxtjs会读取下面全部的文件,并自动生成路由所急需的配置。

plugins:插件目录

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

store:nuxtjs承继了vuex,在那边运用vuex

nuxt.config.js:nuxtjs配置文件

package.json:品类正视包及运维脚本命令

vue-cli 参考 github上的vue-cli的利用就可以;

https://github.com/vuejs/vue-cli

第四:路由

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

webpack+vue-loader 搭建蒙受

  • 亟需安装的有:

    • 安装webpack相关的文本:npm i webpack webpack-dev-server
      –save-dev
    • 设置vue编写翻译中须求的:npm i vue-loader vue-template-compiler
      –save-dev
    • 设置vue上线后要求的:npm i vue vue-router –save 开拓注重
    • 安装babel相关的:npm i babel-core babel-loader
      babel-preset-es2015 style-loader css-loader –save-dev
    • 安装模版文件插件:html-webpack-dev
  • 布局模式跟react+webpack二的布局很接近;我布署的webpack.config.js的代码如下

const path=require('path');
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports={
    entry:path.resolve(__dirname,'./src/main.js'),
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:'babel-loader'
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            }

        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

上面就带着我们来入门一下,须要有早晚的Vue和Nodejs基础。

Vue.use()

  • 效果:注册全局组件,让那个组件在其余组件都能选拔;
  • 本人包裹组件,然后用use注册为全局组件:

    • 创建Button组件
    • 挂号自定义组件:Button

    export default {
        install(){
            Vue.component("lei-button",Button);
        }
    }
    
  • 在main.js中,Vue.use把Button组件注册为大局组件;那样哪儿就都能用”lei-button”那么些自定义组件了;

第三:配置

nuxtjs运营在nuxt.config.js中自定义配置来掩盖它原本的配备。作者那边就举多少个例证。

build:当使用第2方模块的时候,build令你能够自定义webpack的配备。该配置对象里边有那二个项配置,比如loader能够自定义webpack加载器,plugins配置webpack插件。

css:配置全局的css文件,那样在每一种文件中都会引进。当然,也足以在modules中,通过别的loader来管理css文件。注意modules中的模块是按梯次试行的。

编写子组件

  • 通过export default导出JS部分,template模版部分并非单独导出

export default{
    data(){
        return{msg:'首页'}
    }
}

上边,介绍一下哪些运用。

Nuxtjs集成了vue及别的一些零部件/框架和工具,如vuex、vue-router、vue-meta,并且应用webpack、vue-loader、babel-loader来处理代码的自动化构建工作,如打包、热加载、压缩等。

第一:安装

Node版本需要在七.0上述。

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