關於Vue-cli3 + vant 搭建移動app項目

1、安裝模板

1.1、vue-cli3模板安裝

a 普通安裝:npm install -g @vue/cli

b 淘寶鏡像安裝：cnpm install -g @vue/cli

我這裏使用的是普通安裝：npm install -g @vue/cli

1、首先打開命令窗口（window圖標+R  輸入cmd 彈出命令窗口）

2、通過輸入（磁盤名稱:） 進入其他磁盤目錄

3、通過輸入cd + 文件夾名稱   進入該文件

4、在命令窗口下輸入npm install -g @vue/cli 進行安裝模板

如下圖：需要在某一個文件夾下進行模板的安裝，等待安裝的完成即可進行項目的創建

1.2、使用圖形界面來創建項目

a 使用命令vue ui 通過操作圖形界面來創建項目(這個一般都不會使用這個來創建項目的)

1.3、使用命令行來創建項目

1.3.1、創建項目

1、在安裝模板的當前目錄裏通過輸入命令 vue + create + 項目名稱（必須全部小寫）創建好了項目就會出現如下圖一樣的界面

2、如圖中一樣，使用方向鍵來選擇，選中Manaually select features 選項，使用回車來確定選擇，會出現如下圖界面

3、將圈中的全部選中，點擊回車出現如下界面

4、輸入Y，然後點擊回車，出現如下界面

5、如上圖中選中當前選項，點擊回車出現如下圖

6、如上圖中選中當前選項，點擊回車出現如下圖

7、如上圖中選中當前選項，點擊回車出現如下圖

8、如上圖中選中當前選項，點擊回車出現如下圖

 8、如上圖中選中當前選項，點擊回車之後就開始創建項目了，當出現如下圖中圈中的內容時，證明當前項目已經創建成功了

 9、然後通過使用cd + 項目名稱  進入項目

10、通過使用npm run serve 來啓動運行項目，如果出現瞭如下圖界面，證明項目啓動成功

11、輸入npm run build 打包項目

12、到此一個vue-cli3項目就創建完成了

1.4、安裝插件

1.4.1、安裝jQuery

1、在當前項目目錄下輸入命令npm install jquery -save 點擊回車開始安裝

2、安裝完成之後需要在項目的根目錄下創建文件vue.config.js，該文件的內容爲：

const webpack = require('webpack')
module.exports ={
configureWebpack: {
		plugins: [
			new webpack.ProvidePlugin({
				$: "jquery",
				jQuery: "jquery"
			})
		]
	},
}

3、然後在main.js裏面添加 import $ from 'jquery' 即可完成對jQuery的安裝

1.4.2、安裝vant  ui框架

1、在項目目錄下輸入命令：npm install vant -save 點擊回車開始安裝

2、在babel.config.js文件文件裏面添加如下內容

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

3、對於使用這個我們首先需要看一下關於這個的簡介(api地址:https://youzan.github.io/vant/#/zh-CN/tabbar)

4、自動按需引入組件 (推薦)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']
  ]
};

5、然後可以在代碼中通過 import {Button} from 'vant' ;引入按鈕組件

6、還可以導入所有的組件在main.js裏面導入如下(但是不推薦這樣導入的東西太多體積太大)：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

7、還有其他的引入方法，在這裏就不多做介紹了，如有需要請到官網去查看。

1.4.3、安裝 postcss-pxtorem，amfe-flexible 插件

1、安裝這兩個是由於vant 的單位都是以px爲準的，所以在移動端進行適配的話會出問題的，因此需要安裝這兩個插件

2、在項目目錄下輸入命令：npm install postcss-pxtorem -save 安裝完成之後輸入 npm install amfe-flexible -save命令

3、兩個都安裝好了之後在vue.config.js文件裏面添加如下內容

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports ={
  css: {
    // modules:false,
    // extract:true,
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
}

4、需要在main.js裏面添加如下內容

import 'amfe-flexible';

 

後期在逐步添加其他需要的插件...

敬請期待

1.5、關於使用vant的Tabbar 標籤欄

1.5.1、導入相關組件，如下

  導入的代碼爲： import { Tabbar, TabbarItem } from 'vant';

1.5.2、編寫的代碼如下

<template>
  <div id="app">
    <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
      <van-tabbar-item to="/" icon="home-o">
        Home
      </van-tabbar-item>
      <van-tabbar-item replace to="/about" icon="search">
        About
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o">標籤</van-tabbar-item>
      <van-tabbar-item icon="setting-o">標籤</van-tabbar-item>
    </van-tabbar>
    <router-view />
  </div>
</template>

<script>
  import {
    Tabbar,
    TabbarItem
  } from 'vant'

  export default {
    components: {
      'van-tabbar': Tabbar,
      'van-tabbar-item': TabbarItem
    },
    data() {
      return {
        active: 0
      }
    }
  }
</script>

<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
  }
</style>

1.5.3、運行效果如下

到此，一個基本的移動端的app就創建完成了