1.先用vue-cli3創(chuàng)建一個(gè)項(xiàng)目

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。成都創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

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)打開(kāi)瀏覽器

5.然后我們?cè)趘iews文件夾下新建一個(gè)登陸頁(yè)面login.vue

6.搭建login頁(yè)面(這里我們簡(jiǎn)單的用element修飾一下)

由于只是簡(jiǎn)單的展示以下 這里我們用一個(gè)死數(shù)據(jù)

 這里簡(jiǎn)單強(qiáng)調(diào)一下在邏輯層實(shí)現(xiàn)路由切換

　　　　　
 to 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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！