赞
踩
从 node官网下载安装包
npm install vue-cli -g
vue init webpack vue-project
可保持默认,一路回车
完成后
- cd vue-project
- npm run dev
npm install element-ui --save
编辑 src/main.js , 修改为
- import Vue from 'vue'
- import App from './App'
- import router from './router'
- import ElementUI from 'element-ui'
- import 'element-ui/lib/theme-chalk/index.css'
- Vue.use(ElementUI)
- Vue.config.productionTip = false
- new Vue({
- el: '#app',
- router,
- render: h => h(App)
- })
src 目录下新建目录 views
编写 views/Login.vue
- <template>
- <div class="login-container">
- <el-form :model="ruleForm2" :rules="rules2"
- status-icon
- ref="ruleForm2"
- label-position="left"
- label-width="0px"
- class="demo-ruleForm login-page">
- <h3 class="title">系统登录</h3>
- <el-form-item prop="username">
- <el-input type="text"
- v-model="ruleForm2.username"
- auto-complete="off"
- placeholder="用户名"
- ></el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input type="password"
- v-model="ruleForm2.password"
- auto-complete="off"
- placeholder="密码"
- ></el-input>
- </el-form-item>
- <el-checkbox
- v-model="checked"
- class="rememberme"
- >记住密码</el-checkbox>
- <el-form-item style="width:100%;">
- <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
- </el-form-item>
- </el-form>
- </div>
- </template>
-
- <script>
- export default {
- data(){
- return {
- logining: false,
- ruleForm2: {
- username: 'admin',
- password: '123456',
- },
- rules2: {
- username: [{required: true, message: '请输入账号', trigger: 'blur'}],
- password: [{required: true, message: '请输入密码', trigger: 'blur'}]
- },
- checked: false
- }
- },
- methods: {
- handleSubmit(event){
- this.$refs.ruleForm2.validate((valid) => {
- if(valid){
- this.logining = true;
- if(this.ruleForm2.username === 'admin' &&
- this.ruleForm2.password === '123456'){
- this.logining = false;
- sessionStorage.setItem('user', this.ruleForm2.username);
- this.$router.push({path: '/home'});
- }else{
- this.logining = false;
- this.$alert('用户名或密码错误!', '提示', {
- confirmButtonText: 'ok'
- })
- }
- }else{
- console.log('error submit!');
- return false;
- }
- })
- }
- }
- }
- </script>
-
- <style scoped>
-
- .login-container {
- width: 100%;
- height: 100%;
- background: #4373a5;
-
- /* 登录框上下对齐 */
- display: flex;
- align-items: center;
- }
- .login-page {
- -webkit-border-radius: 5px;
- border-radius: 5px;
- margin:0px auto;
- width: 350px;
- padding: 20px 35px 35px 15px;
- background: #fff;
- border: 1px solid #eaeaea;
- box-shadow: 0 0 25px #cac6c6;
- }
- label.el-checkbox.rememberme {
- margin: 0px 0px 15px;
- text-align: left;
- }
- </style>

访问 login 要跳转到登录页面
修改 router/index.js 为
- import Vue from 'vue'
- import Router from 'vue-router'
- import HelloWorld from '@/components/HelloWorld'
- import Login from '@/views/Login'
-
- Vue.use(Router)
-
- export default new Router({
- routes: [
- {
- path: '/',
- name: 'HelloWorld',
- component: HelloWorld
- },
- {
- path: '/login',
- name: 'Login',
- component: Login
- },
- ]
- })

访问 http://127.0.0.1:8080/#/login 出现登录页面:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。