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 相关文章推荐
单独使用CKFinder选择图片的方法
Aug 21 Javascript
关于js类的定义
Jun 28 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue实现商城购物车功能
Nov 27 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
js实现随机点名
Jan 19 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
终于听上了直流胆调频
2021/03/02 无线电
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
js中less常用的方法小结
2017/08/09 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
详解Python 切片语法
2019/06/10 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Python猴子补丁知识点总结
2020/01/05 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python常量折叠基础知识点讲解
2021/02/28 Python
北京银河万佳Java面试题
2012/03/21 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
2014年残联工作总结
2014/11/21 职场文书
队列队形口号
2015/12/25 职场文书
python - timeit 时间模块
2021/04/06 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python