專案建立完後,網頁為初始介面,那麼怎麼建立屬於自己的頁面呢?
進入專案的components資料夾下,右鍵新建乙個vue檔案:dashboard.vue。
開啟helloworld,把裡面的內容複製到新建立的dashboard中。把data中對應的msg修改為dashboard,把name也修改為dashboard
開啟route資料夾下index.js檔案。
在開頭匯入新建立的vue檔案,其實是模組。
import
dashboard
from
'@/components/dashboard'
訪問後說明我們已經成功新增了頁面。但是發現位址欄目裡多了個#號
再次訪問http://localhost:8080/dashboard,沒有#號
為什麼不用#,選擇history
element,一套為開發者、設計師和產品經理準備的基於 vue 2.0 的桌面端元件庫。
官網:npm i element
-
ui
-
s
開啟專案中的package.json,在dependencies中可以發現element已經被新增了
官網中已經提供了**,此時我們拿來用即可,直接複製官網**。
<template
>
<
div
id>
<
div
id="top"
>
div>
<
div
id="aside"
>
<
el-menu
router
="true"
>
<
el-menu-item
index
="/dashboard"
>
<
i class
="el-icon-location"
>
i>
<
span
slot
="title"
>儀錶盤
span
>
el-menu-item
>
<
el-submenu
index
="2"
>
<
template
slot
="title"
>
<
i class
="el-icon-menu"
>
i>
<
span
>部落格管理
span
>
template
>
<
el-menu-item
index
="/newarticle"
>
<
i class
="el-icon-edit"
>
i>
<
span
>新建博文
span
>
el-menu-item
>
<
el-menu-item
index
="1-2"
>
<
i class
="el-icon-document"
>
i>
<
span
>部落格列表
所以修改自己的main.js檔案,**如下:
// the vue build version to load with the `import` command注:1、menu有乙個router屬性 設定為true時候可直接呼叫index指向的鏈結位址,即可實現導航。// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import vue from 'vue'
import router from './router'
import elementui from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
vue.config.productiontip = false
vue.use(elementui);
/* eslint-disable no-new */
new vue()
2、解決elementui導航欄中的vue-router在3.0版本以上重複點選單報錯問題
在router資料夾下直接新增如下**
const originalpush =router.prototype.pushrouter.prototype.push = function
push(location)
vue修改編碼 Vue之cli修改
專案建立完後,網頁為初始介面,那麼在 修改呢?一 建立新頁面 1 建立vue檔案 進入專案的components資料夾下,右鍵建立檔案dashboard.vue。2 dashboard寫入內容 開啟helloworld,把裡面的內容複製到新建立的dashboard中。把data中對應的msg修改為d...
Vue高階攻略之搭建Vue專案
開啟控制命令列程式 cmd 檢查是否正常 npm install g cnpm registry 這樣就可以使用cnpm 命令來安裝模組了 1.第一步 安裝vue cli 專案腳手架 cnpm install vue cli g 全域性安裝 vue cli 選定路徑,新建vue專案,這裡我是在桌面上...
vue入門之編譯專案
好記性不如爛筆頭,最近又開始學習vue了,編譯的過程中遇到幾個小坑,特此一記。首先說一下vue專案如何編譯,其實很簡單,cd到專案資料夾,然後執行命令 npm run build不過npm命令通常很慢,我們可以使用 的映象以及cnpm命令 cnpm install cnpm g上面是安裝或者公升級,...