webpack+vue.js实现组件化详解
投稿：daisy
字体：[ ] 类型：转载 时间：
vue的开发体验还是比较愉悦的。首先文档非常友好，所以上手会比较快。其次，配合webpack和vue-loader，每个页面都是一个.vue文件，写起来很方便。所以很适合做组件化开发，这篇文章我们就来一起看看webpack+vue.js如何实现组件化。
在vue中实现组件化用到了vue特有的文件格式.vue，在每一个.vue文件就是一个组件，在组件中我们将html，css，js全部写入，然后在webpack中配置vue-loader就可以了。
建立vue组件
在src目录下建立components文件夹，并在其中建立app.vue文件，这样我们项目的目录结构如下：
//webpack打包后生成的文件夹
| |--build.js
|--node_modules
//项目的依赖所在的文件夹
//文件入口
| |--components //组件存放文件夹
|--app.vue //组件
| |--main.js
//主js文件
|--index.html
//主html文件
|--package.json
|--webpack.config.js //webpack配置文件
首先在index.hmtl中写入代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Vue example&/title&
&app&&/app&
&script src="dist/build.js"&&/script&
在编辑器中打开app.vue文件，写入如下代码：
&template&
&div class="message"&{{msg}}&/div&
&/template&
export default {
msg: 'Hello from vue-loader'
font-size:36
font-weight:
在main.js中写入：
import Vue from 'vue'
import App from './components/app.vue'
el: 'body',
components:{App}
这样运行命令webpack就可以看到效果了
这里用到了ES6的模块儿—import，export
export命令
export命令用于规定模块的对外接口。一个模块就是一个独立文件。该文件内的所有变量外部都无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用export关键字对外暴露出该变量。例如：
//export.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
这样就可以对外输出三个变量。
import命令
使用export对外暴露了接口后，其他js文件通过import命令加载这个模块文件。上面暴露的三个变量在另一个js文件中引入如下：
//import.js
import {firstName,lastName,year} from './export';
function setName(element){
element.textContent = firstName + ' ' + lastN
webpack的hot-reload
前端自动刷新现在已经很常见了，即改变页面后，浏览器自动刷新，但是这个功能在我们做单页面应用时候会很不好用，所以，webpack支持hot-reload(热替换)，当我们修改模块时候不会页面不会刷新，会直接在页面中生效。
hot-reload的基础—webpack-dev-server
webpack-dev-server支持两种模式的自动刷新页面：
&&&& iframe模式（页面嵌入一个iframe并在其中呈现页面的变化）
&&&& inline模式（一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面）
iframe模式
使用iframe模式无需额外的配置，在dos下输入命令
$ webpack-dev-server
在浏览器中输入 http://loacalhost:8080/webpack-dev-server/index.html
inline模式
在dos下输入命令
$ webpack-dev-server --inline --hot
启动服务器，在浏览器中打开 http://loacalhost:8080 就可以看到我们的页面，此时修改app.vue中的css，以及html中的文字，都可以看到在浏览器中立马呈现。
关于webpack-dev-server的详细说明，可以参考官方文档或者博客WEBPACK DEV SERVER。
这里有一个问题需要说明下
在很多文章中都说，修改app.vue文件中script标签中的msg文字，会在浏览器中立即呈现效果，但是事实上我在做demo的时候并没有出现这个效果，Google了很多，找到了答案，尤大说：“data是初始值，但热更新的时候会保留当前状态”。
至此，关于webpack+vue的基本结束，虽然简单，但是由于在这个过程中也遇到一些坑，所以总结下，关于对vue的研究，这才只是个开始…
我的webpack配置文件：
var path = require('path');
module.exports = {
entry: './src/main.js',
path: './dist',
publicPath:'dist/',
filename: 'build.js'
//配置自动刷新,如果打开会使浏览器刷新而不是热替换
/*devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
loaders: [
//转化ES6语法
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
//解析.vue文件
test:/\.vue$/,
loader:'vue'
//图片转化，小于8K自动转化为base64的编码
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
js:'babel'
resolve: {
// require时省略的扩展名，如：require('app') 不需要app.js
extensions: ['', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
package.json文件：
"name": "webpackvue",
"version": "1.0.0",
"description": "",
"main": "vue.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue":"^1.0.24",
"vue-router":"^0.7.13",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.5.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.13.0"
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题： (vue.js)Vue引入第三方JS的问题，引入成功，但是使用方法报错
描述:之前自己写了一段JS，里面封装了一些逻辑操作方法。将项目转移到webpack中后，引入自己之前的js，却总是报错，找不到XXX方法用的 require方法这边Sources里面也没有我的js是我引入方法用错了吗使用 import 方法却能在sources里面找到，但还是报错解决方案1:你写的js需要 export，才能import进来
以上介绍了“ (vue.js)Vue引入第三方JS的问题，引入成功，但是使用方法报错”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/4215887.html
上一篇： 下一篇：webpack配合vue.js实现完整的单页面demo-爱编程
webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些npm包，由于npm的服务器在国外，可能我们下载的过程会比较慢，所以建议用阿里的镜像cnpm安装，10分钟实时更新一次npm的镜像。具体的下载配置参考阿里的cnpm官网。
本文章只是和大家探讨怎么利用webpack配合vue.js做一个单页面应用，具体关于vue里面的内容怎么写并不在本片文章的介绍范围。具体请参考官方文档，里面做了详细的vue的语法介绍.
建议阅读前准备内容
阅读过webpack文档
阅读过 文档
知道什么叫
1. 定义我们demo的基本目录
├── README.md
├── index.html
├── package.json
├── src
├── vue
├──home.vue
├──blog.vue
├──about.vue
├──topic.vue
├── components
├── views
├── scss
└── main.js
└── webpack.js
2. 配置一下我们的webpack.js文件
在介绍怎么配置之前你需要掌握一个命令 npm install &模块& --save-dev这个命令的意思是这个命名的意思是我们安装了这个包并且把它的基本信息写入目录的package.json文件。还有一个命令是我们直接运行cnpm install会自动下载package.json里面写入的包.
在webpack的配置文件我们需要用到四个npm的模块分别是： path， webpack，
extra-text-webpack-plugin, vue-loader记得先下载包在用 require命令引入进来
var path=require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var vue = require(&vue-loader&);
好了，我们已经把需要的模块引入进来了，接下来我们定义一些接下来要用到的一些文件夹路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src/main.js');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
基本的文件路径我们已经定义好了，接下来我们要用到 extra-text-webpack-plugin这个插件了
var plugins = [
new monsChunkPlugin('common.js'),
new ExtractTextPlugin(&style.css&),
new webpack.ProvidePlugin({
$: 'webpack-zepto'
接下来是webpack的重点了 loader，webpack的思想是把每个静态资源文件当做一个模块加载，我们需要做一些配置，在这里我们需要用到编译css，sass模块，多以我们还需要安装’css-loader’,’style-loader’,’node-sass’,’md5′
module.exports = {
entry:[APP_PATH],
path: BUILD_PATH，
filename：build.js'
// 指向异步加载的路径
publicPath : __dirname + '/build/',
// 非主文件的命名规则，加缓存用到md5
chunkFilename: '[id].build.js?[chunkhash]'
loaders: [
test: //.vue$/,
loader: 'vue',
test: //.scss$/,
loader: ExtractTextPlugin.extract(&style-loader&, 'css-loader')
test: //.css$/,
loader: ExtractTextPlugin.extract(&style-loader&, &css-loader&)
test: //.(png|jpg)$/,
loader: 'url?limit=40000'
//这个特别说明下，vue提倡把一个组件当做一个页面，所以可能在一个页面写html，style，javascript，也可以引入和写scss文件
css: ExtractTextPlugin.extract(&css&),
sass: ExtractTextPlugin.extract(&css!sass-loader&)
plugins: plugins
3. 配置我们的入口文件main.js
这里我们需要三个npm模块，vue，vue-router，vue-resource三个模块，我们依次安装然后在引入
var Vue = require('vue')
var VueRouter = require('vue-router');
var VueResource = require('vue-resource');
在vue里面声明并注册个空组件
Vue.use(VueRouter);
Vue.use(VueResource);
var app = Vue.extend({});
实例化VueRounter
var router = new VueRouter({
hashbang: true,
history: false,
saveScrollPosition: true,
transitionOnLoad: true
接下来写下我们的路由路径，也可以单独把路由写在一个文件，我们这边只是个demo所以写一起了，不打紧，关于这块路由的写法可以具体参考下vue-router的文档
，将的很详细。
这里有必要将一下，webpack提供了异步加载功能，配合vue-router的路由使用，当哪个组件需要渲染是，会加载它依赖的组件，并且异步加载进来。是不是很棒。
router.map({
component: function (resolve) {
require(['./vue/home.vue'],resolve)
name : 'home',
component: function (resolve) {
require(['./vue/home.vue'],resolve)
name : 'blog',
component: function (resolve) {
require(['./vue/blog.vue'],resolve)
'/blog/topic':{
name : 'topic',
component: function (resolve) {
require(['./vue/topic.vue'],resolve)
'/about':{
name : 'about',
component: function (resolve) {
require(['./vue/about.vue'],resolve)
再加句代码，测试访问路由访问是否成功
router.afterEach(function (transition) {
console.log('成功浏览到: ' + transition.to.path)
最后我们注册下vue
router.start(app, &#app&);
4. 填充下index.html文件的结构
&router-view&用于渲染匹配的组件，它基于 Vue 的动态组件系统。我们的index.html结构是这样子的
&!DOCTYPE html&
lang=&en&&
charset=&UTF-8&&
rel=&stylesheet& href=&./build/style.css&&
src=&./build/common.js&&&
src=&./build/build.js&&&
5. 怎么写一个组件
关于组件，vue提倡一个模块写一个具体的组件比如列表组件可以list.vue，然后根据路由加载具体的组件，组件之间也可以相互的引用，具体参考vue文档。
为了方便我们测试，我们以home为例，其他组件也类似，方便等下测试，等项目能完整跑起来你在自己去添加组件里面的内容。
6. 运行webpack
关于一个单页面的大体的框架我们已经搭建好了，现在直接运行webpack就能把文件载出来了。然后打开index.html直接测试就好了。
更详细的demo已经提交到github上了
觉得本篇文章对你有帮助的话可以关注我一下，后期会出一些关于基于vue.js开发单页面开发心得，谢谢！
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。问题：vue.js (vue.js)前后端分离 的单页应用部署问题？
描述:创建一个前后端分离的单页应用该如何实现前端和后端文件的分开部署像利用vuejs或者react写的单页应用可以直接放到后端项目的静态文件下 一起部署吗。需要依赖nodejs吗？如果只是单纯的想vuejs写界面是不是部署的时候可以不适用nodejs环境！希望知道的兄弟讲解下前后端分离的部署问题，单页应用的部署问题！（部署平台 windows）解决方案1:nginxroot
打包好的静态文件目录;
index index.
location /api_root {
proxy_pass api 服务的地址;
}解决方案2:你说的单页面部署是什么意思？假如你使用vue的话，可以直接用官方的cli，这个工具build出来的东西可以直接当做static使用，跟后台是没有关系哒。你可以参照我之前写的一个小项目，github-explorer。前后端是完全分离的，中间的连接只是ajax接口。后台用什么都可以，当然如果你用nodejs和react的话，还可以用ssr解决部分seo的问题，但是建议你可以先从我那个项目看起。希望对你用。解决方案3:所谓前后端分离，暂且不谈Node中间层的情况，先说传统意义上的前后端，页面上使用API进行数据交互来进行分离时：你写你的前端，使用webpack或者glup等打包编译工具进行编译。需要的数据使用API向后端拿。此时的部署是这样的：写好js、css等资源文件，编译打包（要确保在HTML里引用正确路径的资源文件）部署项目。用户访问某路由，由后端判断，选择正确的HTML作为response渲染出来所以实际上前端文件是依赖于后端跑的服务的针对Node中间层，稍有一些不同：我们把Node中间层包含在大前端领域，因此可以说它也属于前端范畴。此时的后端仅仅提供API。也就是说，从前端页面上发出的Ajax，会由Node router接收，然后通过controller或者server，再次发出一个异步请求，向后端API请求数据。此时，如果只有前端部署，则只需要跑Node服务，由路由渲染HTML的活也是Node干的。部署过程：编译前端资源文件部署Node如果后端接口不变，可以不需要部署在中间层的情况下，后端用什么语言什么环境都与前端无关
以上介绍了“vue.js (vue.js)前后端分离 的单页应用部署问题？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/4007587.html
上一篇： 下一篇：
vue.js相关图片
vue.js相关文章vue.js开发单页面应用？ - 跟谁学
搜索你想学的科目、老师试试，例如“吉他”搜索吉安
&&vue.js开发单页面应用？我有一个前端项目，需要自己从头开始搭建一个单页面应用 我想采用vue.js框架来实现我的前端项目。但是有些配置我还是不清楚。 我所构想的技术应用有： webpack ＋ es6 ＋vue.js ＋ vue-router来构建我的项目。
难点：组件模块我想实现按需加载，而不是全部打包出一个文件里，这样首页加载会很慢。但是我不知道怎么配置怎么写，麻烦知道的告知一下，谢谢！colinapksAnnatarHe
务必用单向数据流，比如就是个很棒的选择。务必单向数据流务必单向数据流务必单向数据流重要的事情说三遍至于组件加载，webpack有code split的功能，这个还是自己查文档吧。
看下我的 手机回复不太好放链接
参考下这个例子吧：
我也没写过，只是在尝试。。g一下
webpack代码分割，看哈这个
不建议一开始就这么搞，你可以就只用vuejs写。 循序渐进
yuanxj1024
应用的场景对浏览器兼容要求不高，vuejs是到IE9对MVVM有一定的经验加载速度要求高对性能要求比较高需要组件化开发喜欢对原生js对象操作SPA
cantopeneyes
组件按需加载，和webpack配置无关，和代码如何写有关。webpack文档里，有一节是说代码分隔的[1]。比如使用 CommonJS 风格：require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");});这里require.ensure的第二个参数，也就是那个回调函数，会在模块全部下载完成后调用。但是，你需要显式地执行模块，也就是var a = require("module-a");，不然模块不会执行。还有其他分隔的异步加载方式，具体请看文档。1
可以参考这个开源项目，一个超级简单初级的vue前端实现，适合新手
用vue-cli 啊，里面有作者写的es6 的template，再npm install vue-router --save 再把github上vue-router里的例子粘过来，很简单啊
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心}