Vue之修改專案

2022-07-20 00:42:20 字數 3785 閱讀 9183

專案建立完後,網頁為初始介面,那麼怎麼建立屬於自己的頁面呢?

進入專案的components資料夾下,右鍵新建乙個vue檔案:dashboard.vue。

開啟helloworld,把裡面的內容複製到新建立的dashboard中。把data中對應的msg修改為dashboard,把name也修改為dashboard

開啟route資料夾下index.js檔案。

在開頭匯入新建立的vue檔案,其實是模組。

importdashboardfrom'@/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

// (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()

注:1、menu有乙個router屬性 設定為true時候可直接呼叫index指向的鏈結位址,即可實現導航。

2、解決elementui導航欄中的vue-router在3.0版本以上重複點選單報錯問題

在router資料夾下直接新增如下**

const originalpush =router.prototype.push

router.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上面是安裝或者公升級,...