参考vue创建组件的方式：
https://blog.csdn.net/WU5229485/article/details/82908068
https://blog.csdn.net/wxw20147854/article/details/82829096
https://doc.vue-js.com/v2/guide/components.html
我使用以下的方式自定义组件
折行转义字符
目录结构
sort-dropdown我的自定义组件，代码如下：
JS代码：demo-component.js
/**
* course-sort组件
*/
/* 注册全局组件 */
Vue.component('course-sort',{
template: '\
<el-dropdown placement="bottom-start" trigger="click" @command="handleCommandSort">\
<span class="el-dropdown-link">\
课程\
</span>\
<el-dropdown-menu slot="dropdown">\
<el-container class="sort-list-container">\
<el-main class="sort-list-main">\
<div class="sort-title">课程分类</div>\
<el-dropdown-item v-for="(item, index) in rootResourceTypeList" \
:key="index"\
:command="index">\
{{ item.resourceTypeName }}\
</el-dropdown-item>\
</el-main>\
</el-container>\
</el-dropdown-menu>\
</el-dropdown>\
',
props: [],
data: function () {
return {
rootResourceTypeList: []
};
},
mounted: function () {
this.getRootResourceTypeList();
},
methods: {
/**
* 点击下拉菜单的分类选项
* @param e command元素
*/
handleCommandSort: function(i){
if(i == -1) return;
this.childrenCourse(this.rootResourceTypeList[i].resourceTypeId, this.rootResourceTypeList[i].resourceTypeName);
},
/**
* 根据资源类型的名称查看相关的子分类的课程
* @param resourceTypeName
*/
childrenCourse(resourceTypeId, resourceTypeName){
console.log("点击了分类子项目：");
console.log(resourceTypeId,resourceTypeName);
},
/**
* 获取所有的二级课程分类
*/
getRootResourceTypeList: function() {
this.rootResourceTypeList = [{
resourceTypeId: '1001',
resourceTypeName: '计算机1'
},
{
resourceTypeId: '1002',
resourceTypeName: '计算机2'
},
{
resourceTypeId: '1003',
resourceTypeName: '计算机3'
},
{
resourceTypeId: '1004',
resourceTypeName: '计算机4'
},
{
resourceTypeId: '1005',
resourceTypeName: '计算机5'
}];
console.log("获取分类");
}
}
});
CSS代码：demo-component.css
.el-dropdown {
font-size: 16px;
cursor: pointer;
}
.el-dropdown-menu {
width: 600px;
height: 300px;
padding: 10px 20px;
}
.el-dropdown-menu__item {
display: inline-block;
min-width: 110px;
padding: 0 10px;
margin: 10px 12px 2px 0;
border-radius: 16px;
line-height: 32px;
font-size: 14px;
color: #333333;
text-align: center;
background-color: rgba(0, 0, 0, 0.04);
}
.sort-title {
width: 100%;
line-height: 18px;
color: black;
font-size: 16px;
text-align: left;
border-radius: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0);
}
.sort-title:hover {
background-color: rgba(0, 0, 0, 0) !important;
color: black !important;
}
.sort-list-container {
width: 100%;
height: 100%;
padding-bottom: 10px;
overflow-x: hidden;
}
.sort-list-main {
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: auto;
overflow-x: hidden;
}
.content{
width: 70%;
}
在index.html中调用自定义组件sort-dropdown
调用方式：
<!-- sort-dropdown 使用组件 -->
<script src="components/sort-dropdown/demo-component.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="components/sort-dropdown/demo-component.css">
index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="common/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="common/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="common/base.css"/>
<!-- element-ui引入样式 引入组件库-->
<script src="common/element-ui/index.js"></script>
<link rel="stylesheet" href="common/element-ui/index.css">
<!-- sort-dropdown 使用组件 -->
<script src="components/sort-dropdown/demo-component.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="components/sort-dropdown/demo-component.css">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="padding-xl">
<h1>{{ title }}</h1>
<course-sort class="margin-top"></course-sort>
</div>
</body>
</html>
index.html中的index.js代码如下：
var app;
$(document).ready(function(){
app = new Vue({
el: '#app',
components: { // 不需要注册也能使用
},
mounted: function () {
console.log("vue挂载完成");
},
data: {
title: '使用CDN构建VUE项目'
},
methods: {
}
});
});
效果图：
总结：
通过CDN方式构建vue项目的自定义组件，目前我还没有找到如何做成单文件组件的效果，现在只能这样凑合着使用，将js和HTML写在一起，样式文件分开，使用的时候进行导入。
如有方式能做成单文件效果，欢迎留言~