Vue2.2版本學習小結


一、項目初始化繼續參考這里

https://github.com/vuejs-templates/webpack-simple

或者

https://github.com/vuejs-templates/webpack

初始化的時候一路按回車,如果初始化失敗,請翻牆或者更換npm源。

初始化之后npm install安裝

安裝好了之后運行項目

npm run dev

二、如何使用css預處理語言

1.使用stylus

安裝stylus與stylus-loader

npm install stylus

npm install stylus-loader

 

<style lang="stylus">

clip_image002

2.使用sass

安裝sass-node sass與sass-loader

npm install sass-node npm install sass npm sass-loader

(如果安裝不成功,可以嘗試更換鏡像)

clip_image004

 

注意 lang="scss" 而不是sass    <style lang="scss">

新版模塊路徑簡寫配置有變化了

clip_image006

——————>

clip_image008

@符代替src

 

三、Vue2.2版本相對於Vue2.1版本對路由使用寫法這塊發生了一點點變法

路由由main.js獨立出來router文件里

vue2.1使用路由的方式

clip_image010

——————》

vue2.2使用方式

clip_image012

原來的1/2/3/4 步不需要了,現在只需配置第三部就行了。。配置路由

clip_image014

讓頁面能夠訪問到,先不管跳轉正取與否

路由配置

clip_image044

配置路由當前導航高亮

clip_image046

目前現版本寫法:不要4步走了 直接new Router 里面以對象的形式去配置

四、Eslint規則配置一下

clip_image016

 

五、import的使用

 

預處理語言導入引用的時候用 @import

clip_image018

包括.vue文件中style部分引入

clip_image020

Script標簽部分引入模塊的時候直接 import導入----肯能原因是es6的導入方法

clip_image022

@import導入的是預處理語言的引入模塊

同一個組件下的css引入圖片的路徑

clip_image024

clip_image026

clip_image028

./ 當前目錄 ../往上找一級 ../../往上找2級

注意這里的短路徑只是給es6使用的

clip_image030

這樣導入commin.scss模塊是可以的

clip_image032

·如果在style部分導入樣式模塊不能使用短路徑

為了防止我們定義的mixin 函數不出錯,還是盡量style部分導入樣式模塊

Html部分引入圖片也是一樣 ./

clip_image034

 

六、其他

通過父組件傳遞過來的值判斷子組件是否某個元素

Index.vue

clip_image036

Nav.vue

clip_image038

v-if 也可以換成v-show

props熟悉設置

https://cn.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

clip_image040

clip_image042

。。。。

繼續學習中,待補充。。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM