概述

browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板。webpack提供了和browserify类似的功能,在前端资源管理这方面,它提供了更加出色的功能。
官方基于webpack提供了两种项目模板,分别是vue-webpack-simple模板和vue-webpack模板,今天我们将介绍官方提供的这两种项目模板,并用vue-webpack-simple模板创建一个简单的示例。

本文的Demo和源代码已放到GitHub,如果您觉得内容不错,请点个赞,或在GitHub上加个星星!

点击:vue-webpack-simple示例 GitHub Source

Webpack简介

Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载。通过loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

下图是官方对Webpack的简介,通过这幅图也不难看出,一些相互依赖的模块文件,会被打包成一个或多个js文件,可以减少HTTP的请求次数。

Webpack支持的特性:

  1. 支持CommonJs和AMD模块,意思也就是我们基本可以无痛迁移旧项目。
  2. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持。
  3. 可以通过配置或智能分析打包成多个文件,实现公共模块或按需加载。
  4. 将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器,可以支持sass,less等CSS预处理器。
  5. 内置有source map,即使打包在一起依旧方便调试。

============================================ 分界线============================================

由于本文不是webpack的教程,所以webpack相关的一些知识还需要各位去了解。

webpack主页:http://webpack.github.io/

环境准备

Node.jsGit是必备的工具,NPM的版本最好是3.x版本以上,NPM 3.x提供了更有效的包依赖管理。

在使用这两种项目模板前,需要先安装vue cli,执行以下命令安装vue cli

npm install -g vue-cli

  

安装完vue cli后,我们就可以基于vue-webpack-simple模板和vue-webpack模板创建项目。

使用vue-webpack-simple模板

1.生成项目

在某个目录下右键运行Git Bash Here,比如我的目录是D:\VueOfficialTemplates。

在git bash下输入以下命令:

vue init webpack-simple my-webpack-simple-demo

  

webpack-simple是项目模板的名称,my-webpack-simple-demo是你要生成的项目名称。

目录下生成了一个文件夹my-webpack-simple-demo。

2. 项目结构说明

打开my-webpack-simple-demo文件夹,看到以下目录结构:

文件树结构如下:

├─.babelrc // babel配置文件

├─.gitignore     

├─index.html // 主页

├─package.json // 项目配置文件

├─README.md 

├─webpack.config.js // webpack配置文件

├─dist // 发布目录

├─.gitkeep      

├─src // 开发目录  

├─App.vue // App.vue组件

├─main.js // 预编译入口

 

 

相比于browserify-simple模板,多了一个webpack.config.js文件。

package.json

{ "name": "my-webpack-simple-demo", "description": "A Vue.js project", "author": "keepfool ", "private": true, "scripts": { "dev": "webpack-dev-server --inline --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^1.0.0", "babel-runtime": "^6.0.0" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "cross-env": "^1.0.6", "css-loader": "^0.23.0", "file-loader": "^0.8.4", "json-loader": "^0.5.4", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.0.0", "vue-loader": "^8.2.1", "vue-style-loader": "^1.0.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.0" }

}

开发时依赖babel、各种loader和webpack,发布时依赖vue和babel-runtime。
scripts节点同样定义了开发时和发布时的编译命令,和browserify不同的是,编译的输入和输出是定义在webpack.config.js文件中的。

webpack.config.js

var path = require('path') var webpack = require('webpack')
module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolveLoader: { root: path.join(__dirname, 'node_modules'), }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.json$/, loader: 'json' }, { test: /\.html$/, loader: 'vue-html' }, { test: /\.(png|jpg|gif|svg)$/, loader: 'url', query: { limit: 10000, name: '[name].[ext]?[hash]' } } ] }, devServer: { historyApiFallback: true, noInfo: true }, devtool: '#eval-source-map' }
if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin() ]) }

webpack.config.js内容还是比较好理解的,它采用了CommonJS的写法,entry节点配置了编译入口,output节点配置了输出。
这段entry和output配置的含义是:编译src/main.js文件,然后输出到dist/build.js文件。

3. 安装项目依赖

执行以下命令安装项目依赖:

cd my-webpack-simple-demo

npm install

  

安装完成后,目录下会产生一个node_modules文件夹。

项目相关的依赖都存放在这个文件夹下了,比vue-browserify-simple项目模板的依赖要多得多。

4. 运行示例

执行以下命令运行示例:

npm run dev

  

打开127.0.0.1:8080,可以看到以下画面:

注意:和browserify不同的是,执行npm run dev命令后并不会在dist目录下生成build.js文件,开发环境下build.js是在运行内存中的。

5. 发布

执行以下命令会生成发布时的build.js,并且是经过压缩的。

npm run build

使用vue-webpack模板

1.生成项目

重新打开一个git bash窗口,执行以下命令:

vue init webpack my-webpack-demo

  

webpack是项目模板,my-webpack-demo是项目名称。

目录下生成了一个文件夹my-webpack-demo:

文件目录结构如下(参考:https://vuejs-templates.github.io/webpack/structure.html

├── build/                      # webpack config files

│   └── ...

├── config/                    

│   ├── index.js                # main project config

│   └── ...

├── src/

│   ├── main.js                 # app entry file

│   ├── App.vue                 # main app component

│   ├── components/             # ui components

│   │   └── ...

│   └── assets/                 # module assets (processed by webpack)

│       └── ...

├── static/                     # pure static assets (directly copied)

├── test/

│   └── unit/                   # unit tests

│   │   ├── specs/              # test spec files

│   │   ├── index.js            # test build entry file

│   │   └── karma.conf.js       # test runner config file

│   └── e2e/                    # e2e tests

│   │   ├── specs/              # test spec files

│   │   ├── custom-assertions/  # custom assertions for e2e tests

│   │   ├── runner.js           # test runner script

│   │   └── nightwatch.conf.js  # test runner config file

├── .babelrc                    # babel config

├── .editorconfig.js            # editor config

├── .eslintrc.js                # eslint config

├── index.html                  # index.html template

└── package.json                # build scripts and dependencies

2. 安装依赖

执行以下两行命令,安装项目依赖:

cd my-webpack-demo

npm install

  

(安装过程较为缓慢,需要耐心等待…)

3. 运行示例

执行以下命令运行示例:

npm run dev

  

打开127.0.0.1:8080,可以看到以下画面:

4. 发布

执行以下命令生成发布:

npm run build

  

和vue-simple-webpack模板不同的是,所有的静态资源,包括index.html都生成到dist目录下了。

这意味着你可以直接拿着dist目录去发布应用,例如在IIS下将dist目录发布为一个网站。

vue-simple-webpack示例

昨天我们使用了vue-simple-browserify模板做了一个小示例,今天我们就用vue-simple-webpack模板完成同样的示例。

该示例的代码我就不贴出来了,大家可以到本文开头的GitHub地址去下载。

Vue 入门. 如何在HTML代码里面快速使用Vue的更多相关文章

  1. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  2. 09Vue.js快速入门-Vue入门之Vuex实战

    9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进 ...

  3. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  4. [易学易懂系列|rustlang语言|零基础|快速入门|(16)|代码组织与模块化]

    [易学易懂系列|rustlang语言|零基础|快速入门|(16)|代码组织与模块化] 实用知识 代码组织与模块化 我们知道,在现代软件开发的过程中,代码组织和模块化是应对复杂性的一种方式. 今天我们来 ...

  5. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  6. Vue 入门之 Vuex 实战

    Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...

  7. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  8. vue入门|ElementUI使用指南

    vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框 ...

  9. 手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]

    写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目 ...

随机推荐

  1. This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its de 错误解决办法

    这是我们开启了bin-log, 我们就必须指定我们的函数是否是1 DETERMINISTIC 不确定的2 NO SQL 没有SQl语句,当然也不会修改数据3 READS SQL DATA 只是读取数据 ...

  2. Python 自动化测试框架 unittest 和 pytest 对比

    一.用例编写规则 1.unittest提供了test cases.test suites.test fixtures.test runner相关的类,让测试更加明确.方便.可控.使用unittest编 ...

  3. 从tom大叔那想着拿书的,呵呵。

    //var tgtttime = new Date("2014/05/26 09:59:30"); var tgtttime = new Date("2014/05/26 ...

  4. 肺结节CT影像特征提取(五)——肺结节CT影像ROI区域灰度直方图及其图形化

    在博客肺结节CT影像特征提取中,已经实现了肺结节的灰度.纹理和形态特征的提取.但是,对于进一步了解ROI区域像素值或者说CT值的分布来说,还存在一定的不足,不能够很好的显示ROI区域. 因此,本文将进 ...

  5. grep、awk、sed的巩固练习

    作者:邓聪聪 提取日志或文本中的关键内容 Apr :: localhost NetworkManager[]: <info> (eno16777736): Activation: star ...

  6. WPF 10天修炼 第四天- WPF布局容器

    WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...

  7. Laravel-google-authenticator--Google验证码

    开发前的准备 安装Laravel 安装二维码生成器QrCode,没有安装也可以,接下来会安装 安装拓展 1.运行如下代码安装拓展包: composer require "earnp/lara ...

  8. Go依赖模块版本之Module避坑使用详解

    前提 对于Go的版本管理主要用过 glide,下面介绍 Go 1.11 之后官方支持的版本管理工具 mod. 关于 mod 官方给出了三个命令 go help mod.go help modules. ...

  9. P3966 [TJOI2013]单词

    P3966 [TJOI2013]单词 题目描述 小张最近在忙毕设,所以一直在读论文.一篇论文是由许多单词组成但小张发现一个单词会在论文中出现很多次,他想知道每个单词分别在论文中出现了多少次. 输入输出 ...

  10. DDT驱动selenium自动化测试

    建两个.py文件分别是是读取xlsx文件内容,一个是测试用例使用ddt驱动 获取xlsx文件内容 import xlrd class ParseExcel(object): def __init__( ...