Vue和Element UI项目搭建

一、项目搭建

1.创建一个SPA项目

2.安装 Element-UI

3.导入组件

4.创建登陆注册界面

登录组件---Login.vue

注册组件---Register.vue

定义组件与路由的对应关系

效果演示：

一、项目搭建

1.创建一个SPA项目

可观看下面这篇博文

Vue安装并使用Vue-CLI构建SPA项目并实现路由-CSDN博客

创建好之后运行项目

在SAP项目的根目录输入cmd后在cmd窗口输入npm run dev

2.安装 Element-UI

在安装前需先关停我们的项目，在cmd窗口中ctrl+c,ctrl+c就可以了

接下来就可以通过命令去下载Element UI

cd my-spa #进入新建项目的根目录
npm install element-ui -S #安装 Element UI模块

需进入该SPA项目根目录安装Element UI模块

下载后就可以看到该依赖了

3.导入组件

在main.js中导入Element UI对应组件并将Element UI挂载在Vue中

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

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

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

4.创建登陆注册界面

• 登录组件---Login.vue

<template>
    <div class="login-wrap">
        <el-form class="login-container">
            <h1 class="title">用户登录</h1>
            <el-form-item label="">
                <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
            </el-form-item>
            <el-row style="text-align: center;margin-top:-10px">
                <el-link type="primary">忘记密码</el-link>
                <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
            </el-row>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      username : '',
      password:''
    }
  },
  methods:{
    gotoRegister(){
      //跳转
      this.$router.push('/Register');
    }
  }
}
</script>
 
<style scoped>
    .login-wrap {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-top: 10%;
        background-image: url(data:image/svg+xml;base64,);
        /* background-color: #112346; */
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100%;
    }
 
    .login-container {
        border-radius: 10px;
        margin: 0px auto;
        width: 350px;
        padding: 30px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        text-align: left;
        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    }
 
    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
</style>

• 定义组件与路由的对应关系

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
    path: '/',
    name: 'Login',
    component: Login
    },
    {
    path: '/Register',
    name: 'Register',
    component: Register
    }
    ]
})