vue如何不用脚手架按需引入组件比如elementui

用脚手架按需引用ui组件很方便,但现在有个项目不能改成脚手架的形式,请问如何按需引用ui组件比如elementui?谢谢

这种是脚手架的方式

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

回答:

把需要的文件已script标签的形式引入
如:

clipboard.png

clipboard.png

看能不能把需要的组成一个数组 根据文件名去引用

回答:

  1. 下载对应插件的js(一般官网上都有提供,比如elementUI)到自己的项目中,然后使用script标签引入。
  2. 不想下载的话,直接script标签引入插件的cdn地址(官网上也有

elementUI官网上给出cdn地址:

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

回答:

非cli项目可以直接引入elementui相应的js、css文件,但是字体会显示异常(我同时下载了相应的ttf、woff文件并放在fonts目录下),同时控制台报错:

Failed to decode downloaded font: http://127.0.0.1:8080/fonts/element-icons.woff
(index):1 OTS parsing error: invalid version tag

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注