（四）Vue入门：简单的组件编写

一、使用VS Code进行编辑

• 使用VS Code打开目录，会推荐我们安装一个Vetur的插件，安装后，可以自动填充。
• 自动格式化代码快捷键：shift+alt+F
• 资源网站：https://element.eleme.cn，里面的各种组件有代码

1、在componets目录上，新建一个文件Login.vue，然后输入template，script，style三件套，完成样式如下：

2、el元素注册：打开plugins文件夹，编辑element.js进行注册，写入导入和使用的语句： 

import Vue from 'vue'
import { Button } from 'element-ui'
#添加新的element导入
import {Form,FormItem,Input} from 'element-ui'

Vue.use(Button)
#新element使用
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

3、切换到路由，打开router目录，编辑index.js，import login from 'component'，并添加path等

import Vue from 'vue'
import VueRouter from 'vue-router'

//导入刚才新建的Login.vue，新旧版本要注意这里的路径，本文的路由是放到了router目录下的
import Login from '../components/Login.vue'

Vue.use(VueRouter)
  const routes = [
  { path:'/login', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

4、切换到App.vue，添加路由占位符

二、完成效果

每当保存router等JS文件的时候，系统会自动编译，如果有错误，页面上会提示错误的位置，可根据错误找原因。

保存后没有问题，显示：