Element-Ui和Vue项目的结合 实现前后台分离

Element-Ui和Vue项目的结合

第一步：使用脚手架创建一个Vue项目

     vue init webpack 项目名     创建在线项目

     vue init webpack 项目名     创建离线项目 

第二步：在项目中下载element-ui的模板

     cd pro01    cd 项目名

     npm install element-ui -S   

第三步：在项目中引入element-ui 

     在项目中src目录下找到main.js，并在指定位置添加三行代码（main.js是入口文件，所以在这里引入就行，页面就不用引入了）

     import Vue from 'vue'
 
     import ElementUI from 'element-ui' //新添加1
     import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包样式不同，要放在import App from './App';之前
      
     import App from './App'
     import router from './router'

 

     Vue.use(ElementUI)   //新添加3
     Vue.config.productionTip = false

第四步：Vue+ElementUI设计登陆页面

附上我自己的代码  Login.vue

<template>
	<el-form class="login-container">
		<h2 class="title">用户登录</h2>
	  <el-form-item label="用户名" prop="pass">
	    <el-input type="text" v-model="username" placeholder="用户名" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item label="