Hbuider中vue项目添加elementui等插件

安装element：npm i element-ui -S

安装 axios ：npm install --save axios vue-axios

安装vue-router: npm install --save vue-router

• main.js 里面的基础代码

//element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

• mian.js升级后：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

// import 'element-ui/lib/theme-chalk/index.css';
import './element-ui-theme/element-#0BB2D4/index.css'
import './element-ui/index.js'   
import './assets/css/global.css'
/***************************************/
// element-ui 该路径在node_modules下面,也可以新建一个element-ui/index.js
//导入elementui的组件,如上面import './element-ui/index.js'所示
// import ElementUI from 'element-ui';
// Vue.use(ElementUI)
/****************************************/

// 配置请求的跟路径
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios
// Vue.prototype.$cookie =
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

• login.vue

<template>
	<el-container class='login_container'>
	  <el-header>
		  欢迎来到登录窗口
	  </el-header>
	  <el-main>
		     <el-form label-width="80px">
		  <!--      用户名-->
		        <el-form-item  label="用户名">
		          <el-input/>
		        </el-form-item>
		  <!--      密码-->
		  <!--prop="username"  prop="password" -->
		        <el-form-item  label="密码">
		          <el-input type="password"/>
		        </el-form-item>
		  <!--      按钮区域-->
		        <el-form-item class="btns">
		          <el-button type="primary">登录</el-button>
		          <el-button type="info">重置</el-button>
		        </el-form-item>
		  
		      </el-form>
	  </el-main>
	</el-container>

</template>

<script>
export default{
	data(){
		return{
			
		}
	},
	created(){
		
	},
	methods:{
		
	}
}
</script>

<style>
	.login_container{
	  height: 100%;
	}
	.el-header{
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		height: auto;
		
	  }
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
		height: auto;
	  }
</style>