從零開始搭建Vue2.0項目(一)之快速開始
- 2022 年 7 月 26 日
- 筆記
從零開始搭建Vue2.0項目(一)之項目快速開始
前言📋
該樣板適用於大型，嚴肅的項目，並假定您對Webpack和有所了解vue-loader。確保還閱讀vue-loader的文檔，了解常見的工作流程配方。
如果您只想嘗試vue-loader或快速製作出原型，請改用webpack-simple模板。
快速開始🚀
要使用此模板，請使用vue-cli搭建項目。建議使用npm 3+以獲得更有效的依賴關係樹。
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
安裝完成後，成功運行：
項目結構🌈
.
├── build/ # webpack配置文件
│ └── ...
├── config/
│ ├── index.js # 主要項目配置
│ └── ...
├── src/
│ ├── main.js # 應用入口文件
│ ├── App.vue # 主應用程序組件
│ ├── components/ # ui組件
│ │ └── ...
│ └── assets/ # 模塊資源（由webpack處理）
│ └── ...
├── static/ # 純靜態資源（直接複製）
├── test/
│ └── unit/ # 單元測試
│ │ ├── specs/ # 測試spec文件
│ │ ├── index.js # 測試構建條目文件
│ │ └── karma.conf.js # 測試跑步者配置文件
│ └── e2e/ # e2e測試
│ │ ├── specs/ # 測試spec文件
│ │ ├── custom-assertions/ # e2e測試的自定義斷言
│ │ ├── runner.js # 測試跑步腳本
│ │ └── nightwatch.conf.js # 測試跑步者配置文件
├── .babelrc # babel 配置
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # editor 配置
├── index.html # index.html模板
└── package.json # 構建腳本和依賴關係
下面的內容建議根據需要自行了解哈，這裡就不再細講了😛！
想直接上手下一步配置的可以直接跳轉到下一篇了 👉
項目完整配置
詳細配置參考webpack官網：//vuejs-templates.github.io/webpack/😎
Babel配置
該樣板babel-preset-env用於配置Babel。您可以在此處了解更多信息-//2ality.com/2017/02/babel-preset-env.html。因此，通過配置Babel可以使程序運行在不同版本的瀏覽器中(比如：IE 11+)
一個Babel預設，可根據目標瀏覽器或運行時環境自動確定所需的Babel插件和polyfill，從而將ES2015 +向下編譯為ES5。
它用於browserslist解析此信息，因此我們可以使用所支持的browserslist任何有效查詢格式。
但是有一個警告。browserslist建議在定義像一個共同的地方目標package.json或在.browserslistrc配置文件中。這允許像autoprefixer和eslint-plugin-compat共享配置的工具。對於此模板，browserslist在中配置package.json：
{
"...": "...",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
但最新的穩定版本babel-preset-env，v1.6.1不支持從中加載配置package.json。因此，在中重複了目標環境.babelrc。如果要更改目標環境，請確保同時更新package.json和.babelrc。請注意，此問題已在beta版本（@babel/[email protected]）中修復，一旦模板超出beta版本，模板就會進行更新。
Linter配置
該樣板使用ESLint作為臨時對象，並使用帶有一些小的定製的Standard預設。
如果您對默認的掉毛規則不滿意，則可以選擇以下幾種方法：
-
覆蓋中的單個規則
.eslintrc.js。例如，您可以添加以下規則來強制使用分號而不是省略分號：// .eslintrc.js "semi": [2, "always"] -
生成項目時，請選擇其他ESLint預設，例如eslint-config-airbnb。
-
生成項目並定義自己的規則時，為ESLint預設選擇「無」。有關更多詳細信息，請參見ESLint文檔。
修復棉絨錯誤
您可以運行以下命令讓eslint修複發現的任何錯誤（如果可以的話-並非所有錯誤都可以像這樣修復）：
npm run lint -- --fix
（--中間的，以確保將--fix選項傳遞給eslint，而不是npm）是必要的
預處理器
此樣板為大多數流行的CSS預處理器（包括LESS，SASS，Stylus和PostCSS）預先配置了CSS提取。 要使用預處理器，您需要做的就是為其安裝適當的webpack加載器。 例如，要使用SASS：
npm install sass-loader node-sass --save-dev
請注意，您還需要安裝node-sass，因為sass-loader將其視為對等依賴關係。
在組件內部使用預處理器:
安裝完成後，您可以使用* .vue組件中的預處理器，使用
