Hbuider中vue项目添加elementui等插件
安装element:npm i element-ui -S安装 axios :npm install --save axios vue-axios安装vue-router: npm install --save vue-routermain.js 里面的基础代码//element-uiimport ElementUI from 'element-ui';import 'element-ui/lib
·
安装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>
更多推荐
已为社区贡献1条内容
所有评论(0)