基于vue-cli3和element实现登陆页面

2023-08-09 11:46:03 153

1.先用vue-cli3创建一个项目

2.安装element模块

全局安装

npmielement-ui-S

3在main.js引入模块

importElementUIfrom'element-ui';
import'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4.这里先扩展一个小知识点

在package.json文件中找scripts下serve,在后面加上--open可以实现运行项目后自动打开浏览器

5.然后我们在views文件夹下新建一个登陆页面login.vue

6.搭建login页面(这里我们简单的用element修饰一下)

由于只是简单的展示以下这里我们用一个死数据

这里简单强调一下在逻辑层实现路由切换



tofoo

到这里login页面基本搭建完成

7.在router下的index.js中引入我们刚刚创建的login.vue

并对路径作相应改动

index.js

importVuefrom"vue";
importVueRouterfrom"vue-router";
importHomefrom"../views/Home.vue";
importloginfrom"../views/login.vue";
Vue.use(VueRouter);

constroutes=[
{
path:"/",
name:"login",
component:login
},
{
path:"/Home",
name:"home",
component:Home
},
{
path:"/about",
name:"about",
//routelevelcode-splitting
//thisgeneratesaseparatechunk(about.[hash].js)forthisroute
//whichislazy-loadedwhentherouteisvisited.
component:()=>
import(/*webpackChunkName:"about"*/"../views/About.vue")
}
];

constrouter=newVueRouter({
mode:"history",
base:process.env.BASE_URL,
routes
});

exportdefaultrouter;

8.最后我们对home作一下简单修饰。

博主这里在components中新建了一个组件helloworld并引入了element中的一个简单的布局容器。

然后在home页面引入helloworld对页面进行渲染(当然也可以像上面一样直接在home中引入element布局容器)

9.运行npmrunserve

10.下面展示以下效果

总结

以上所述是小编给大家介绍的基于vue-cli3和element实现登陆页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基于vue-cli3和element实现登陆页面

热门推荐

随机推荐