一、項目初始化繼續參考這里
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">
2.使用sass
安裝sass-node sass與sass-loader
npm install sass-node npm install sass npm sass-loader
(如果安裝不成功,可以嘗試更換鏡像)
注意 lang="scss" 而不是sass <style lang="scss">
新版模塊路徑簡寫配置有變化了
——————>
@符代替src
三、Vue2.2版本相對於Vue2.1版本對路由使用寫法這塊發生了一點點變法
路由由main.js獨立出來router文件里
vue2.1使用路由的方式
——————》
vue2.2使用方式
原來的1/2/3/4 步不需要了,現在只需配置第三部就行了。。配置路由
讓頁面能夠訪問到,先不管跳轉正取與否
路由配置
配置路由當前導航高亮
目前現版本寫法:不要4步走了 直接new Router 里面以對象的形式去配置
四、Eslint規則配置一下
五、import的使用
預處理語言導入引用的時候用 @import
包括.vue文件中style部分引入
Script標簽部分引入模塊的時候直接 import導入----肯能原因是es6的導入方法
@import導入的是預處理語言的引入模塊
同一個組件下的css引入圖片的路徑
./ 當前目錄 ../往上找一級 ../../往上找2級
注意這里的短路徑只是給es6使用的
這樣導入commin.scss模塊是可以的
·如果在style部分導入樣式模塊不能使用短路徑
為了防止我們定義的mixin 函數不出錯,還是盡量style部分導入樣式模塊
Html部分引入圖片也是一樣 ./
六、其他
通過父組件傳遞過來的值判斷子組件是否某個元素
Index.vue
Nav.vue
v-if 也可以換成v-show
props熟悉設置
https://cn.vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
。。。。
繼續學習中,待補充。。。