不使用管理工具引用vue以及vue组件


发现网上vue的组件都是使用管理包工具然后解析的,但是有的项目是不使用管理工具而是直接引用vue.js的,因此使用组件比较麻烦。因此我整理了一下不使用webpack+vue-cli做vue项目引用组件的办法。

//首先引用vue.js文件以及jq--cdn(https://cdn.jsdelivr.net/npm)网站可以获取最新的静态资源文件

第一种的方法在当前页面中使用组件并且挂载





	
//把组件的模板写在template中是因为template是H5的一种组件使用它在里面写代码并不会运行而且在编辑器和浏览中都可以解析但不会使用相当于字符串但是比字符串方便多了

第二种方法 template仍然写在当前页面但是组件js可以提出去写成模块使用export导出

//组件js文件(ceshiMode.js) template可以直接写字符串但是不能换行很不方便,export可以不用直接使用变量或者常亮都行
const zujian = {
	template: '',
	data() {
		return {
			innerText: this.value,
			isChange: true
		}
	},
}
export default {zujian}

在vue实例的页面中使用es6 import 引用组件js文件

//使用export和import的时候script标签的type类型必须为module否则浏览器报错

第三种方法可以吧组件模板,和组价的js文件都踢出去