webpack2.X、Vue学习以及将两者相结合
在家的闲暇时间来完善自己的前端知识。
经过两三天的学习，按照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学习以及将两者相结合的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue学习笔记（二）——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
随机推荐
- 并发编程——全局解释器锁GIL
1.全局解释器锁GIL GIL其实就是一把互斥锁(牺牲了效率但是保证了数据的安全). 线程是执行单位,但是不能直接运行,需要先拿到python解释器解释之后才能被cpu执行 同一时刻同一个进程内多个线 ...
- Element源码阅读(2)
一.element中的指令 在input-number组件中, 用到一个v-repeat-click指令, 主要用于input-number组件的重复点击效果.具体实现在directives中的rep ...
- jQuery中的DatePicker今天按钮不起作用
转载:http://codego.net/63433/ jquery-ui 日期选择器datepicker我想用 jQueryUI 的 DatePicker ,并显示“今天”按钮, 但它不工作,它也不 ...
- HDU 2049 不容易系列之(4)——考新郎（ 错排 ）
链接:传送门 思路:错排水题,从N个人中选出M个人进行错排,即 C(n,m)*d[m] 补充:组合数C(n,m)能用double计算吗?第二部分有解释 Part 1. 分别求出来组合数的分子和分母然后 ...
- MySQL 面试题（一）
原文地址:http://www.2cto.com/database/201311/254385.html 作者:黄杉(红黑联盟) 公司招聘MySQL DBA面试心得 1 2年MySQL DBA经 ...
- python_for循环
#for循环'''for i in range(0,10,2):age_oldboy = 56for i in range(3): guess_age = int(input("guess ...
- Java基础学习总结（59）——30 个java编程技巧
1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 "if else" 判断null ...
- sql server 与 mysql在自定以数据类型的区别
sql server 中可以使用 create TYPE postal_code FORM varchar(6) not null; 用于限定邮编的数据位数,他基于varchar数据类型 注意: ...
- (转)Epoll模型详解
1. 内核中提高I/O性能的新方法epoll epoll是什么?按照man手册的说法:是为处理大批量句柄而作了改进的poll.要使用epoll只需要这三个系统调 用:epoll_create(2), ...
- MonkeyRunner源代码分析之启动
在工作中由于要追求完毕目标的效率,所以很多其它是强调实战.注重招式.关注怎么去用各种框架来实现目的.可是假设一味仅仅是注重招式.缺少对原理这个内功的了解,相信自己非常难对各种框架有更深入的理解. 从几 ...