Vant项目优化，由按需引入到优CDN引入优化时出现的问题

最新推荐文章于 2024-01-03 13:51:18 发布

Heigl swift

最新推荐文章于 2024-01-03 13:51:18 发布

阅读量1.9k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/helgeal/article/details/121546415

版权

1 文件结构

这里用的是webpack开发和生产的entry入口是分开的，生产的入口文件为pro-main.js，开发为dev-main.js

pro-main.js的文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入vant按需引入的模块
// import './Vant/vant'

// 导入全局样式
import './assets/style/index.less'

// 动态设置rem基准值,屏幕宽度除以十
import 'amfe-flexible'
// 注册全局组件Article-cell
import articleCell from '@/components/article-cell.vue'
// 导入day.js
import '@/assets/utils/day.js'

Vue.config.productionTip = false

// 注册全局组件articleCell
Vue.component('article-cell', articleCell)

new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

当注释掉 import './Vant/vant' 改在public文件下面以cdn模式引入vant时

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% if(htmlWebpackPlugin.options.isProd){ %>
    <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
    />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <!-- 导入vue-router -->
    <script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.20/lodash.min.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.staticfile.org/axios/0.24.0/axios.min.js"></script>
    <% } %>
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>头条</title>
  </head>

样式出现了混乱，部分的样式没有显现出现了混乱，一开始我以为是有些toast这种提示消息使用错误，在组件中this.$toast（）是这么使用的，以为是这种类型的组件没有注册上vue，但后面进行测试发现并非如此。

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

这是vant的基本单元格，但是它用了自闭合的标签，它在html渲染是就会出问题，在vant的issue的有关答复是：Vue不支持在HTML中使用自关闭标记，请使用Vue官方文档中描述的完整标记在网上找了一下原因：

自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。

如果有优化vant 的需要不要用自闭合的标签为好，该起来太麻烦了