vue-webpack-boilerplate里面各文件解析

mj 發布于2019-08-21 17:08 / 2728人閱讀

摘要：地址使用文件解析用于告訴系統要忽略掉哪些文件。文件用于配置忽略語法檢查的目錄文件。的使用在項目根創建一個名為的文件。該文件的內容定義該項目的編碼規范。此目錄下的文件不會被處理。包含單元測試相關的文件。

vue-webpack-boilerplate是vue-cli腳手架的一個項目模板。github地址

使用

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

文件解析 .gitignore

.gitignore用于告訴Git系統要忽略掉哪些文件。

在使用 Git 進行版本控制的時候，有些文件是無需納入 Git 管理的，通常都是些自動生成的文件，像日志或者編譯過程中創建的文件。我們可以創建一個名為 .gitignore 的文件，列出要忽略的文件來解決這個問題。關于 Pattern 規則，可以查看 git 的相關文檔：http://git-scm.com/docs/gitig...

.gitkeep

.gitkeep用于跟蹤項目中的空文件。

Git 不跟蹤空文件夾。如果你的項目文件夾里邊有任何的空文件夾，Git 都會無視它。但如果你在文件夾里邊添加了一個文件，Git 就會開始跟蹤這個文件夾。無論這個文件是什么，內容如何，名字叫啥。因此，若想跟蹤項目的空文件夾，那么就可以在這個文件夾中創建一個 .gitkeep 文件。

.eslintignore

.eslintignore文件用于配置忽略語法檢查的目錄文件。，文件中的每一行都表明哪些路徑應該被EsLint忽略檢測。

當 ESLint 運行時，在確定哪些文件要檢測之前，它會在當前工作目錄中查找一個 .eslintignore 文件。如果發現了這個文件，當遍歷目錄時，將會應用這些偏好設置。詳情見：http://eslint.cn/docs/user-gu...

.eslintrc

.eslintrc文件用于配置ESLint規則。詳情見：http://eslint.cn/docs/user-gu...

.postcssrc.js

postcssrc.js文件用來配置postcss。vue-loader 的 postcss 會默認讀取這個文件的里的配置項。詳情見：https://vue-loader.vuejs.org/...

PostCSS是一個平臺，在這個平臺上，我們能夠開發一些插件，來處理我們的CSS，比如熱門的：Autoprefixer 。Autoprefixer 是一個流行的 PostCSS 插件，其作用是為 CSS 中的屬性添加瀏覽器特定的前綴。

//.postcssrc.js
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

上述代碼，autoprefixer會去讀取 package.json 下 browserslist的配置文件

> 1% 兼容全球使用率大于1%的游覽器

last 2 versions 兼容每個游覽器的最近兩個版本

not ie <= 8 不兼容ie8及以下

.babelrc

.babelrc文件用來配置babel。

.editorconfig

.editorconfig文件用來定義項目的編碼規范。

EditorConfig可以幫助開發者在不同的編輯器和IDE之間定義和維護一致的代碼風格。

EditorConfig的使用

在項目根創建一個名為 .editorconfig 的文件。該文件的內容定義該項目的編碼規范。

安裝與編輯器對應的 EditorConfig 插件。

其工作原理是：當你在編碼時，EditorConfig 插件會去查找當前編輯文件的所在文件夾或其上級文件夾中是否有 .editorconfig 文件。如果有，則編輯器的行為會與 .editorconfig 文件中定義的一致，并且其優先級高于編輯器自身的設置。

build

build中是一些webpack的相關配置，包括基本配置、開發環境配置、生產環境配置等。

config

config目錄主要是針對開發環境，生產環境，測試環境的配置信息。

src/assets與static

src/assets/：此目錄下的資源會被webpack處理。

static/：此目錄下的文件不會被webpack處理。在webpack打包后，此目錄下的文件會默認被直接復制到dist/static/中。這是通過在build.assetsPublicPath 和build.assetsSubDirectory來確定的。

詳情見：https://vuejs-templates.githu...

test

用于存放測試文件。

test/unit：包含單元測試相關的文件。關于單元測試如何操作，可見：Vue單元測試---Karma+Mocha+Chai實踐
test/e2e：包含 e2e 測試相關的文件。

云服務器 GPU云服務器阿里云服務器里面域名解析更換服務器里面有什么文件 js操作本地硬盤里面的文件如何訪問云服務器里面的文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89172.html

使用json-server來模擬REST API

摘要：官方地址使用可全局安裝，也可針對項目安裝。可用開啟服務。數據文件格式如下讓讀書點燃夢想地點濱江星耀城讓讀書點燃夢想地點濱江星耀城仿京東購物車仿京東購物車修改里面的命令。在前端開發中，如果后端接口還沒有提供，前端拿不到數據，可能就沒法繼續寫一些交互行為的代碼。這一問題可通過json-server來很好地解決。本文主要講如何將json-server和webpack進行整合，基于vue-w...

smartlion 2019-08-20 19:02 評論0 收藏0
Vue單元測試---Karma+Mocha+Chai實踐

摘要：官方推薦使用來進行單元測試。導入和組件，進行測試檢查原始組件選項組件有對于組件需要，編寫單元測試時，通過傳遞該參數。在狀態更新后檢查生成的在狀態改變后和斷言更新前等待一刻執行命令運行單元測試。參考單元測試測試框架實例教程本文基于vue-webpack-boilerplate。官方推薦使用Karma+Mocha+Chai來進行單元測試。介紹 Karma：一個測試運行器，用于啟動瀏覽器...

Ververica 2019-08-21 16:18 評論0 收藏0
推送近期三波關于Vue.js的資訊

摘要：原文來自集前端最近很火的框架資源定時更新，歡迎一下。推送自己整理近期三波關于的資訊這里就拋磚引玉了，望有更屌的資源送助攻。原文來自：集web前端最近很火的vue2框架資源；定時更新，歡迎Star一下。推送自己整理近期三波關于Vue.js的資訊；這里就拋磚引玉了，望有更屌的資源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

Anonymous1 2019-08-22 11:10 評論0 收藏0
使用Vue快速開發單頁應用－主體結構

摘要：本文以及后面相應文章，主要是相關技術棧來快速的實現單頁應用開發。原文出處其他使用快速開發單頁應用主體結構使用快速開發單頁應用使用快速開發單頁應用登錄頁面使用快速開發單頁應用功能組件與路由組件通信本文所涉及代碼全在vue-cnode 單頁應用，即在一個頁面集成系統中所有功能，整個應用只有一個頁面。因為路由的控制在前端，單頁面應用在頁面切換時比傳統頁面更快，從而在前端體驗更好。將邏輯從...

dcr309duan 2019-08-20 10:29 評論0 收藏0
webpack 教程資源收集

學習的過程中收藏了這些優秀教程和的項目，希望對你有幫助。 github地址, 有不錯的就更新官方文檔中文指南初級教程 webpack-howto 作者：Pete Hunt Webpack 入門指迷作者：題葉　 webpack-demos 作者：ruanyf 一小時包教會 —— webpack 入門指南作者：VaJoy Larn　　 webpack 入門及實踐作者：...

Backache 2019-08-21 14:05 評論0 收藏0