xml地图|网站地图|网站标签 [设为首页] [加入收藏]

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

来源:http://www.ccidsi.com 作者:最新解决方案 人气:96 发布时间:2019-05-02
摘要:什么通过 Vue+Webpack 来做通用的前端组件化架构划设想计 2016/07/12 · JavaScript· 1 评论 ·前端框架 正文作者: 伯乐在线 -新空气。未经笔者许可,禁止转发! 应接到场伯乐在线 专栏撰稿

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

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

正文作者: 伯乐在线 - 新空气 。未经笔者许可,禁止转发!
应接到场伯乐在线 专栏撰稿人。

目录:

  1. 架构选型

    二. 架构目录介绍

    3. 架构表达

    四. 招聘音信

 

此时此刻1经要说相比较盛行的前端架构哪家强,屈指可数:reactjsangularjsemberjsavalonjsvuejs

小编个人接触使用过:avalonjsangularjsvuejs。因为专门的学业以及前端团队本事的难题,所以在分裂的铺面,在支付职业中选取了不一样的前端架构。

以下仅仅是意味着自个儿个人选拔架构的一部分观点和理由,如下:

angular:

本身感到angularjs的学习上手周期相比较长,恐怕遇见难题,都无法儿立即消除,而且编码的材料明显的很差,要是协会尚未制定规范,那写出来的代码就没办法看。对于1个接纳angularjs的公司来讲,笔者以为编码标准是很要紧的,不然对编码技巧是未曾进级的。

avalon:

avalonjs文书档案资料尚未那么全,笔者倍感有些开源协助的力量不够多。但是,若是有档案的次序必要,供给去做IE浏览器的协理话,作者建议采用avalonjs

vue:

vuejs 文书档案比较齐全,vue吸取了angularjs 的1对优点,规避了有个别败笔,至少编码标准上有了3个质的火速,学习上手的周期相当短。vue开首只是1个轻量级的类库,用来做类似于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 文件就是3个独立的组件,vue组件开垦具备高独立且易维护。组件的细分可大可小,贰个页面也得以当做成由三个vue 组件构成的,3个页面也足以是3个vue组件, vue 文件结构如下:

图片 2

[4]  : babel-loader  :达成对vue文件中 es陆 语法的编写翻译解析

 [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写过3个,可是是现学现卖的,写的很不佳,而且,也很难保险。于是,上线之后,又用Vue重写了一个。因为思量到成品的SEO要求,而Vue又是做SPA单页面应用的,所以就结成使用了Nuxtjs那么些服务端渲染框架。

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'
        })
    ]
}

关于作者:新空气

图片 3

简要介绍还没来得及写 :) 个人主页 · 小编的小说 · 3

图片 4

下边就带着大家来入门一下,必要有早晚的Vue和Nodejs基础。

编写子组件

  • 通过export default导出JS部分,template模版部分并非单独导出
export default{
    data(){
        return{msg:'首页'}
    }
}

在动用前,先介绍一下,什么是nuxtjs?作者的知晓是,它是2个以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>

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

路由配置

1、在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);

2、在router.js中引入大家须求映射的组件,导出写好的投射;

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

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

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

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:来做通用的前端组件化架构设计,js框架入门

关键词: 68399皇家赌场 JavaScript 日记本

最火资讯