Vue.js入門(六)
目錄
5.1 區分webpack中匯入Vue和普通網頁使用script匯入Vue
5.2 在vue中結合render函式渲染指定的元件到容器中
5.4 export default 和export的使用方式
第七章 元件中使用style標籤lang屬性和scoped屬性
第一章 webpack中url-loader的使用
1.1 用url-loader讀取圖片
我們想給紅色的div加個背景圖片,所以在index.scss中書寫背景圖片樣式
1.首先安裝外掛
2.在webpack.config.js中書寫匹配規則
3.可以在user後面的url地址中填入引數
我們發現圖片的名字改變了,主要是為了避免重名,可能重名的情況如下圖,都會在根目錄下建立一個生小孩的圖片,最終後者會覆蓋前者.
為了解決這種情況,我們可以在圖片名字的前面加一個8位的雜湊值.即可解決問題.
1.2 用url-loader處理字型檔案
1. 安裝bootstrap
2. 修改根目錄
一開始的根路徑設定為,找不到此目錄,這是因為src與node_modules是平級的
刪除dev下的contentBase src,交由根目錄進行託管
再次載入,成功
這是以前的匯入方式,現在我們用新的方式來匯入
因為bootstrap下有聽多種字尾名,我們需要在webpack.config.js下進行新的配置
第二章 webpack和npm中幾個問題的說明
注意下json裡面不能寫註釋,webpack.config.js中可以寫註釋是因為它是一個js檔案,要以檔案最後的結尾來看檔案的型別.
如果我們遇到如下類似的問題
可能是依賴沒裝上,不能看package.json中有,如下圖,就說已經裝上了,這只是記錄你以前裝過,不代表現在有
我們可以執行cnpm install來重新進行安裝 
有時我們會裝一些包,但是因為太慢所以我們用ctrl+c停止了其執行,又重新安裝成功,等我們執行npm run dev時,又各種報錯說缺少什麼包,原因是我們剛才有些包裝到一半被強行終止了,遇到這種情況我們就把node_modules刪了,再重新安裝一遍就好了.
第三章 webpack中babel的配置
為什麼需要babel:
3.1 關於babel的基本配置
例如我們再main.js中寫了如下程式碼,想要處理就需要更高階的語法.
3.1.1 安裝對應的包
3.1.2 書寫對應的配置規則
在webpack.config.js中配置匹配規則
3.1.3 新建.babelrc檔案來 並進行配置
執行成功
3.2 關於Babel的幾點說明
剛才匯入了兩套包
第一套包相當於babel的轉換工具,只負責轉換,它不知道它們的對應關係
第二套包相當於語法.
如果只安裝一個將不能正常工作,因為我們要把class語法轉換成ES3的語法,即function建構函式來模擬,你不知道class person與static info對應ES3的哪種語法,第一套包只負責轉換,但是它不知道高階語法到低階語法的對應關係,如果真的想進行轉換,我們還需要真正的語法外掛,這個語法外掛就像一本字典,比如info對應的中文意思是資訊,中文可以想象成低階的es3語法,英文可以想象成高階的es6語法,babel-preset這個就提供了對應關係,但是隻有轉換器也是沒辦法工作的,所以我們還需要對應的轉換器.當轉換器轉換到某一行時,交給babel-preset去翻譯,然後交給bundle去打包去合併(這個是老師的原話,我也沒搞清楚具體啥意思...,猜測是第一套包對整體進行把握,第二套包是對細節進行翻譯)
第四章 使用Vue例項的render方法渲染元件
模板:
傳統方式Vue例項:
新的方式Vue例項:
可以簡化var html=那一行為
傳統方式:
替換掉<login>標籤
新的方式:
這裡return的結果不是之前那種只替換個標籤了,而是直接替換掉那個容器.
當你即使在容器中有內容,也會被替換掉,如下圖div容器中是有個p標籤的,也不會進行顯示,顯示的依然是模板中的內容.
傳統方式效果:
新的方式效果:
第五章 webpack結合Vue進行使用
5.1 區分webpack中匯入Vue和普通網頁使用script匯入Vue
5.1.1 在以前的網頁中如何使用Vue
5.1.2 用webpack匯入Vue
main.js中寫入
index.html中寫入:
嘗試執行發現報錯:
這是因為我們匯入的Vue其實不是真正的vue,是刪減版的,我們可以修復這種情況,為了修復,我們先 回顧包的查詢規則:
為了驗證上述結論我們開啟
發現了main,發現main匯入的是runtime的js,而真正的Vue.js是要比下面的要大的
修改方法:
第一種:
第二種:
在webpack.config.js下進行規則匹配
5.2 在vue中結合render函式渲染指定的元件到容器中
main.js中的書寫:
index.html的書寫
一起執行良好,但是如果我們將main.js中的import修改成如下圖,還是會報錯,報錯在runtime-only環境下不能編譯,那麼我們該如何修改才能在runtime-only環境下編譯呢?
我們需要單獨的在src下定義vue檔案,這是一個純粹的元件
然後下載和配置loader
在配置檔案(webpack.config.js)中新增配置項
在main.js中匯入login.vue並更改main.js中的vue例項,vue例項中的login就是剛才匯入的login
可以進行簡寫:
可以將function改成箭頭函式
只有一個引數小括號也能省略,並將引數名字改成c
返回值只有一行程式碼,return也可以不要了
index.html的書寫
最後執行html即可成功了.
5.3 總結梳理webpack中如何使用vue
5.4 export default 和export的使用方式
在元件中定義資料和方法.login.vue的書寫
那麼這個export default是什麼呢?
舉例:
專案結構:
我們在test.js中定義了模組
也可以這樣定義模組
我們在main.js中讀取模組的內容
用export default暴露的成員可以用任意變數來接收,比如用如下來接收也可以,且export default向外暴露的成員只能暴露一次.
也可以用export來暴露,但是必須要用一樣的名字接收,或者是在接收時用as改變
第六章 webpack與路由結合使用
6.1 webpack使用vue-router
目錄結構:
模板App的建立:
路由的安裝
main.js的書寫
流程:當地址修改時會被路由監聽到,路由監聽到後就會從上到下匹配route規則,假如匹配到account則會將account元件渲染到對應的<router-view>中去(在app中觸發超連結必然會放到app的<router-view>中去)
老師解釋:
6.2 webpack實現children子路由
可以裝一下外掛,能進行一些提示
包結構:
模板的書寫:
更改路由:
匯入元件:
6.3 webpack抽離路由模組
新建router.js
匯入元件到router.js中
匯入路由物件router.js中
最後暴露路由物件
在main.js中匯入
第七章 元件中使用style標籤lang屬性和scoped屬性
scoped 指定樣式只在本元件與子元件中有效
在account.vue中加入如下樣式
它的元件和子元件字型都發生了改變
lang指定可以使用的樣式
