vue-cli腳手架之其他文件解釋


好了,腳手架目錄中重要的文件基本都介紹了,但還有一個不太注意到的文件沒有解釋,這里也說明一下。

 

config文件夾下的index.js,作用是不同開發環境下的參數配置(可選項很多,生產環境、開發環境、測試環境):

condig文件夾中的其他幾個文件,這幾個文件主要是暴露接口(其他文件會引用這些暴露出來的變量等):

 

.babelrc文件:由於瀏覽器的兼容問題,很多js新方法都不能用,babel因此而生。它可以將這些新方法編譯成兼容的代碼,盡量多的適應主流瀏覽器。

想要深入了解可以去巴別官網查看詳細配置和解釋。官網地址: https://babeljs.io/docs/plugins/

 

.editorconfig文件配置:用來規范開發中縮進風格的統一

editorConfig相關參數:

通配符

*                匹配除/之外的任意字符串
**               匹配任意字符串
?                匹配任意單個字符
[name]           匹配name中的任意一個單一字符
[!name]          匹配不存在name中的任意一個單一字符
{s1,s2,s3}       匹配給定的字符串中的任意一個(用逗號分隔) 
{num1..num2}    匹配num1到num2之間的任意一個整數, 這里的num1和num2可以為正整數也可以為負整數

屬性

indent_style    設置縮進風格(tab是硬縮進,space為軟縮進)
indent_size     用一個整數定義的列數來設置縮進的寬度,如果indent_style為tab,則此屬性默認為tab_width
tab_width       用一個整數來設置tab縮進的列數。默認是indent_size
end_of_line     設置換行符,值為lf、cr和crlf
charset         設置編碼,值為latin1、utf-8、utf-8-bom、utf-16be和utf-16le,不建議使用utf-8-bom
trim_trailing_whitespace  設為true表示會去除換行行首的任意空白字符。
insert_final_newline      設為true表示使文件以一個空白行結尾
root           表示是最頂層的配置文件,發現設為true時,才會停止查找.editorconfig文件 

.gitignore文件:用來配置不需要加在版本管理中的文件,忽略git不必要提交文件。

以下摘自廖雪峰老師的博客:

忽略文件的原則是:

忽略操作系統自動生成的文件,比如縮略圖等;
忽略編譯生成的中間文件、可執行文件等,也就是如果一個文件是通過另一個文件自動生成的,那自動生成的文件就沒必要放進版本庫,比如Java編譯產生的.class文件;
忽略你自己的帶有敏感信息的配置文件,比如存放口令的配置文件。
下面我們看看常用的規則:
1)/mtk/               過濾整個文件夾
2)*.zip                過濾所有.zip文件
3)/mtk/do.c         過濾某個具體文件
這里很有意思~

需要注意的是,gitignore還可以指定要將哪些文件添加到版本管理中:
1)!*.zip
2)!/mtk/one.txt

唯一的區別就是規則開頭多了一個感嘆號,Git會將滿足這類規則的文件添加到版本管理中。
為什么要有兩種規則呢?想象一個場景:假如我們只需要管理/mtk/目錄中的one.txt文件,這個目錄中的其他文件都不需要管理,那么我們就需要使用:
1)/mtk/
2)!/mtk/one.txt

說明:如果你不慎在創建.gitignore文件之前就push了項目,那么即使你在.gitignore文件中寫入新的過濾規則,這些規則也不會起作用,Git仍然會對所有文件進行版本管理。因此一定要養成在項目開始就創建.gitignore文件的習慣,否則一旦push,處理起來會非常麻煩。

 

.postcssrc.js文件:postCss提供一個解析器,將css解析成抽象語法樹。

再來一段解釋,覺得寫得不錯:

如果Sass等預編譯器是新定義了一種模板語言,然后將其轉化為css的話,PostCSS則是更純粹地對css本身做轉換。

回想一下你是如何學習使用css預編譯器的:了解到有這樣一種可以轉化為css的語言,它有很多特性,變量、嵌套、繼承等等,每一種特性都通過一定語法實現。大概就像是遞給你一個已經封裝好的工具箱(量產型?),你可以在里面找有用的東西。

那PostCSS是怎樣呢?PostCSS就像只遞給你一個盒子,但告訴你你可以從旁邊的陳列櫃取走自己想要的工具放進盒子打包帶走。如果你覺得陳列櫃里的不夠好,PostCSS還可以幫你打造你自己的工具。所以,使用PostCSS,你可以僅取所需。

插件官方鏈接: https://www.npmjs.com/package/postcss 

 

額 終於把vue-cli全部文件介紹完畢 接下來要考慮這些文件之間的關聯了...


免責聲明!

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



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