使用 element-ui

目录结构如下图

<template>
  <div>
    <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
  </div>
</template>
<script>

export default {
  name: 'LoginForm',
  data () {
    return {
      input: 's'
    }
  }
}
</script>

<!--<script>-->
<!--    export default {-->
<!--        name: "LoginForm"-->
<!--    }-->
<!--</script>-->

<style scoped>

</style>

安装相关 element的依赖，然后再 main.js 配置 use一下，就可以使用了

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios'
// eslint-disable-next-line no-unused-vars
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

// require('./assets/css')  引入 css 让 webpack 打包，也可以 在组件内引入
axios({
  url: 'http://127.0.0.1:8000/home/multidata',
  method: 'get'
}).then(res => {
  console.log(res)
})

如图