小世界 主页归档标签
Element-ui组件使用和一键import功能

Element-ui组件使用

element-ui首先得通过npm 安装下载，

其次通过

1
2
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

导入进去，

然后

1
Vue.use(Element)

被Vue所使用即可了。

并且通过：

1
https://element.eleme.cn/#/zh-CN/component/layout

访问网站，直接复制在我们components文件夹下面新建的一个Vue里面，既可以使用了。

一键import

这个在components下面建一个js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './dataList.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

如果组件在components下面的文件夹里面的话。js就改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue';

function capitalizeFirstLetter(string){
    return string.charAt(0).toUpperCase() + string.slice(1);
}
const requireComponent = require.context(
    '.',true,/\.vue$/
    //找到components文件夹下以.vue命名的文件
)
console.log(233,requireComponent.keys());
requireComponent.keys().forEach(fileName => {
    console.log(fileName);
    const componetConfig = requireComponent(fileName);
    console.log(componetConfig);
    let a = fileName.lastIndexOf('/');
    console.log(a);
    fileName = '.' + fileName.slice(a);
    console.log(fileName);
    const componetName = capitalizeFirstLetter(
        fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')
    )
    Vue.component(componetName,componetConfig.default || componetConfig)
})

最后在main.js进行：

1
import xxx.js
Vue