webpack2.X、Vue学习以及将两者相结合
2023-09-27 14:26:44 时间
在家的闲暇时间来完善自己的前端知识。
经过两三天的学习,按照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开发一下通用的组件,啦啦啦~~
相关文章
- vue 学习
- (尚004)Vue计算属性之基本使用和监视
- [转] 深入理解vue 一些底层原理
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
- vue.js入门学习
- 创建Vue实例对象基础语法模板
- Vue绑定事件,双向数据绑定,只是循环没那么简单
- vue.js学习记录
- (刷新数据 )vue中通过this.$router.push 到当前页面,只是参数不同,页面没有重新请求数据?
- VUE-012-图表 v-charts 学习(一)饼图展示状态
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- Vue+Echarts监控大屏实例十一:智慧养老监控模板实例
- 在vue中引入layer弹框的简易方法
- Vue表单和组件
- 手把手学习Vue3.0:开发工具WebStorm和Vue模板文件介绍
- Django+Vue项目学习第七篇:利用nginx解决跨域问题
- Vue学习第33天——路由守卫(导航守卫)超详解讲解及使用场景、案例练习
- Vue学习第28天——路由传参(query参数和params参数)详解及案例
- Vue学习第25天——Vuex中的4个map方法的基本用法及案例练习
- Vue学习第24天——Vuex开发者工具的使用
- Vue学习第15天——props配置项详解
- IDEA打开启动Vue项目和Vue文件