vue-vant移動端項目

• 基於vue cli3創建vue項目

先查看本機有沒有安裝NodeJS

win + R 進入控制台

輸入 node -v 查看 node版本信息

如果有版本號，則說明已安裝，否則需安裝 NodeJS

再安裝Vue Cli（如果有就不用再安裝了）

npm install -g @vue/cli

通過傳統方式創建項目

• 具體步驟如下：

步驟一：

方式一：在項目文件夾下按 shift + 鼠標右鍵 選擇 在此處打開 Powershell 窗口（不同系統可能名字不同，我的是 win10 ，win7顯示的是在此處打開命令窗口）

方式二：可以先通過vscode打開項目文件夾，然后再按 ctrl + ~ 鍵打開控制器，然后按后面步驟走

步驟二：

在新開的控制窗口輸入 vue create 項目名，比如：vue create vuecliDemo

哦豁~報錯了，這里報錯的原因是項目名不能走駝峰，你可以用 vue create vueclidemo 或者 vue create vuecli_demo 創建項目，這里我選擇 vue create vuecli_demo

出現此頁面的時候說明咱們項目名沒問題了，正式進入相關配置選項了

步驟三：

選擇相關配置（上下箭頭選擇配置，按空格鍵選中/取消配置），初始化項目：

步驟四：

安裝相關依賴，出現下圖，則說明項目已經創建完成

步驟五：

進入項目目錄 cd vuecli_demo ，啟動項目 npm run serve ，打開網頁查看項目，項目正常運行

 

 

• 創建完后通過 VScode 編輯器 打開項目，安裝Vant ui

在VScode中，通過 Ctrl + ~ 組合鍵打開 終端

輸入
npm i vant -S
安裝vant

• 配置babel.config.js文件，完成按需引入組件功能

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ['import', {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        }, 'vant']
    ]
}

• 引入vant組件測試

首先安裝模塊插件：

npm i babel-plugin-import -D

ps：babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

引入組件方式有兩種（推薦使用局部引入）：

方式一： 在main.js文件中引入，全局使用

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

<van-button type="default">默認按鈕</van-button>

此方法引入的Toast組件，使用方式：
this.$toast({        
    message: 'test info',        
    duration: 1000,        
    forbidClick: true    
});

方式二： 在頁面單獨引用，僅作用於此頁面

<template>
  <div>
    <van-button type="default">默認按鈕</van-button>
  </div>
</template>

<script>
    import { Button } from 'vant';
    import { Popup } from 'vant';
    export default {
        components:{
            Button,
            Popup
        }
    }
</script>

• 運行項目

npm run serve

成功啟動后如下圖：

• 解決移動端適配問題

安裝對應插件

npm i postcss-pxtorem -S
npm i amfe-flexible -S

安裝了postcss-pxtorem 最新版，運行時如果報錯 “vant PostCSS 8 for end users”，請安裝 postcss-pxtorem@5.1.1 版本，暫時可行

• 新建vue.config.js，引入插件，進行相關配置

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.0",
              "iOS 7",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ]
          }),
          pxtorem({
            rootValue: 37.5, /*37.5對應的是375尺寸的圖，如果是750尺寸的圖則替換成75，以此類推*/
            propList: ['*'],
          })
        ]
      }
    }
  },
};

• main.js文件中導入amfe-flexible

import 'amfe-flexible'

• index.html配置移動端meta信息

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

完成，可在瀏覽器測試