Vant 在vue-cli 4.x中按需加载操作


Posted in Javascript onNovember 05, 2020

在vue-cli 4.x中使用vant出现的问题,在这里记录一下

一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import

cnpm install babel-plugin-import -D

**二. 在根目录中找到 babel.config.js 文件 , 添加字段 **

"plugins": [
  ["import",{
   "libraryName":"vant",
   "style":true
   }
  ]
 ]
最终我的配置是这样的
module.exports = {
 presets: [
  '@vue/cli-plugin-babel/preset',
 ],
 "plugins": [
  ["import",{
   "libraryName":"vant",
   "style":true
   }
  ]
 ]
}

接下来重启项目一下。

补充知识:vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

官方升级英文文档,中文文档相对滞后。

简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概有二十几点的更新,还是干货满满呀,值得升级一下,下面是升级步骤。

一.首先,在全局安装最新的 Vue CLI:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查安装的版本

vue -V # 输出:@vue/cli 4.x.x 说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )

踩坑记录

npm install -g @vue/cli 执行成功,但是执行 vue -V 输出的还是3.5.6(我以前安装的版本),

于是又重新执行 npm install -g @vue/cli,显示成功,执行 vue -V 输出的还是3.5.6,

一脸懵逼 ,然后重启电脑,再执行vue -V 输出 @vue/cli 4.0.5,解决 。

二.在项目根目录下执行

vue upgrade

然后出现

Vant 在vue-cli 4.x中按需加载操作

提示 继续升级这些插件吗? 输入 Y 即可.

三.等步骤二 执行完会发现主要有 2 个文件被修改

1.文件 babel.config.js

主要是 babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset

原来的

module.exports = {
 presets: [
  '@vue/app', // 这行
  [
   '@babel/preset-env',
   {
    useBuiltIns: 'entry'
   }
  ]
 ]
}

升级后的

module.exports = {
 presets: [
  '@vue/cli-plugin-babel/preset', // 这行
  [
   '@babel/preset-env',
   {
    useBuiltIns: 'entry'
   }
  ]
 ]
}

2.文件 package.json (package-lock.json 也会更改)

主要是依赖升级

原来的

{
 "@vue/cli-plugin-babel": "^3.11.0",
 "@vue/cli-plugin-eslint": "^3.11.0",
 "@vue/cli-service": "^3.11.0"
}

升级后的

{
 "@vue/cli-plugin-babel": "^4.0.5",
 "@vue/cli-plugin-eslint": "^4.0.5",
 "@vue/cli-service": "^4.0.5"
}

四.然后启动项目

npm run serve

然后报下面的错

Vant 在vue-cli 4.x中按需加载操作

1.第一个错(警告)

WARN A new version of sass-loader is available. Please upgrade for best experience.

这行是 vue cli 4 升级了自己的依赖 sass-loader 导致的

它把 sass-loader由 ^7.x.x 的版本升级到了 ^8.0.0,而我项目中使用的是^7.1.0

所以升级一下自己项目的 sass-loader 就好了

执行下面命令即可

npm i sass-loader@8.0.0 -D

2.然后第二个错说没有安装core-js

vue cli 4把 core-js由 ^2.x.x 的版本升级到了 ^3.x.x

于是安装一下

npm i core-js

然后重启项目还是不行,看了下官方文档和 babel 有关

main.js 代码中

import '@babel/polyfill'

隐藏这个代码

重启好了

然后把 @babel/polyfill 换成 babel-polyfill 即可

npm i babel-polyfill

main.js 代码中 改为

import 'babel-polyfill'

五.vue cli 4 主要升级点总结

1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v4

2.sass-loader由 v7 的版本升级到了 v8

3.core-js由 v2 的版本升级到了 v3

4.webpack-chain由 v4 的版本升级到了 v6

5.css-loader由 v1 的版本升级到了 v3

6.url-loader由 v1 的版本升级到了 v2

7.file-loader由 v3 的版本升级到了 v4

8.copy-webpack-plugin由 v4 的版本升级到了 v5

9.terser-webpack-plugin由 v1 的版本升级到了 v2

10.@vue/cli-plugin-pwa由 v3 的版本升级到了 v4

11.新增插件 vue add vuex vue add router

12.pug-plain已重命名为pug-plain-loader

13.默认目录结构已更改

src/store.js 改为 src/store/index.js

src/router.js 改为 src/router/index.js

14.由于兼容性原因,仍支持 router&routerHistoryMode 选项 preset.json

但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }

获得更好的一致性

15.api.hasPlugin('vue-router')不再受支持,现在 api.hasPlugin('router')

16.lintOnSave 选项的默认值(未指定时)从 true 更改为 default

17.废弃vue-cli-service test:e2e

18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x

19.@vue/cli-plugin-unit-mocha 升级到Mocha 6

20.@vue/cli-plugin-unit-jest jest由 v23 升级到v24

21.@vue/cli-plugin-typescript 更好的ts(x)支持 ,胜过js(x)

参考链接

vue cli 4 官方英文升级文档

以上这篇Vant 在vue-cli 4.x中按需加载操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
前端vue如何使用高德地图
Nov 05 #Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 #Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 #Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 #Javascript
Array.filter中如何正确使用Async
Nov 04 #Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 #Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 #Javascript
You might like
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
制作特殊字的脚本
2006/06/26 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
手机端转换rem适应
2017/04/01 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
对python程序内存泄漏调试的记录
2018/06/11 Python
python3爬虫怎样构建请求header
2018/12/23 Python
python简单贪吃蛇开发
2019/01/28 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
解决python运行效率不高的问题
2020/07/20 Python
python实现磁盘日志清理的示例
2020/11/05 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
税务会计岗位职责
2015/04/02 职场文书
民事上诉状范文
2015/05/22 职场文书
复活读书笔记
2015/06/29 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS