而Vue又是做SPA单页面应用的,4、在导航组件Nav

如何通过 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 评论

Nuxtjs集成了vue及其他部分零件/框架和工具,如vuex、vue-router、vue-meta,况兼应用webpack、vue-loader、babel-loader来管理代码的自动化营造筑工程作,如打包、热加载、压缩等。

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+webpack2的配置很左近;我布署的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'
        })
    ]
}

     style-loader:把编写翻译后的css整合进html

入门类

  • vue 神速入门
  • Vue.js 中国语言文学类别录像教程 on Laravist

有关小编:新空气

图片 3

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

图片 4

第一:安装

Node版本供给在7.0上述。

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

Vue.use()

  • 意义:注册全局组件,让那一个组件在别的组件都能接纳;
  • 协和包裹组件,然后用use注册为大局组件:

    • 创建Button组件
    • 挂号自定义组件:Button
    export default {
        install(){
            Vue.component("lei-button",Button);
        }
    }
    
  • 在main.js中,Vue.use把Button组件注册为大局组件;这样哪个地方就都能用"lei-button"那一个自定义组件了;

vuejs——轻量、学习花费低、双向绑定、无dom的操作、组件的款型编写

社区

  • sf - vue标签
  • 知乎 - vue标签
  • Vue.js职业中文社区
  • vue - issues

下边,介绍一下如何行使。

axios:它的选择方法跟vue-resource一样;不一致是

  • vue-resource 通过Vue.use() 注册为大局组件
  • axios:通过 Vue.prototype.$http=axios 注册为全局组件
$ mkdir [project name]
$ cd [project name]
$ npm init

一. 财富教程

第三:配置

nuxtjs运营在nuxt.config.js中自定义配置来覆盖它原先的布署。小编那边就举多少个例子。

build:当使用第三方模块的时候,build让您可以预知自定义webpack的布署。该配置对象里边有相当多项配置,举个例子loader能够自定义webpack加载器,plugins配置webpack插件。

css:配置全局的css文件,这样在各类文件中都会引进。当然,也得以在modules中,通过任何loader来管理css文件。注意modules中的模块是按顺序实践的。

vue-cli 参谋 github上的vue-cli的施用就可以;

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

     file-loader:编写翻译写入文件,暗中同意意况下转移文书的文件名是文件名与MD5哈希值的构成

1. 法定组件

  • Loader html loader module for webpack

  • Router vue-spa-demo

  • Vuex:特地为 Vue.js 应用设计的情事处理框架结构vuex

  • Ajax

  • vue + ajax

  • vue + ajax

  • vue-async-data

  • Vue-cli Simple CLI for scaffolding Vue.js projects

关于它的性状,实在记不住那么多,作者从官方网站直接拉下来给大家看一下:

路由动画

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

webpack——CommonJS的援引和编制方式、loader非常的增加,包含vue-loader、css-loader、less-loader

八. 框架相关

尤小右 - 4-1 Vue.js-数据驱动的组件化前端开…
Evan You - Diving Deep into Vue.js

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

路由配置

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

3、在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>

前言

六. 答疑

Vue.js为啥不援救templateUrl格局
兑现了vuejs组件之间的报纸发表难题
国内有何样集团在用Vue.js,有怎么样感受
vue 帮助服务器端渲染吗
Vue.js 和 Webpack

现今正在做一个产品的官方网址项目,在此之前用jQuery写过三个,然则是现学现卖的,写的非常差,并且,也很难保证。于是,上线之后,又用Vue重写了三个。因为思念到产品的SEO必要,而Vue又是做SPA单页面应用的,所以就整合使用了Nuxtjs这几个服务端渲染框架。

编写子组件

  • 通过export default导出JS部分,template模版部分实际不是单独导出
export default{
    data(){
        return{msg:'首页'}
    }
}
# 全局安装webpack,webpack-dev-server
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 为项目安装其他依赖
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

四. 示例

总结示范
合法例子 - 包罗马克down编辑器,表格组件等
Vue, vue-router, Webpack 和 vue-loader
简言之的vuejs例子 - 群内高手X-罗伊大作
vue single page app example
使用node+vue.js实现SPA应用

Ajax
A Vue.js component for creating simple AJAX forms.

Webpack
Vue + webpack 项目实行
基于vue.js和webpack的Chat示例
Vue.js 和 Webpack(一)
Vue.js 和 Webpack(二)
Vue.js 和 Webpack(三)
二哲 - 结合现实项指标webpack配置

Gulp
vue-gulp-webpack单页面组件开采

Tab
vue tab

其它
Ant Design 的 Vue 实现
基于vue.js重写Cnodejs.org社区的webapp

第四:路由

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

子组件样式的应用

  • 在style中设置样式的时候,假使只对近年来组件有效
    • 给style加上"scoped"属性;
  • 设置less样式;需要在style中设置lang和rel如下
    • 此时会报错,须要设置less 和 less-loader
<style scoped lang="less" rel="stylesheet/less">
div{
    background: blue;
    h1{
        color: #ffffff;
    }
}
</style>
$ webpack

七. 源码学习

Vue.js 源码学习笔记
VUE 源码深入分析
vue源码解析之怎么样贯彻observer和watcher

上边就带着大家来入门一下,供给有确定的Vue和Nodejs基础。

经过上述配置,当a.png小于8K就能够自动将图片转变来base64编码,假若非常大于,则不会转移。

二. 文档

  • Vue API
  • Vue.js - API
  • vue-router API
  • vue-router文档
  • vuex API
  • vuex文档

第二:项目目录结构介绍

图片 5

连串早先化后的目录结构大意上是这么,一一介绍一下:

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

assets:用来贮存在未编写翻译的静态财富如图片,sass文件等。须要webpack编写翻译

components:存放vuejs组件

layout:布局组件

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

plugins:插件目录

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

store:nuxtjs承袭了vuex,在那处运用vuex

nuxt.config.js:nuxtjs配置文件

package.json:品类信任包及运转脚本命令

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue example</title>
</head>
<body>
 <div>{{message}}</div>
 <script src="dist/build.js"></script>
</body>
</html>

三. 组件

本文由必威发布于必威-前端,转载请注明出处:而Vue又是做SPA单页面应用的,4、在导航组件Nav

相关阅读