CDN构建vue项目下引用自定义组件

参考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

我使用以下的方式自定义组件
CDN构建vue项目下引用自定义组件_第1张图片
折行转义字符
CDN构建vue项目下引用自定义组件_第2张图片

目录结构

CDN构建vue项目下引用自定义组件_第3张图片

sort-dropdown我的自定义组件,代码如下:

JS代码:demo-component.js

/**
 * course-sort组件
 */
/* 注册全局组件 */
Vue.component('course-sort',{
	template: '\
	        \
	            \
	                课程\
	            \
	            \
	                \
	                    \
	                        
课程分类
\ \ {{ item.resourceTypeName }}\ \
\
\
\
\ '
, 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

调用方式:


<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代码:


<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"/>
		
		
		<script src="common/element-ui/index.js">script>
		<link rel="stylesheet" href="common/element-ui/index.css">
		
		
		<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项目下引用自定义组件_第4张图片

总结:

通过CDN方式构建vue项目的自定义组件,目前我还没有找到如何做成单文件组件的效果,现在只能这样凑合着使用,将js和HTML写在一起,样式文件分开,使用的时候进行导入。
如有方式能做成单文件效果,欢迎留言~

你可能感兴趣的:(vue,elementUI,js)