学习资源目录,js快速入门教程
分类:澳门新萄京最大平台

如何通过 Vue+Webpack 来做通用的前端组件化架构设计

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

本文作者: 伯乐在线 - 新空气 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

目录:

  1. 架构选型

    2. 架构目录介绍

    3. 架构说明

澳门新萄京,    4. 招聘消息

 

目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs学习资源目录,js快速入门教程。angularjsemberjsavalonjsvuejs

我个人接触使用过: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这个服务端渲染框架。

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的文章

关于作者:新空气

澳门新萄京 3

简介还没来得及写 :) 个人主页 · 我的文章 · 3

澳门新萄京 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

三. 组件

第二:项目目录结构介绍

澳门新萄京 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

四. 示例

综合示例
官方例子 - 包括Markdown编辑器,表格组件等
Vue, vue-router, Webpack 和 vue-loader
简单的vuejs例子 - 群内高手X-Roy大作
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

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:ES2015编译核心

     babel-loader:编译写入ES2015文档

     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的验证详解

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:学习资源目录,js快速入门教程

上一篇:澳门新萄京:函数中的,深刻之类数组对象与 下一篇:没有了
猜你喜欢
热门排行
精彩图文