您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:js快速入门教程,js框架入门

新葡亰496net:js快速入门教程,js框架入门

发布时间:2019-06-23 03:50编辑:新葡亰官网浏览(93)

    哪些通过 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/

     

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

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

    新葡亰496net 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 文件结构如下:

    新葡亰496net 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新葡亰496net:js快速入门教程,js框架入门。零件揭破给 Vue全局。

      views 文件夹: 用来存放页面模块

      app.vue 文件:第壹次运维的主程序模块

      app.js 文件:运维前的加载,注入,实例化

      router.config.js 文件:路由模块

     

    此时此刻该架构在前后台的SPA架构都适用,恐怕仍旧有广大不到家,但是作者还很年轻,vue也还狠年轻,望各位道友多给我们年轻人一些火候。

    2 赞 6 收藏 1 评论

    今后正值做一个出品的官方网址项目,从前用jQuery写过三个,然则是现学现卖的,写的很不好,而且,也很难保证。于是,上线之后,又用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 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'
            })
        ]
    }
    

    前言

    转载于www.vue-js.com的文章

    关于小编:新空气

    新葡亰496net 3

    简单介绍还没赶趟写 :) 个人主页 · 作者的稿子 · 3

    新葡亰496net 4

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

    编写子组件

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

    vuejs——轻量、学习开销低、双向绑定、无dom的操作、组件的花样编写

    一. 能源教程

    在利用前,先介绍一下,什么是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>
    

    vuejs是个轻量级的mvvm框架, 集结了angular的基本效用,却又比angular更为精简,作用上带有了双向绑定、指令、逻辑调节、过滤器、事件监听、函数等。框架的风味使得项目 在情景改动、分页的光景下得以具有异常的大的方便——全数的操作只要求改动数组,未有任何的dom操作。

    综合类

    • vuejs 英文资料
    • vuejs 2.0文档
    • Vue汉语资料总汇
    • Vue.js 的一些财富索引
    • vue资料

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

    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>
    

    webpack——CommonJS的引用和编写制定方式、loader极度的足够,包罗vue-loader、css-loader、less-loader

    入门类

    • vue 火速入门
    • Vue.js 中文体系录像教程 on Laravist

    至于它的表征,实在记不住那么多,笔者从官方网站间接拉下来给我们看一下:

    路由动画

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

    webpack是前者组件化的化解方案,webpack提供了基本的CommonJS引用方案去引用财富,上面那篇文章就给大家介绍webpack和vue.js,一同来探视吧。

    英文化教育程

    • Learning Vue 1.0: Step By Step

    依照Vue.js/自动代码分层/服务端渲染/庞大的路由功用,协助异步数据/静态文件服务/ES6/ES7 语法协助/打包和削减 JS 和 CSS/HTML底部标签处理/本地开采援助热加载/集成ESLint/帮衬各类体制预管理器:/SASS、LESS、 Stylus等等

    Vue.use()

    • 意义:注册全局组件,让那个组件在其余组件都能使用;
    • 团结包装组件,然后用use注册为大局组件:

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

    类型的创立

    社区

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

    上面,介绍一下怎么利用。

    axios:它的行使方式跟vue-resource同样;不一样是

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

    1.新建项目文件夹,并在里面树立package.json

    二. 文档

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

    第一:安装

    Node版本需求在7.0之上。

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

    vue-cli 参考 github上的vue-cli的应用就能够;

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

    $ mkdir [project name]
    $ cd [project name]
    $ npm init
    

    三. 组件

    其次:项目目录结构介绍

    新葡亰496net 5

    品类开首化后的目录结构轮廓上是如此,一一介绍一下:

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

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

    components:存放vuejs组件

    layout:布局组件

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

    plugins:插件目录

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

    store:nuxtjs承继了vuex,在此地运用vuex

    nuxt.config.js:nuxtjs配置文件

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

    2.在类型目录下新建index.html

    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

    第三:配置

    nuxtjs运维在nuxt.config.js中自定义配置来掩盖它原来的安排。作者这里就举多少个例证。

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

    css:配置全局的css文件,那样在种种文件中都会引进。当然,也得以在modules中,通过其余loader来管理css文件。注意modules中的模块是按顺序实行的。

    <!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>
    

    2. 此外组件

    • UI类

    • VueStrap:使用 Vue.js 和纯 JavaScript 构建的 Bootstrap 组件

    • 本着 Vue 框架移植的 We UI 框架的适配,让 mobile开采进度成为一种享受

    • vue bootstrap

    • 传闻Vue、Bootstrap的一套MVVM组件,轻松、易用、作用庞大

    • 用VUE 和 SUI-Mobile 写了二个活动端demo - vue-sui-demo

    • 表格

    • ZEE大神小说 - vue-editable

    • 分页
      vue入门-完结叁个分页组件(1.0.3本子)
      vue(1.0.3) 分页组件
      分页组件 – 命令格局,帮衬两个,首要靠配置

    • 移动
      Hammer.js wrapper for Vue.js
      vue的tap手势插件

    • 微信
      为微信Web服务量身设计

    • 日历
      ZEE大神文章 - vue-calendar
      Awe - 日历组件

    • 进度条
      vue 进度条

    • 验证
      Validator component for VueJS
      form validator for vue 0.11

    • Lazyload
      图片的lazyload

    • Loader
      【vue】vue组件化开拓初体验-示例vue-loader-example学习记录

    • Uploader
      vue-file-upload
      vue-file-upload-component

    • Slide
      vue-onlySlider-x

    • Drag
      vue-drag-and-drop

    第四:路由

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

    src文件夹,并在该公文夹下创设main.js

    四. 示例

    综上所述示范
    法定例子 - 包涵马克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(二)
    新葡亰496net,Vue.js 和 Webpack(三)
    二哲 - 结合具体项指标webpack配置

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

    Tab
    vue tab

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

    import Vue from 'vue'
    new Vue({
     el:'body',
     data:{
     message:'test success!'
     }
    });
    

    五. 开采工具相关

    Atom
    atom vue 代码高亮
    什么发表多个Atom的package
    vue-format

    Sublime-text
    Vue Syntax Highlight

    Webstorm
    webstorm添加*.vue文件帮衬

    设置webpack

    六. 答疑

    Vue.js为何不扶助templateUrl情势
    兑现了vuejs组件之间的通信问题
    境内有哪些集团在用Vue.js,有何样经验
    vue 帮助服务器端渲染吗
    Vue.js 和 Webpack

    1.装置webpack,webpack-dev-server以及相关的loaders

    七. 源码学习

    Vue.js 源码学习笔记
    VUE 源码剖判
    vue源码深入分析之怎么样达成observer和watcher

    # 全局安装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
    

    八. 框架相关

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

         webpack-merge:开垦情况和生育环节的webpaak配置文件的布局合併

    九.UI相关

    微信风格UI库

         css-loader:编写翻译写入css

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

         file-loader:编译写入文件,私下认可意况下转移文书的文书名是文本名与MD5哈希值的三结合

         vue:vue主程序

         vue-loader:编写翻译写入.vue文件

         vue-html-loader:编译vue的template部分

         vue-style-loader:编写翻译vue的样式部分

         vue-hot-reload-api:webpack对vue完结热替换

         babel-core:ES二零一五编写翻译焦点

         babel-loader:编写翻译写入ES二零一五文书档案

         babel-preset-es2015:ES2015语法

         babel-preset-stage-0:开启测试效用

         babel-runtime:babel实行境况

         url-loader

    那边介绍下url-loader,那些loader实际上是对file-loader的包裹

    例如CSS文件中一时会如此写:

    .demo{
     background-image: url('a.png');
    }
    
    module:{
     loaders:[
     {test:/.(png|jpg)$/,loader:'url-loader?limit=8192'}
     ]
    }
    

    经过上述配置,当a.png小于8K就能自动将图纸调换来base64编码,要是十分的大于,则不会改变。

    此地顺便提一句,在module配置的时候,loader的写法:

    module:{
     loaders:[
     {test:/.jade$/,loader:'jade'}
     //这里配置了让webpack识别jade的loader,其他类似,比如.vue
     //用于css文件的loader有两种写法
     {test:/.css$/,loader:'style!css'}
     {test:/.css$/,loaders:['style','css']}
     ]
    }
    

    2.配置webpack.config.js

    在根目录下树立webpack.config.js,配置如下:

    var path = require('path');
    module.exports = {
     entry: './src/main.js',
     //定义webpack输出的文件,我们在这里设置了
     让打包后生成的文件放在dist文件夹下的build.js文件中
     output: {
     path: './dist',
     publicPath:'dist/',
     filename: 'build.js'
     },
     module: {
     loaders: [
     //转化ES6语法
     {
     test: /.js$/,
     loader: 'babel',
     exclude: /node_modules/
     },
     //图片转化,小于8K自动转化为base64的编码
     {
     test: /.(png|jpg|gif)$/,
     loader:'url-loader?limit=8192'
     }
     ]
     },
     //这里用于安装babel,如果在根目录下的.babelrc配置了,这里就不写了
     babel: {
     presets: ['es2015','stage-0'],
     plugins: ['transform-runtime']
     }
    }
    

    特意表明

    若是要在.babelrc下布置babel,则需求在根目录下新建该文件,windows情形下,不可能新建该txt文件然后改后缀,必要经过dos命令建设构造:

    echo>.babelrc
    

    经过该命令就足以制造babelde配置文件,用编辑器展开,修改里面包车型地铁开始和结果为:

    {
     "presets": ["es2015", "stage-0"],
     "plugins": ["transform-runtime"]
    }
    

    完毕该配置大家在指令中运作

    $ webpack
    

    开采index.html就足以看来浏览器中来看大家刚刚写的文字

    总结

    迄今大家兑现了最大旨的应用webpack打包vue,大家最佳本人实操下代码技能越来越好的领会,希望那篇小说对大家能具有援救,假如反常大家可以留言调换。

    您也许感兴趣的稿子:

    • 详解怎样运用webpack打包Vue工程
    • webpack vue.js达成组件化详解
    • vue2.0 webpack景况的构造进程
    • webpack创设vue项目标详细教程(配置篇)
    • 浅谈vue webpack项目调试方法步骤
    • vue node webpack遭遇搭建教程
    • vue-cli webpack 开拓处境跨域详解
    • vue webpack怎样绕过QQ音乐接口对host的证实详解

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:js快速入门教程,js框架入门

    关键词: