在家的闲暇时间来完善自己的前端知识。

经过两三天的学习，按照webpack文档学习，vue文档学习，最后实现了两者结合的目标。

webpack

按照网站上guide的流程依次学习

1、使用npm安装webpack
2、设置输入文件，比如怎样引入css，images，fonts，data
3、设置输出文件，比如可以根据自己的设置来决定输出脚本的名称，生成新的页面，在每次生成新页面之前先把旧的页面进行清理
4、开发过程中，使用source maps来显示提示信息，方便开发者定位错误的信息，使用本地服务器访问页面。
5、对于输出的文件进行压缩，减小文件的大小

Vue

1、使用npm进行安装vue
2、在webpack的入口文件中使用

import Vue from 'vue';

引入vue，这样会报错，错误显示引入的是vue.runtime.esm.js，当我们在webpack中使 用：



module.exports = {

  // ...

  resolve: {

    alias: {

      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

    }

  }

}

就可以解决报错；

3.最后引入



module.exports = {

  // ...

  plugins: [

    // ...

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: JSON.stringify('production')

      }

    })

  ]

}

代码展示

目录结构：

index.html



<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>vue page</title>

    <div class="" id="main">

      <div class="" id="head">

      </div>

      <div class="" id="container">

        {{message}}

      </div>

      <div class="" id="foot">

      </div>

    </div>

  </head>

  <body>

  <script type="text/javascript" src="app.bundle.js"></script></body>

</html>

webpack.config.js



const path = require('path');

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const webpack = require('webpack');

module.exports = {

  entry : {

    app : './resourse/script/app.js',

  },

  devtool: 'inline-source-map',

  devServer: {

    contentBase: './dist',

    hot: true

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: JSON.stringify('production')

      }

    }),

    new webpack.HotModuleReplacementPlugin(),

    new UglifyJSPlugin()

  ],

  output : {

    filename : '[name].bundle.js',

    path : path.resolve(__dirname, 'dist')

  },

  resolve: {

   alias: {

     'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

   }

 }

}

app.js



import _ from 'lodash';

import Vue from 'vue';

var app = new Vue({

  el: '#container',

  data: {

    message: 'Hello Vue!'

  }

})

最后，可以看到一个经典的hello world显示在页面上。

到此时我认为最简单的webpack和vue已经结合，可以正常的进行前端的开发了，ok，我先开始使用一下自己的劳动成果，使用vue开发一下通用的组件，啦啦啦~~

原文地址：https://segmentfault.com/a/1190000012644031

webpack2.X、Vue学习以及将两者相结合的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  9. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

随机推荐

  1. css——应用多个样式

    应用多个样式 在class中使用多个样式 在这是会有优先级关系问题 在上面的代码中,aa,bb,中的颜色会有冲突,到底显示的结果会是黄色还是绿色呢? 结果是绿色的.它是以程序执行的先后为优先级,后执行 ...

  2. hdu 1693 插头dp入门

    hdu1693 Eat the Trees 题意 在\(n*m\)的矩阵中,有些格子有树,没有树的格子不能到达,找一条或多条回路,吃完所有的树,求有多少种方法. 解法 这是一道插头dp的入门题,只需要 ...

  3. vi 编辑器的日常使用

    命令行模式: 光标管理 text  屏幕 行 单词 gg 跳转到文档头部 H 跳转到屏幕首行 ^  或 数字0 跳转到行首 w 向前 G 跳转到文档尾部 M 跳转到屏幕中行 $ 跳转到行尾 b 向后 ...

  4. Android开发进度05

    1,今日:目标:完成后台用户的增删改查 2,昨天:完成登录和注册功能 3,收获:熟练了SQLite操作 4,问题:无

  5. selenium chrome.options禁止加载图片和js

    #新建一个选项卡 from selenium import webdriver options = webdriver.ChromeOptions() #禁止加载图片 prefs = { 'profi ...

  6. Maven学习总结（24）——Maven版本管理详解

    Maven的版本分为快照和稳定版本,快照版本使用在开发的过程中,方便于团队内部交流学习.而所说的稳定版本,理想状态下是项目到了某个比较稳定的状态,这个稳定包含了源代码和构建都要稳定. 一.如何衡量项目 ...

  7. 【转】 c#中两个DateTimePicker，一个时间设置为0:0:0,另一个设置为23:59:59

    [转] c#中两个DateTimePicker,一个时间设置为0:0:0,另一个设置为23:59:59 stp1为第一个DateTimePicker this.dtp1.Value=this.dtp1 ...

  8. SQL SERVER-常用命令2

    1.创建新表 create table mytest ( id int primary key identity(1,1),--主键,自动+1 name varchar(20) unique notn ...

  9. HDU 4316 Contest 2

    三个摄像头,在XOY上与立体的点求出在平面上的交点,然后求出凸包.三个凸包相交的面积即是所求,即是可以用半平面交的方法求解了. 模板题了.代码拿别人的. #include<cmath> # ...

  10. HDU 4305 Contest 1

    感觉是有很多细节要处理的.尤其是求逆元后的运算,应该是存在超范围的情况的. #include <iostream> #include <cstdio> #include < ...