vue 结合webpack的初级使用指南小白学习篇
引言
webpack：现在很流行的打包工具；
推荐原因：学习成本比gulp，fis3等简单，就是这么直接！
vue：国人开发的MVVM框架，一点都不逊于recat，vue2.0的执行速度比recat都快！
但我们今天学的是vue1.0，
原因：
- vue2.0我还不会(^_^)!而且新手还是vue1.0学习为主吧。
- 中文文档全，学习曲线简单，很容易上手。
课程开始需要技能：
- 1>.node.js环境
- 2>.npm 会使用 (我的笔记中有smart-npm可以解决npm慢的问题)
- 3>.vue 最基本的{{}}符号会用（不会的去vue官网看5分钟教程就会）
- 4>.ES6 基本知道import是什么东西就行
适用学习人群：用过vue，但不知道如何和webpack一起结合使用的迷茫者；
项目创建
这里已经安装过nodejs，npm，webpack
1.用命令行工具进入你需要创建模板文件夹输入：
$ mkdir myvuetest $ cd myvuetest $ npm init
你会发现文件中出现了package.json暂时不用管；
2.在项目目录下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue example</title>
</head>
<body>
<div>{{message}}</div>
<script src="dist/build.js"></script>
</body>
</html>3.在根目录创建src文件夹，并在该文件夹下建立main.js
import Vue from 'vue'
new Vue({
el:'body',
data:{
message:'test success!'
}
});设置webpack
安装webpack，webpack-dev-server以及相关的loaders
# 全局安装webpack，webpack-dev-server，全局安装因为其他项目也会使用到这两个包 $ npm install -g webpack $ npm install -g webpack-dev-server # 为项目安装其他依赖 下面i是install的简写，注意vue@1.0是安装vue1.0版本的不然会出错；-D是--save-dev的简写，用于生成package.json中对应的包名称，便于日后管理 $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue@1.0 vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D
部分包的作用解释
webpack-dev-server： 用户建立node的服务器环境，就是可以用lacalhost：8080等端口方式浏览文件
webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并
css-loader：编译写入css
style-loader：把编译后的css整合进html
file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue：vue主程序
vue-laoder：编译写入.vue文件
vue-html-loader：编译vue的template部分
vue-style-loader：编译vue的样式部分
vue-hot-reload-api：webpack对vue实现热替换
babel-core：ES2015编译核心<br/>
babel-loader：编译写入ES2015文档
babel-preset-es2015：ES2015语法
babel-preset-stage-0：开启测试功能
babel-runtime：babel执行环境
配置webpack.config.js
在根目录下建立webpack.config.js，配置如下：
var path = require('path');
module.exports = {
entry: './src/main.js',
//定义webpack输出的文件，这里设置了让打包后生成的文件放在dist文件夹下的build.js文件中
output: {
path: './dist',
publicPath:'dist/',
filename: 'build.js'
},
module: {
loaders: [
//转化ES6语法
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
//图片转化，小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
//这里用于安装babel，如果在根目录下的.babelrc配置了，这里就不写了
babel: {
presets: ['es2015','stage-0'],
plugins: ['transform-runtime']
}
}完成该配置我们在命令中运行：
$ webpack
打开index.html就可以看到浏览器中看到我们刚刚写的文字了。
总结
在学习打包工具过程中由于出现的问题各种蛋疼，让很多人都半途而废。我经历了半途而废又重新捡起来，搜别人的问题解决自己的问题，然后就慢慢学会了。大家互相学习共同进步！本节讲的都是很基础的东西，自己可以延展一下。
还有我推荐的是webpack+ES6+vue的新手学习模式！这样你就不会被互联网技术淘汰！可以关注我，我这个人挺懒的很久才写一篇，但都是用最基础的讲通大家学习的疑惑！值得关注哦！^_^
更多关于vue webpack使用的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue中的使用token的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
Swiper常用于移动端网站的内容触摸滑动,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,下面这篇文章主要给大家介绍了关于swiper在vue中的简单使用方法,需要的朋友可以参考下2022-09-09
如何使用el-table+el-tree+el-select动态选择对应值
小编在做需求时,遇到了在el-table表格中加入多条数据,并且每条数据要通过el-select来选取相应的值,做到动态选择,下面这篇文章主要给大家介绍了关于如何使用el-table+el-tree+el-select动态选择对应值的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了Vue中的.vue文件的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue中实现当前时间echarts图表时间轴动态的数据(实例代码)
这篇文章主要介绍了vue中实现当前时间echarts图表时间轴动态的数据，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-10-10
Element UI table参数中的selectable的使用及遇到坑
这篇文章主要介绍了Element UI table参数中的selectable的使用及遇到的坑，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了使用vue-cli3打包dist路径问题修改打包配置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue如何动态获取当前时间问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要给大家介绍了关于vue3项目打包与上线的相关资料,在项目完成得差不多得时候,就可以开始打包部署了,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
最新评论