webpack4.5.0+vue2.5.16+vue-loader 实战组件化开发案例以及版本问题中踩的一些大坑!!!
一 vue-loader
我们先不管脚手架,只说vue-loader,简单讲就是可将.vue文件打包,实现组件化开发,即一个.vue文件就是一个组件,开发中只需要引入这个.vue组件就可以了!
然后.vue文件的特性:
,
即一个.vue中包含了模板,js,css三个模块来描述这个组件!
二 新建webpack项目(超级多坑,一一来说)
首先新建demo目录,初始化 npm init --yes,然后安装webpack和webpack-dev-server,因为我这里没有指定版本,所以直接安装了最新的4.5.0版本,导致有许多配置的坑!,然后建立项目结构,如下图:
,
然后安装一些必要的组件:
vue-loader@14.2.2 ,这个我在实践中先安装的8.5.4,然后一直报错无法读取'vue',文件错误显示是vue-loader/lib下面的js,根据经验肯定是版本不对导致了,
这个时候两种解决办法:
一 要么修改webpack的版本,
二 要么修改vue-loader的版本
这里我采用修改vue-loader的版本,亲测如果是webpack@4.5.0,vue-loader@14.2.2.其他版本基本全部报错,真是坑!
然后就是其他的laoder:
,然后还有一点,如果是想用import的话还要安装babel:
,
最后--save安装vue,注意前面的最好都要--save-dev安装,然后再安装html-webpack-plugin插件便于html打包
三 webpack配置
配置如下:
const path=require('path')
const htmlPlugin=require('html-webpack-plugin')
module.exports={
entry:{
entry:'./src/index.js' //入口文件
},
output:{
path:path.resolve(__dirname,'dist'),//dist的绝对路径,node的语法
filename:'./js/[name].js', //打包后的js文件名
},
resolve: {
extensions: [ '.js', '.vue'], //同时打包.vue文件
alias:{
'vue$':'vue/dist/vue.js' //启用别名,这样可以直接引用 'vue'
}
},
module:{
rules:[
//配置vue-loader,以,vue结尾的文件都使用vue-loader打包
{
test:/\.vue$/,
use:{
loader:'vue-loader'
}
},
//配置babel,所有.js文件使用babel转换
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015" //解析es6
]
}
},
//排除插件安装目录
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//
}
]
},
//html打包插件
plugins:[
new htmlPlugin({
hash:true,
template:'./src/index.html'
})
],
devServer:{
//监听服务的路径,3.6以上版本自动热更新
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,
port:8082
}
}
配置完成之后,新建.vue组件文件,然后简单写个例子:
这里有个坑:
,
不能直接写123,template标签里面必须写一个元素标签包裹,否则会报错
新建之后再引入,index.js入口文件如下:
import Vue from 'vue'
import App from './App.vue' //引入,vue组件
new Vue({
el:'#vue',
data:{
msg:'haha'
},
components:{
'app':App //引入模块化的.vue文件的组件
}
});
{
alert(123);
}
这里还有另一个坑,引入vue的时候现在这个版本好像不能直接'vue',而是'vue/dist/vue.js',除非在配置文件中配置别名,我上面已经配置过了,所以这里可以直接使用别名
,然后新建html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue</title>
</head>
<body>
<div id="vue">
{{msg}}
<app></app>
</div>
</body>
</html>
,最后打包进行观察结果,发现.vue已经能成功使用,如果我们还想要一个组件,可以继续新建.vue组件开发,一个组件就是一个模块!抛开脚手架不说,这种开发方式和思想值得细细品味,哈哈!这个简单例子就到这里,其他的css样式什么的可以自己去尝试!
另外说一点,webpack3.6以上的版本会自动支持热更新,不需要其他配置,4.0以上版本,打包和运行命令多了一个--mode选项,而且是必须写:
即现在package.json的命令里我是这样配置的:
webpack4.5.0+vue2.5.16+vue-loader 实战组件化开发案例以及版本问题中踩的一些大坑!!!的更多相关文章
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- vue.js原生组件化开发（一）——组件开发基础
前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...
- vue.js原生组件化开发（二）——父子组件
前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...
- vue（9）—— 组件化开发 - webpack（3）
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- webpack（8）vue组件化开发的演变过程
前言 真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发,所以项目中只会有一个inde ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- CF271D_Good Substrings
给一个原串,以及那些字符是坏的,现在问你可以从原串中取出多少个不同子串,使得其所含的坏字符的个数不超过一个定数. 这个题目网上有各种各样的解法.如hash,tire. 我说一下我的解法. 解法一:后缀 ...
- mysql测试索引在表中的作用
//未完成 参考书:(完成对缓存中执行计划的查看对比 P133~) Microsoft SQL Server 2008技术内幕:T-SQL查询 实验内容 单表中的索引使用 1．建表 create ta ...
- MT【155】单调有界必有极限
(清华2017.4.29标准学术能力测试20) 已知数列$\{a_n\}$,其中$a_1=a$,$a_2=b$,$a_{n+2}=a_n-\dfrac 7{a_{n+1}}$,则_______ A.$ ...
- Integer to Roman - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Integer to Roman - LeetCode 注意点 考虑输入为0的情况 解法 解法一:从大到小考虑1000,900,500,400,100,9 ...
- c/c++基本数据类型转换
If either operand is of type long double, the other operand is converted to type long double. If the ...
- Chapter2（变量和基础类型）--C++Prime笔记
数据类型选择的准则: ①当明确知晓数值不可能为负时,选用无符号类型. ②使用int执行整数运算.在实际应用中,short常常显得太小而long一般和int有一样的尺寸.如果运算范围超过int的表示范围 ...
- np.argsort函数
np.argsort函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me numpy.argsort(a, axis=-1, kind='quicksort', order=None) 功能: ...
- 博世传感器调试笔记（二）加速度及陀螺仪传感器BMI160
一.功能参数简介bosch Sensortec公司推出的最新BMI160惯性测量单元将最顶尖的16位3轴超低重力加速度计和超低功耗3轴陀螺仪集成于单一封装.MI160采用14管脚LGA封装,尺寸为2. ...
- ASP.NET Core的身份认证框架IdentityServer4--(5)自定义用户登录(使用官网提供的UI)
IdentityServer官方提供web页面,可以根据需求修改样式.具体UI下载跟配置参考官网文档. 文档地址:https://identityserver4.readthedocs.io/en/r ...
- bzoj千题计划169：bzoj2463: [中山市选2009]谁能赢呢？
http://www.lydsy.com/JudgeOnline/problem.php?id=2463 n为偶数时,一定可以被若干个1*2 矩形覆盖 先手每次从矩形的一端走向另一端,后手每次走向一个 ...