第一种-引入vue
场景
当我们没有用vue-cli来管理vue项目，而是在项目后期引入vue，可以使用这种方法，
确实有一些jq混杂后期引入vue的项目，比如我现在维护的一个项目，悲伤。
使用
- 创建test.js文件，直接放入以下代码,字符串模板中就按照正常html写法即可
几乎与正常vue写法没有区别。注意一下引用时机即可。
Vue.component("test-cop", {
props: {
//这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
list: {
//列表内容
type: Array,
default: []
}
},
template: `
<div>
<ul>
<li v-for="(item,index) in list" :key="index">
{{item}}
</li>
</ul>
</div>
`,
methods: {
//这里定义的组件的方法，利用$emit()进行父子组件通信，子组件通过点击事件告诉父组件触发一个自定义事件，
// $emit()方法第二个参数可以用来传递数据
okHandle() {
this.$emit("ok");
},
cancelHandle() {
this.$emit("cancel");
}
}
});
- 在父组件中通过script引入组件，在脚部引入比较好，等父组件new Vue完成
<script type="text/javascript" src="./test.js"></script>
第二种-vue-cli创建的项目
使用场景
vue-cli创建的项目中，使用script或use引入组件，类似ele-ui组件库
参考element-ui源码
- 正常创建vue文件
- 创建js入口文件
// ./src/main是封装组件的文件路径
import Alert from './src/main';//require也行
/* istanbul ignore next */
Alert.install = function(Vue) {
Vue.component(Alert.name, Alert);//第一个参数是组件名，Alert.name是引入组件的name也可以在这里写死，将会所谓引用组件标签名，自定义，第二个参数是导入的组件
};
export default Alert;
// Aside组件导入
import Aside from './src/main';
/* istanbul ignore next */
Aside.install = function(Vue) {
Vue.component(Aside.name, Aside);
};
export default Aside;
- 在main.js中引入或者script引入
import Alert from './src/Alert.js'
//在main.js中引用，
Vue.use(Alert)
//或者script引入直接使用该标签
