CDN проекта Vue представляет ElementUI

Vue.js

правильный способ открытия

Исправлятьpublic/index.html:

<!DOCTYPE html>
<html lang="en">
  <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">
    <link rel="icon" href="<%= BASE_URL %>icon-16.ico">
    <!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Element CDN</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
	<!-- 在引入 ElementUI 之前引入 Vue，会注入全局变量 Vue  -->
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    <!-- 引入 ElementUI 组件库，会注入全局变量 -->
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
  </body>
</html>

Исправлятьvue.config.js:

// 写法1: 在configureWebpack配置externals 
module.exports = {
    // configureWebpack 值为对象，会通过 webpack-merge 合并到最终的配置
    configureWebpack: {
        externals: {
            // CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
            'vue': 'Vue',
            // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
            // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
            'element-ui': 'ELEMENT'
        }
    }
}

// 写法2：在configureWebpack配置externals
module.exports = {
    // configureWebpack 值为函数，参数 config (被解析的配置)，可直接赋值修改
    configureWebpack: config => {
        config.externals = {
          'vue': 'Vue',
          'element-ui': 'ELEMENT'
        }
    }
}

// 写法3：在 chainWebpack 配置 externals. 注意：不要写成 config.externals = {...}
module.exports = {
    // chainWebpack 只能是函数，参数 config(基于 webpack-chain 的 ChainableConfig 实例)
    chainWebpack: config => {
        config.externals({
            'vue': 'Vue',
            'element-ui': 'ELEMENT'
        })
    }
}

СОВЕТЫ:

  1. Обратите внимание на различиеconfigureWebpackа такжеchainWebpack. Ссылаться наофициальная документация.
  2. Обычно используетсяCDN:jsdelivr,unpkg. В производственной среде рекомендуется использовать файл CDN указанной версии.
  3. внешние внешние расширения webpack, см.v4 китайская документация,Последняя версия документа.

возможные ошибки

(1)Cannot read property 'prototype' of undefined. Информация выглядит следующим образом:

Причина: нетelementвведенный доvue.

    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js">

(2)Injection "dropdown" not found .... информация следующая:Причина: не вwebpackизexternalsопределено вvue.

config.externals({
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
})

(3)you can run: npm install --save element-ui/lib .... информация следующая:

Причина: В проекте используетсяelement-uiПлагины по запросуbabel-plugin-component, преобразуя исходный импорт, в результате чегоelement-uiне будет совпадать.

// babel-plugin-component 转换示例
// Converts
import { Button } from 'element-ui' 
// to (转换有利于减少副作用，更好的 tree-shaking)
var button = require('element-ui/lib/button')
require('element-ui/lib/button/style.css')

Исправлятьbabel.config.js,babel-plugin-componentтакже можетnpm uninstall.

зачем использоватьbabel-plugin-componentШерстяная ткань? Как правило, мы используем метод командной строкиVue CLI, новичок использовал егоVue CLIГрафический интерфейс добавляет эти вещи. 😔

Почему бы не ввести по требованиюElementUIШерстяная ткань? используется в проектеElementUIКомпонентов много, поэтому его не принято вводить по требованию.

Пример кода:git ee.com/home-min/v-ue2…

Категории