精美网站欣赏网站关键词优化排名技巧
1. 安装 Element UI（在文件夹最上面输入cmd进入dos窗口，然后输入安装指令 npm install element-ui --save）
2.在main.js文件全局引入(main.js文件负责 全局注册 )，在该文件注册的所有组件在其他文件都能直接调用，一般不需再次引入（对于自定义的组件，不论在main.js文件里是否全局引入，在router文件夹的index文件里面好像必须要重新写一遍组件导入，才能用）
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);3.在views文件夹下创建文件index.vue(没有views文件夹就自己建一个)
<template><el-input v-model="input" placeholder="请输入内容"></el-input></template><script>
export default {name: 'BookInfo', data() {return {input: '' // 用于绑定输入框的值};}
}
</script><style scoped></style>
4.在App.vue文件引入该组件（App.vue是程序入口界面，程序在执行时先执行main.js和App.vue文件）
<template><div id="app"><BookInfo></BookInfo></div>
</template><script>
import BookInfo from './views/index'export default {name: 'App',components: {BookInfo}}
</script><style>#app{font-size:80px;color:red;text-align: center;}
</style>
5.执行结果
如果想让输入框小一些，就加个 style样式
<el-input style="width: 200px;" v-model="input" placeholder="请输入内容"></el-input> 6.注意：
正常情况下不会在App.vue文件直接引入某个组件，而是把动态路由引入，因为现在只写一个界面，就没有使用动态路由，实际生产必须改成动态路由。
只把第4步的第3行改成<router-view/>，就能用路由的方式（路径）引入很多界面
<template><div id="app"><router-view/></div>
</template>