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学习之 ...
随机推荐
- 洛谷T44252 线索_分治线段树_思维题
分治线段树,其实就是将标记永久化,到最后再统一下传所有标记. 至于先后顺序,可以给每个节点开一个时间戳. 一般地,分治线段树用于离线,只查询一次答案的题目. 本题中,标记要被下传 222 次. Cod ...
- Pyhton学习——Day11
# Python中的内部模块# 函数学习的意义:抽取重复代码# 模块:不用重复写,模块及py文件,提高了代码的可维护性,其次,编写代码不必从零开始,当一个模块编写完毕,不必再重复编写# import ...
- 更新GitHub的仓库
在GitHub上仓库已经存在且提交过,本地仓库部分更新后推送至GitHub仓库 添加,提交至本地仓库 将改动文件添加并提交到仓库 Roc@DESKTOP-AF552U2 MINGW64 /e/note ...
- Ajax原理-重点
Ajax原理 AJAX即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术.它可以令开发者只向服务 ...
- Jquery-select元素操作方法
jQuery获取Select元素,并选择的Text和Value: $("#select_id").change(function(){//code...}); //为Select添 ...
- APP热更新方案（转）
本文转载自[http://creator.cnblogs.com/] 博客地址:Zealot Yin 为什么要做热更新 当一个App发布之后,突然发现了一个严重bug需要进行紧急修复,这时候公司各方就 ...
- cocos2d-x学习笔记(18)--游戏打包（windows平台）
cocos2d-x学习笔记(18)--游戏打包(windows平台) 之前做好的游戏,都是在vs2008下编译执行的.假设说想把游戏公布到网上或者和其它人一起分享游戏,那就得对游戏 ...
- HDU 4323 Contest 3
编辑距离,经典的了.动态规划枚举即过. #include <iostream> #include <cstdio> #include <string.h> #inc ...
- java文件对照工具
今天想比較一下两个java文件.这两个文件是本地的. 就在网上下载了一个对照工具(破解版)认为挺好用的对于不同的地方有高亮显示. 就给大家分享一下.软件名叫:beyond compare 软件下载地址 ...
- Baby_Step,Gaint_Step(分析具体解释+模板)
下面是总结自他人博客资料.以及本人自己的学习经验. [Baby_Step,Gaint_Step定义] 高次同余方程. BL == N (mod P) 求解最小的L.因为数据范围非常大,暴力不行 这里用 ...