初學vue webpack(正式入坑前端)2

2022-02-22 06:51:08 字數 1622 閱讀 8771

接著上篇寫,我們刪掉了模板原生的demo,導致專案不能執行。

看完也不明白,沒關係 我們我們參觀一下別人的單頁面** 

無論我們怎麼點(除非跳轉到其他的**)這個頁面是不會有那種討厭的載入圖示

接下來上圖

這張,真的是醍醐灌頂。讓我們來看看作者的說明

main.js 是我們的入口檔案,主要作用是初始化vue例項並使用需要的外掛程式。

router 是具體的業務元件,比如index,login,content等元件都是具體業務相關的。下面就是再和業務相關的元件

我們在pages資料夾下面新增兩個.vue檔案 分別取名為home.vue 和about.vue

**如下

home頁面

about頁面

home

about

"

">

"/pages/home

">home

"/pages/about

">about

都弄好了之後我們只需要到router資料夾下面配置一下index.js檔案的路由(就跟我們配置mvc router.map一樣 不懂得同學去了解一下為什麼這麼配,我也是去了解了一下路由,如果配置不對 或者有錯誤歡迎指出,畢竟我也是新手)

import vue from

'vue

'import router

from

'vue-router

'import home

from

'@/pages/home

'import about

from

'@/pages/about

'vue.use(router)

export

default

newrouter(, ,

]})

萬事大吉 ctrl+s。

cd到我們專案的目錄下面,執行命令 npm run dev

原來vue-cli初始化專案的時候會幫我們安裝eslint這個**書寫規範檢查器,

你多個空格,少個空格都會gg,最多的是乙個tab 提示出錯,我最多249個錯誤,天殺的不知道我幹了什麼。。。。

關閉eslint坑爹的配置,找到build資料夾下的webpack.base.conf.js注釋掉(別把這段**全部注釋,會報錯,只注釋裡面的配置**就ok了。)

ok,編譯通過,去localhost:8080 此時頁面會出現 hone和about超連結按鈕  我們點選會跳轉到相應的頁面,顯示這是乙個home頁面或者這是乙個about頁面,頁面沒有重新整理。體驗很不錯哦

入坑日記 正式開始玩Linux

今天,因為乙個資源群裡分享了阿里雲的乙個免費領雲伺服器的福利,然後我去領,但很不幸沒搶到,然後我開啟了阿里的學習中心,然後看到了 新手玩轉雲計算 搭建自己專屬的雲筆記 這篇文章,然後我因為感興趣就去學了。非常悲劇的我,研究了3 5個小時,好不容易下好資源,進入到實際操作階段,卻發現一直卡在putty...

初學APUE book 1重點摘入

作業系統定義為一種軟體,它控制計算機硬體資源,提供程序執行環境。通常叫這種軟體為核心。核心的介面被稱為系統呼叫,公用庫函式建立在系統呼叫介面。shell是乙個特殊的應用程式,為執行其他引用程式提供了乙個介面。1.檔案系統 unix檔案系統是目錄和檔案的一種層次結構,所有東西的起點稱為根 root 的...

WPS正式入駐 學習強國 ,讓你輕鬆上手辦公軟體

為了能進一步讓廣大公眾快速上手辦公軟體 提高工作生活效率,近日,金山辦公旗下一站式 office 技巧學習平台 wps 學院 的內容 課程正式入駐 學習強國 學習平台,計畫通過該平台更好地傳播實用的辦公軟體知識。作為一家中國本土的科技公司,金山辦公成立 31 年以來,始終致力於把簡單高效的辦公體驗和...