详解用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 相关文章推荐
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
vue-router 学习快速入门
Mar 01 Javascript
详解原生js实现offset方法
Jun 15 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
node中间层实现文件上传功能
2018/06/11 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
深入浅析python with语句简介
2018/04/11 Python
Python操作MySQL数据库的方法
2018/06/20 Python
浅析Python四种数据类型
2018/09/26 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
数据保密承诺书
2014/06/03 职场文书
小学学校评估方案
2014/06/08 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书