详解用webpack2.0构建vue2.0超详细精简版


Posted in Javascript onApril 05, 2017

npm init -y 初始化项目

安装各种依赖项

npm install --save vue 安装vue2.0

npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号

npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel,一般的浏览器是不认识es6语法的,babel的作用是将es6的语法编译成浏览器认识的语法

npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件,.vue后缀的文件

npm install --save-dev css-loader file-loader 用来解析css

编写页面

新建目录src,里面新建App.vue

<!-- 简单写个title和一个循环 -->
<template>
  <div id="example">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="n in 5">{{ n }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style scoped>
#example {
  background: red;
  height: 100vh;
}
</style>

在src目录下新建main.js

/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue'

/* 实例化一个vue */
new Vue({
 el: '#app',
 render: h => h(App)
})

配置webpack

在根目录下新建webpack.config.js

/* 引入操作路径模块和webpack */
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'
  },
  module: {
    rules: [
      /* 用来解析vue后缀的文件 */
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
      {
        test: /\.js$/,
        loader: 'babel-loader',
        /* 排除模块安装目录的文件 */
        exclude: /node_modules/
      }
    ]
  }
}

打包项目

npm install -g webpack@^2.1.0-beta.25 全局安装webpack,以便使用webpack命令

webpack 用webpack命令打包项目,这是目录下会多出一个dist文件夹,查看里面会有build.js,发觉里面的es6语法已经被转化了

最终项目目录如图所示

详解用webpack2.0构建vue2.0超详细精简版

在根目录下新建index.html,引入build.js

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
  <section id="app"></section>
  <script src="./dist/build.js"></script>
</body>
</html>

页面如图所示

详解用webpack2.0构建vue2.0超详细精简版

这样就算打包完成了,但是每修改一次都要重新打包这样显然没有任何效率,于是需要线上的热重载

npm install -g webpack-dev-server@^2.1.0-beta.9 全局安装webpack-dev-server,以便使用webpack-dev-server命令

webpack-dev-server 等待程序运行完毕

在浏览器输入http://localhost:8080/查看页面

这时修改页面的代码,不用刷新浏览器直接更改

详解用webpack2.0构建vue2.0超详细精简版

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 注册事件代码
Jan 27 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
Vue SSR 组件加载问题
May 02 Javascript
js实现3D照片墙效果
Oct 28 Javascript
关于vuex的学习实践笔记
Apr 05 #Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 #Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 #Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 #Javascript
Vue.js render方法使用详解
Apr 05 #Javascript
self.attachevent is not a function的解决方法
Apr 04 #Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 #Javascript
You might like
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
vue动态设置img的src路径实例
2018/09/18 Javascript
小程序实现多选框功能
2018/10/30 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python日期操作学习笔记
2008/10/07 Python
python操作mysql数据库
2017/03/05 Python
Python元字符的用法实例解析
2018/01/17 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
教师评优事迹材料
2014/01/10 职场文书
教学器材管理制度
2014/01/26 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
学校卫生检查制度
2014/02/03 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
诚信考试倡议书
2014/04/15 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
Python中itertools库的四个函数介绍
2022/04/06 Python