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

一、使用VS Code进行编辑

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

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

<template>
<!--访问https://element.eleme.cn/#/zh-CN/component/input 打开代码复制 -->
  <div>
    <el-input placeholder="请输入内容" v-model="input1">
      <template slot="prepend">Http://</template>
    </el-input>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
</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，添加路由占位符

<template>
  <div id="app">
    <!-- 占位 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
}
</script>

<style>
</style>

二、完成效果

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

保存后没有问题，显示：