VUE項目框架配置

一、工具準備

• Node.js安裝
  安裝方法：點擊查看

• WebStorm安裝
  下載地址：點擊查看

二、環境準備

• 鏡像準備

1.查看代理：npm get registry
2.設置淘寶鏡像

2.1臨時使用.
npm --registry https://registry.npm.taobao.org install express

2.2持久使用.
npm config set registry https://registry.npm.taobao.org

2.3驗證是否成功
npm config get registry 或 npm info express

2.4.還原：
npm config set registry https://registry.npmjs.org/

• 升級node.js(如果是新版本可跳過)

1.npm install -g n
2.n stable （最新穩定版本）或者 n latest （最新版本）

如果執行第二步報錯：Error: sudo required，錯誤為權限不夠。
執行命令
sudo n stable 或者 sudo n latest 即可

• 升級Vue CLI 3

Vue CLI 需要 Node.js 8.9 或更高版本,如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

1.安裝新包：npm install -g @vue/cli
2.查看版本：vue --version 或者 vue -V
3.vue create projectName

詢問安裝類型，按鍵盤上下鍵選擇默認（default安裝了balel、eslint其余要用什么，需要手動再安裝）還是手動（Manually）,此處選擇手動。

4.Check the features needed for your project:

詢問項目的需求，上下鍵切換，空格選擇，回車確認。我選擇如下

5.Use history mode for router

詢問項目的路由模式是否使用History。我選擇如下

6.Pick a CSS pre-processor

詢問項目的CSS預處理器。我選擇如下

7.Pick a linter / formatter config

詢問項目的格式校驗方式。我選擇如下

8.Pick additional lint features

詢問項目的什么時候校驗格式(1是保存時，2是提交時)。我選擇如下

9.Pick a unit testing solutio

詢問項目的測試框架

10.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

詢問項目的配置文件存放在哪兒（1是獨立文件，2是在package.json）這里選擇獨立的文件，選擇2在后續配置postcs適配時存在問題。

11.Save this as a preset for future projects

詢問保存該配置是否作為后續項目的可選配置，選擇是，則會要求給該配置命名，這個自己定就行,我輸入為：default-setting.配置后會在創建項目時：vue create projectName 看到這個配置。

• 國際化配置 Vue I18n

1.安裝：npm install vue-i18n 或者 vue add i18n (Vue CLI 3)
2.選擇默認環境：The locale of project localization. (en) 輸入：zh
3.切換的環境The fallback locale of project localization 輸入：en
4.打開項目，在src下新建lang目錄
5.選擇在src下的一個目錄作為存放：The directory where store localization messages of project. It's stored under
src directory. (locales)
輸入：lang
6.單引號設置：Enable locale messages in Single file components ? (y/N) 輸入：y
7.查看目錄lang，生成了zh.json en.json

• 適配插件postcss安裝

1.命令安裝：npm i --save-dev postcss
2.命令安裝：npm isntall postcss-import
3.命令安裝：npm i postcss-px-to-viewport
4.命令安裝：npm i postcss-aspect-ratio-mini
5.命令安裝：npm i postcss-cssnext
6.命令安裝：npm i postcss-write-svg
7.命令安裝：npm i postcss-viewport-units
8.命令安裝：npm i cssnano-preset-advanced --save-dev
9.命令安裝：npm install
10.打開項根目錄下找到postcss.conf.js
改為：

module.exports = {plugins: {'postcss-import': {},'postcss-aspect-ratio-mini': {},'postcss-write-svg': {utf8: false},'postcss-cssnext': {},'postcss-px-to-viewport': {// 視窗的寬度，對應的是我們設計稿的寬度，一般是750viewportWidth: 750,// 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置viewportHeight: 1334,// 指定`px`轉換為視窗單位值的小數位數unitPrecision: 3,// 指定需要轉換成的視窗單位，建議使用vwviewportUnit: 'vw',// 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名selectorBlackList: ['.ignore', '.hairlines'],// 小于或等于`1px`不轉換為視窗單位，你也可以設置為你想要的值minPixelValue: 1,// 允許在媒體查詢中轉換`px`mediaQuery: false},'postcss-viewport-units': {filterRule: rule => rule.selector.indexOf('::after') === -1 && rule.selector.indexOf('::before') === -1 && rule.selector.indexOf(':after') === -1 && rule.selector.indexOf(':before') === -1},cssnano: {preset: 'advanced',autoprefixer: false,'postcss-zindex': false}}
}
11.npm run serve

新版的運行命令切換為了npm run serve，可以在package.json中如下圖位置查看更改

項目打開成功如下圖，樣式單位由PX換位VM即為成功

注意事項

• 該轉換在對img處理時，需對img樣式進行修改，否則會導致手機端img不展示，在app.js中增加下列代碼

 img {content: normal !important;}

• 第一次打開項目時加載node_modules很慢，可以在偏好設置中如下處理：

部分webstrom默認設置的js格式不是ES6，可如下處理

eslint 自動格式化（需新版webstrom）
偏好配置如下：

使用方式：找到報錯文件，右鍵Fix ESlint Problems即可，
注意：網上有兩種方式：一種右鍵.eslintrc.js文件執行Fix ESlint 或者 Apply ESlint或者eslint --fix后再運行，報錯會消失，但是錯誤并不會改正。