1. 程式人生 > >vue_cli下開發一個簡單的模塊權限系統之建立登錄頁面並且實現在瀏覽器輸入地址出現內容

vue_cli下開發一個簡單的模塊權限系統之建立登錄頁面並且實現在瀏覽器輸入地址出現內容

all tro 標識 打開 logs 開發 內容 引入 系統

新建一個Login.vue(登錄頁面,先把Hello.vue的內容復制過來即可)

技術分享

然後我們打開router下面的index.js,第一個箭頭:(引入vue路由)第二個箭頭(引入我們新建的Login.vue頁面)第三個箭頭(我們要使用這個路由)第四個箭頭(配置路由,path表示在瀏覽器中輸入的路由名稱)

技術分享

然後我們在瀏覽器中輸入這個login頁面的地址,就會出來內容了,這樣一個簡單的頁面就建成了

技術分享

因為我們要使用semantic-ui,所以我們安裝一下semantic-ui,進入到命令行界面輸入npm install semantic-ui,等待安裝完成即可

技術分享

安裝完成以後我們需要在main.js裏面引入一下,這樣我們就可以使用semantic-ui了

技術分享

然後我們修改一下login.vue,用semantic搞一個簡單的登錄頁面v-model就是標識這個輸入框,v-on:click="doLogin"就是代表點擊事件

技術分享

頁面就變成了下面這個樣子

技術分享

vue_cli下開發一個簡單的模塊權限系統之建立登錄頁面並且實現在瀏覽器輸入地址出現內容