安裝

• node：vue cli 需要node版本>=8.9, （官方推薦：8.11.0+ ），沒有的自行下載：node下載地址
• 安裝vue腳手架：vue腳手架目前已經升級到4.x，所以直接 npm install -g @vue/cli 預設下載的是cli4.x ，想要安裝cli3.x只需要輸入命令：

npm install -g @vue/[email protected]
```，
輸入

vue -V

檢視是否安裝成功

# 建立專案
- 方式一：使用命令建立專案：```vue create <Project Name> //檔名 不支援駝峰（含大寫字母）```

- 方式二：也可以使用視覺化頁面來建立專案（推薦）
  執行```vue ui```
  ![](https://img2020.cnblogs.com/blog/2683102/202112/2683102-20211223173606669-1714981557.png)
  ![](https://img2020.cnblogs.com/blog/2683102/202112/2683102-20211223173622312-128109311.png)

# 安裝vant
## 安裝
- 方式一：npm安裝：```npm i vant -S```
- 方式二：通過腳手架安裝，執行```vue ui```
![](https://img2020.cnblogs.com/blog/2683102/202112/2683102-20211223173904999-1801778066.png)

## 引入
- 方式一：全域性引入
 

// 在src/main.js進行全域性引入
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

- 方式二：自動按需引入元件

// 安裝外掛：babel-plugin-import 是一款 babel 外掛，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式。
npm i babel-plugin-import -D

// 在.babelrc 中新增配置
// 注意：webpack 1 無需設定 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}

// 對於使用 babel7 的使用者，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};

![](https://img2020.cnblogs.com/blog/2683102/202112/2683102-20211223174347376-276183883.png)

# 加入rem
- 安裝命令：

npm install [email protected] --save-dev     //這個需要指定版本，不然執行會報錯：PostCSS plugin postcss-pxtorem requires PostCSS 8.
npm i -S amfe-flexible
 

- main.js中引入
 ```
 import 'amfe-flexible/index.js'
 ```
- 在專案根目錄下新建postcss.config.js，加入以下程式碼
 ```
 module.exports = {
   plugins: {
     'autoprefixer': {
       overrideBrowserslist: [
         'Android 4.1',
         'iOS 7.1',
         'Chrome > 31',
         'ff > 31',
         'ie >= 8'
       ]
     },
     'postcss-pxtorem': {
       rootValue: 37.5,   //基數，375px 即100%寬度，寫px會自動rem處理，如果不想被rem處理，可以使用PX來寫。
       propList: ['*']
     }
 }
 ```
- 重跑專案，寫div，在瀏覽器審查元素，檢視是否已轉換為rem

# 配置vue.config.js
根目錄下新建vue.config.js，直接複製下面程式碼

module.exports = {
publicPath:'/',//部署應⽤包時的基本路徑
outputDir:'dist',//構建輸出目錄
assetsDir:'assets',//靜態資源目錄（js,css,img,fonts）
lintOnSave: false,//是否開啟eslint儲存監測，有效值：true || false || 'error'
devServer:{
open:false, //專案執行起來自動開啟瀏覽器
host:'0.0.0.0',// 配置主機地址
port:8080,//埠號
https:false,// 開啟https
hotOnly:true, //熱更新
proxy:{
//配置跨域
'/api':{
target:'http://locallhost:5000/api/',
ws:true,
changOrigin:true,
pathRewrite:{ //地址重寫,將'/api'替換成''
'^/api':''
}
}
}
},
}

# 根據自己需求配置eslint
我這裡新增了兩個不希望eslint報錯的配置：

package.json:

"rules": {
"no-unused-vars": "off", //禁止宣告變數不使用：關閉
"vue/no-unused-components": "off" //禁止vue引入元件不使用：關閉
}

//注意：
//json檔案不能寫註釋
//改變了eslintrc檔案中的配置，一定要重啟專案才能生效