webpack打包vue项目demo
2017-06-27 16:32
357 查看
这两天在学习使用webpack去打包vue,遇到了一些坑,在这里提供一套可用的配置供大家参考。
上面是我的目录。(有些文件不是开始新建的文件,下面会进行说明)
首先大家可以新建一个空目录,假设叫vue-test。
进入到里面新建上述的App.vue,main.js,webpack.config.js,index.html这四个文件。
接下来使用npm进行初始化。没有安装node.js的小伙伴安装一下吧,目前npm是安装node时自带了。不用单独安装了。
初始化 : npm init -y
安装必要的loader:见下方图
编写配置文件:webpack.config.js.,见下图
编写App.vue:主要由三个部分组成,template,script,style。
编写main.js
编写index.html文件
使用webpack进行打包,我的版本是2.x。因为配置信息已经写好,所以如果不加参数的话,可以直接在命令行中敲:webpack。就会看到目标文件bundle.js生成。然后手动打开index.html。看到了welcome vue字样。
上图是我安装的loader,有些看上去没有必要,但是我在打包时明确给我指明了缺少这个module,所以我就添加上了~。
上图是webpack.config.js的配置:其中entry代表入口文件,output代表输出文件信息,module是重要的参数,里面记录了loaders信息。里面配置了解析.vue文件的loader。解析js文件(主要用于解析es6语法)的babel-loader。resolve是预防无法解析vue模块进行的配置。
上面是我的目录。(有些文件不是开始新建的文件,下面会进行说明)
首先大家可以新建一个空目录,假设叫vue-test。
进入到里面新建上述的App.vue,main.js,webpack.config.js,index.html这四个文件。
接下来使用npm进行初始化。没有安装node.js的小伙伴安装一下吧,目前npm是安装node时自带了。不用单独安装了。
初始化 : npm init -y
安装必要的loader:见下方图
编写配置文件:webpack.config.js.,见下图
编写App.vue:主要由三个部分组成,template,script,style。
编写main.js
编写index.html文件
使用webpack进行打包,我的版本是2.x。因为配置信息已经写好,所以如果不加参数的话,可以直接在命令行中敲:webpack。就会看到目标文件bundle.js生成。然后手动打开index.html。看到了welcome vue字样。
注:babel.config.js这个文件是为了解决webpack2.x时有些loader的plugin无法进行配置,必须建立对应的 loadername.config.js所进行建立的,里面是:
使用1.0的同学可以去查一下1.0的一个写法,这里就不再演示。babel.config.js module.exports=function(){ plugins:[ require("transform-runtime") ] }
APP.vue <template> <div id="app"> //如果你采用的是vue2.0,那么在template里面必须要有一个父标签包含住你的目标标签,本想输出h2,现在要在外面嵌套一层div,就是这个道理。如果使用的是vue1.0就不需要了。 <h2>{{msg}}</h2> </div> </template> <script> export default{ data(){ return{ msg:"welcome vue" } } } </script> <style> </style>
main.js import Vue from "vue"; import app from "./App.vue"; new Vue({ el:".container", render:h=>h(app)//如果你安装的是vue2.0请采用这个语法 }); || new Vue({ el:".container", components:{ app:app }//如果你安装的是vue1.0请采用这个语法 });
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="container" style="height:200px"> //如果是vue2.0这边不用指定<app>这个模板标签,并且使用vue绑定的这个div会在最后的页面中被取代,这就是为什么2.0需要一个嵌套的元素的原因。 </div> //如果是1.0版本就按照下面的写 <div class="container" style="height:200px"> <app></app> </div> <script type="text/javascript" src="bundle.js"></script> </body> </html>
上图是我安装的loader,有些看上去没有必要,但是我在打包时明确给我指明了缺少这个module,所以我就添加上了~。
上图是webpack.config.js的配置:其中entry代表入口文件,output代表输出文件信息,module是重要的参数,里面记录了loaders信息。里面配置了解析.vue文件的loader。解析js文件(主要用于解析es6语法)的babel-loader。resolve是预防无法解析vue模块进行的配置。
相关文章推荐
- webpack打包vue项目后,一些文件图片路径找不到的问题解决办法
- vue项目构建-打包-发布--简易demo
- 开始 vue-cli webpack 打包工具的demo
- 【Vue2.0】 项目实战案例及Demo,基于vue2.0+vuex+vue-router2+axios实现
- vue-route+webpack单页路由项目,打包后访问正常刷新出现404问题
- vue项目打包之后js文件过大怎么办?
- vue-cli构建项目 npm run build打包后怎么在本地查看效果
- 如何降低Vue.js项目中Webpack打包文件的大小?
- vue 项目打包时样式及背景图片路径找不到
- vue.js项目打包上线
- 16.如何做到webpack打包vue项目后,可以修改配置文件
- 用Cordova打包Vue项目
- webpack打包react项目
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- 教你用Cordova打包Vue项目
- Vue项目webpack打包部署到服务器的实例详解
- Vue2.0 项目实战案例及Demo,基于vue2.0+vuex+vue-router+axios实现
- 通过cordova将vue项目打包为webapp
- Vue项目webpack打包部署到服务器
- vue2.0项目结构和打包发布