vue+vant 實現rem的轉換

1. 搭建環境

1.1.輸入 vue ui

1.2. create project 建立專案

1.3. 選擇手動安裝

1.4. 選擇配置檔案

1.5. 選擇版本和postcss配置

1.6. 選擇預設—我們這邊不選擇預設

1.7. 等待建立

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-mGTzhOBC-1608575680491)(./img/image-20201222012111107.png)]

1.8. 建立成功！！

2. 啟動專案

2.1. 找到對應的專案檔案—> 找到tasks任務----> 找到serve 服務----> 找到Run task 啟動專案

2.2. 點選啟動

2.3. 啟動成功

3. 安裝vant

3.1. 找到Dependencies–>install

3.2. 安裝成功

4. vue專案中使用vant

4.1.配置babel,新建根目錄下新建：.babelrc(如果專案中，就不需要新建了)

• 寫入配置：

  {
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }
  

4.2. 安裝依賴

# 1.安裝babel-plugin-import實現按需載入
yarn add babel-plugin-import

4.3. 測試是否可以使用vant

• 1. 在about.vue頁面寫入：

     

     <van-button type="default">預設按鈕1</van-button>
     <van-button type="primary" @click="clickEvent">主要按鈕</van-button>
     <van-button type="info">資訊按鈕</van-button>
     <van-button type="warning">警告按鈕</van-button>
     <van-button type="danger">危險按鈕</van-button>
     

  2. 在main.js寫入：

     import {Button} from 'vant';
     Vue.use(Button);
     

     

  3. 重新整理頁面：

     

  4. 說明成功了

5. 引入rem轉換–安裝postcss-pxtorem 這個是將px轉為rem----注意直接可以在專案設定px，這個外掛自動會編譯的rem自動識別，你在專案中使用px就可以了，不用在vscode再次使用rem,這樣子寫起來更快了

5.1. 命令安裝：postcss-pxtorem

yarn add postcss-pxtorem

5.2. 命令安裝：amfe-flexible

yarn add amfe-flexible

5.3. 在main.js檔案中引入amfe-flexible/index.js

	import 'amfe-flexible/index.js'

5.4. 在public/index.html加入meta標籤

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

5.5. 在package.json專案配置裡設定postcss

        "postcss": {
		    "plugins": {
		      "autoprefixer": {
		        "overrideBrowserslist": [
		          "Android 4.1",
		          "iOS 7.1",
		          "Chrome > 31",
		          "ff > 31",
		          "ie >= 8"
		        ]
		      },
		      "postcss-pxtorem": {
		        "rootValue": 37.5,
		        "propList": [
		          "*"
		        ]
		      }
		    }
		  }

5.6. 在瀏覽器測試

• 這是在plus下的

• 在iPhone6測試一下，看看是否改變了

變小了，說明我們自適應成功了！！！