您好,登錄后才能下訂單哦!
1.先用vue-cli3創(chuàng)建一個(gè)項(xiàng)目
2.安裝element模塊
全局安裝
npm i element-ui -S
3在main.js引入模塊
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
4.這里先擴(kuò)展一個(gè)小知識(shí)點(diǎn)
在package.json文件中找scripts下serve,在后面加上--open 可以實(shí)現(xiàn)運(yùn)行項(xiàng)目后自動(dòng)打開瀏覽器
5.然后我們?cè)趘iews文件夾下新建一個(gè)登陸頁(yè)面login.vue
6.搭建login頁(yè)面(這里我們簡(jiǎn)單的用element修飾一下)
<template> <div class="firstdemo"> <el-form ref="form" :model="form" label-width="80px"> <el-row type="flex" justify="center"> <el-col :span="5"> <el-form-item label="用戶名"> <el-input v-model="form.name"></el-input> </el-form-item> </el-col> </el-row> <el-row type="flex" justify="center"> <el-col :span="5"> <el-form-item label="密碼"> <el-input v-model="form.password"></el-input> </el-form-item> </el-col> </el-row> <el-row type="flex" justify="center"> <el-col :span="5"> <el-form-item> <el-button type="primary" @click="onSubmit">登陸</el-button> <el-button>注冊(cè)</el-button> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script> export default { name: "fisrtdemo", data() { return { form: { name: "", password: "" } }; }, methods: { onSubmit() { if (this.form.name == "admin" && this.form.password == "123456") { this.$message({ message: '登陸成功', type: 'success' }); this.$router.push({ path: "/Home" }); }else{ this.$message.error('登陸失敗'); } } } }; </script> <style lang="stylus" scoped></style>
由于只是簡(jiǎn)單的展示以下 這里我們用一個(gè)死數(shù)據(jù)
這里簡(jiǎn)單強(qiáng)調(diào)一下在邏輯層實(shí)現(xiàn)路由切換
<!-- router.push({path:'/foo'}) --> <!-- 聲明式導(dǎo)航 應(yīng)用于視圖層 --> <router-link to='/foo'>to foo</router-link> <router-view></router-view> <!-- 編程式導(dǎo)航 應(yīng)用于邏輯層--> <!-- router.push({path:'/foo'}) -->
到這里login頁(yè)面基本搭建完成
7.在router下的index.js中引入我們剛剛創(chuàng)建的login.vue
并對(duì)路徑作相應(yīng)改動(dòng)
index.js import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; import login from "../views/login.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "login", component: login }, { path: "/Home", 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") } ]; const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes }); export default router;
8.最后我們對(duì)home作一下簡(jiǎn)單修飾。
博主這里在components中新建了一個(gè)組件helloworld并引入了element中的一個(gè)簡(jiǎn)單的布局容器。
然后在home頁(yè)面引入helloworld對(duì)頁(yè)面進(jìn)行渲染(當(dāng)然也可以像上面一樣直接在home中引入element布局容器)
9.運(yùn)行 npm run serve
10.下面展示以下效果
總結(jié)
以上所述是小編給大家介紹的基于vue-cli3和element實(shí)現(xiàn)登陸頁(yè)面,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。