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 Select下拉框操作小结(推荐)
Jul 22 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
前端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
第八节 访问方式 [8]
2006/10/09 PHP
php 时间计算问题小结
2009/01/04 PHP
php操作xml
2013/10/27 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python散点图实例之随机漫步
2018/08/27 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python删除n行后的其他行方法
2019/01/28 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python交易记录链的实现过程详解
2019/07/03 Python
Ado与Ado.net的相同与不同
2014/12/08 面试题
乡下人家教学反思
2014/02/01 职场文书
《泉水》教学反思
2014/04/11 职场文书
实习推荐信
2014/05/10 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
批评与自我批评范文
2014/10/15 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书