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

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语法已经被转化了

最终项目目录如图所示

在根目录下新建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>

页面如图所示

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type=

  • Vue2.0使用过程常见的一些问题总结学习

    最近在学习Vue,今天正好写个学习笔记,把以前遇到的错误给总结一下. Vue目前的的开发模式主要有两种: 1.直接页面级的开发,script直接引入Vue 2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack可以进行配置,配置多文件入口,进行多页面开发 第二种Vue开发,结合webpack打包完文件会很大,怎么解决这个问题? 1.webpack代码拆分:code-spliting 2.提取公共(如提取css,js) 3.预渲染:使

  • Vue2.0 UI框架ElementUI使用方法详解

    Vue2.0 UI框架ElementUI使用方法详解

    今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+

  • vue2.0 自定义日期时间过滤器

    方法一: // template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() + 1; var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); var

  • vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以由vm.$emit触发.回调函数会接收所有传入事件触发函数的额外参数. vm.$emit( event, [-args] ) 触发当前实例上的事件.附加参数都会传给监听器回调. 例子: //父组件 <template> <ratingselect @select-type="onSele

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

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

    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

  • 详解基于webpack2.x的vue2.x的多页面站点

    详解基于webpack2.x的vue2.x的多页面站点

    本文介绍了基于webpack2.x的vue2.x的多页面站点,分享给大家,具体如下: vue的多页面 依旧使用vue-cli来初始化我们的项目 然后修改主要目录结构如下: ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── we

  • 详解如何利用Nodejs构建多进程应用

    目录 前言 进程的创建和使用 多核利用率 创建子进程 进程间通信 IPC 总结 前言 JavaScript 主线程运行在单个进程的单个线程上.这样做的好处是: 程序状态是单一的,在没有多线程的情况下没有锁.线程同步问题, 操作系统在调度时因为较少上下文的切换,可以很好地提高CPU的使用率. 但是单进程单线程并非完美的结构,一旦线程中某段代码发生异常阻塞,会阻塞代码执行而浪费资源.同时,如今CPU基本均是多核的,服务器往往还有多个CPU. 因此 Nodejs 不可避免的面临两个问题:如何充分利用多

  • vue1.0和vue2.0的watch监听事件写法详解

    如下所示: watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 } } 以上这篇vue1.0和vue2.0的watch监听事件写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解如何用SpringBoot 2.3.0.M1创建Docker映像

    1.发布 SpringBoot2.3.0.M1刚刚发布,它带来了一些有趣的新特性,可以帮助您将SpringBoot应用程序打包到Docker映像中.在这篇博客文章中,我们将查看创建Docker映像的典型方式,并展示如何通过使用这些新特性来改进这些镜像 2.说明 SpringBoot 2.3.0.M1 暂时不支持Windows, 很鸡肋 暂时在Mac 和Linux 上运行良好 3.常见的Docker 运行方式 一般情况下,通过docker 运行springboot 是这样的 FROM openjd

  • 详解Android中PopupWindow在7.0后适配的解决

    详解Android中PopupWindow在7.0后适配的解决

    本文介绍了详解Android中PopupWindow在7.0后适配的解决,分享给大家,具体如下: 这里主要记录一次踩坑的经历. 需求:如上图左侧效果,想在按钮的下方弹一个PopupWindow.嗯,很简单一个效果,然当适配7.0后发现这个PopupWindow显示异常,然后网上找到了下面这种方案. 7.0适配方案(但7.1又复现了) // 将popupWindow显示在anchor下方 public void showAsDropDown(PopupWindow popupWindow, Vie

  • 详解DevEco Studio项目构建讲解、编写页面、布局介绍、页面跳转

    首先要知道鸿蒙的APP是怎么构成的?   HarmonyOS的应用软件包以APP Pack(Application Package)形式发布,它是由一个或多个HAP(HarmonyOS Ability Package)以及描述每个HAP属性的pack.info组成.HAP是Ability的部署包,HarmonyOS应用代码围绕Ability组件展开. 一个HAP是由代码.资源.第三方库及应用配置文件组成的模块包,可分为entry和feature两种模块类型,如下图所示. 一.项目目录 首先来看一

  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <

  • 最新版MySQL 8.0.22下载安装超详细教程(Windows 64位)

    最新版MySQL 8.0.22下载安装超详细教程(Windows 64位)

    前言 前几天下载安装了最新版的MySQL 8.0.22,遇到了不少问题,参考了一些方法,最终得以解决.今天将自己的安装过程记录下来,希望对各位有所帮助. 一.MySQL 8.0.22官网下载 点击进入MySQL官网:https://www.mysql.com/ ① 点击DOWNLOADS ② 向下翻,找到MySQL Community(GPL) Downloads并点击进入 ③ MySQL Community Server ④Download ⑤ 解压,内部文件如图所示(data和databas

  • pcl1.8.0+vs2013环境配置超详细教程

    pcl1.8.0+vs2013环境配置超详细教程

    目录 准备 安装 配置 最近开始学习pcl,经过几天的捣鼓终于将pcl1.8.0和vs2013的环境搭建起来. 准备 pcl版本:PCL-1.8.0-AllInOne-msvc2013-win64 vs版本:vs2013 下载地址链接:链接: https://pan.baidu.com/s/1L6trLERkzylkBUjTw94RNQ?pwd=ep39   提取码: ep39 因为我的电脑是64位的,所以只有64位版本. 安装 vs2013下载解压默认安装就好了. PCL整个安装过程需要注意以

随机推荐