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 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
js function使用心得
May 10 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
node.js的事件机制
Feb 08 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
Vue父子组件传值的一些坑
Sep 16 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
使用tensorflow实现AlexNet
2017/11/20 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python实现连连看游戏
2020/02/14 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
教师专业自荐信
2014/05/31 职场文书
教师一帮一活动总结
2014/07/08 职场文书
毕业实习单位意见
2015/06/04 职场文书
观后感的写法
2015/06/19 职场文书
小学总务工作总结
2015/08/13 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js