SPA项目开发之登录注册

vue怎么引入和配置使用element-ui框架

1 使用vue-cli脚手架工具创建一个vue项目
      vue init webpack pro01

2 npm安装elementUI
      cd pro01                                   #进入新建项目的根目录
      npm install element-ui -S                  #安装element-ui模块

## 重要的事情说三遍：在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代码
  3 在项目中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

4 测试
      修改HelloWorld.vue添加elementUI组件查看效果

Vue+ElementUI设计登陆页面

   注1：相关样式见资料“css.txt”

css.txt:

App.vue




login.vue

   注2：

Reg.vue:

main.js:

// 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 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from '@/api/http'       
import VueAxios from 'vue-axios'


Vue.use(ElementUI)
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

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