1 步骤说明
- 创建项目web >vue create web30_3
- 》创建过程中选项 选择 Manually select features
- 》创建过程中选项 选择Babel，Router, Vuex
- 》创建过程中选项 选择版本3.0
- 》创建过程中选项 选择In dedicated config files
- 》创建过程中选项 如果保存选择，则对 Save this as a preset for future project 选择yes
- cd web30_3
- npm run serve
- 安装插件 >npm i element-plus --save 注--save作用是项目拷贝时已经有包保存
- 修改src下main.js文件，见编程说明部分2.1
2 编程说明
2.1 main.js 修改说明
增加两行内容
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
再用use引入。这点与vue2.0 编程一致。
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount(rootContainer:'#app')2.2 设计login页面
设计表单，形成为独立Login页面，可以单独建立目录来存放，如后台 /back，则该文件为src/views/back/Login.vue
全部代码为：
<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
alert(1)
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>2.3 App.vue 嵌入login页面
<router-link to="/Login">登录</router-link>
<el-button @click="this.$router.push('/about')">跳转</el-button>全文件如下：
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/Login">登录</router-link>
<el-button @click="this.$router.push('/about')">跳转</el-button>
</div>
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>2.4 修改路由文件
router/index.js 需要配置网页路由
,
{
path: '/Login',
name: 'Login',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/back/Login.vue')
}
形成为如下文件
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/Login',
name: 'Login',
component: ()=>import('../views/back/Login')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router3 编译运行和测试
D:\workspace_vue\web30_3>npm run serve
> web30_3@0.1.0 serve D:\workspace_vue\web30_3
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 7941ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.137.168:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
现在可以输入网址，http://192.168.137.168:8080/，在浏览器可以看到首页Home，再点击登录，可以进入登录页面。后面就是后台的对接工作了。
http://192.168.137.168:8080/
点击登录得到：
