vue-構建app項目

如下記錄vue-cli 3構建app項目的步驟。

1、初始化配置，並運行啓動app

一、安裝nodeJS,git ,配置環境，Vue CLI 3.x 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

二、安裝vue-cli ,命令：npm install -g @vue/cli

三、建立項目：vue create mapp-demo

推薦vue ui 使用圖形化界面建立和管理項目

 

 

 

四、選擇安裝插件和依賴，通常babel,eslint,css預處理器，fastclick ，選擇vant做爲前端組件庫

注意：哪些是運行依賴，哪些是開發依賴

以下圖：

 

 

 

 

 

 

五、運行項目： 任務 -> serve -> 運行、啓動app 

 

 

 

六、

（1）可安裝vue devtools調試工具。

（2）vue-cli 3.x 構建的項目文件目錄說明

 

 

 

 

2、移動端初始化設置

（1）禁止移動端經過手指放大縮小頁面

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

  頁面位置： public/index.html  

 

（2）css reset

參考 https://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

頁面位置：新建文件放在  src/assets/reset.css

 

（3）解決部分手機屏幕1像素帶來的頁面樣式兼容性問題

@charset "utf-8";

.border,

.border-top,

.border-right,

.border-bottom,

.border-left,

.border-topbottom,

.border-rightleft,

.border-topleft,

.border-rightbottom,

.border-topright,

.border-bottomleft {

    position: relative;

}

.border::before,

.border-top::before,

.border-right::before,

.border-bottom::before,

.border-left::before,

.border-topbottom::before,

.border-topbottom::after,

.border-rightleft::before,

.border-rightleft::after,

.border-topleft::before,

.border-topleft::after,

.border-rightbottom::before,

.border-rightbottom::after,

.border-topright::before,

.border-topright::after,

.border-bottomleft::before,

.border-bottomleft::after {

    content: "\0020";

    overflow: hidden;

    position: absolute;

}

/* border

 * 因，邊框是由僞元素區域遮蓋在父級

 * 故，子級如有交互，須要對子級設置

 * 定位 及 z軸

 */

.border::before {

    box-sizing: border-box;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    border: 1px solid #eaeaea;

    transform-origin: 0 0;

}

.border-top::before,

.border-bottom::before,

.border-topbottom::before,

.border-topbottom::after,

.border-topleft::before,

.border-rightbottom::after,

.border-topright::before,

.border-bottomleft::before {

    left: 0;

    width: 100%;

    height: 1px;

}

.border-right::before,

.border-left::before,

.border-rightleft::before,

.border-rightleft::after,

.border-topleft::after,

.border-rightbottom::before,

.border-topright::after,

.border-bottomleft::after {

    top: 0;

    width: 1px;

    height: 100%;

}

.border-top::before,

.border-topbottom::before,

.border-topleft::before,

.border-topright::before {

    border-top: 1px solid #eaeaea;

    transform-origin: 0 0;

}

.border-right::before,

.border-rightbottom::before,

.border-rightleft::before,

.border-topright::after {

    border-right: 1px solid #eaeaea;

    transform-origin: 100% 0;

}

.border-bottom::before,

.border-topbottom::after,

.border-rightbottom::after,

.border-bottomleft::before {

    border-bottom: 1px solid #eaeaea;

    transform-origin: 0 100%;

}

.border-left::before,

.border-topleft::after,

.border-rightleft::after,

.border-bottomleft::after {

    border-left: 1px solid #eaeaea;

    transform-origin: 0 0;

}

.border-top::before,

.border-topbottom::before,

.border-topleft::before,

.border-topright::before {

    top: 0;

}

.border-right::before,

.border-rightleft::after,

.border-rightbottom::before,

.border-topright::after {

    right: 0;

}

.border-bottom::before,

.border-topbottom::after,

.border-rightbottom::after,

.border-bottomleft::after {

    bottom: 0;

}

.border-left::before,

.border-rightleft::before,

.border-topleft::after,

.border-bottomleft::before {

    left: 0;

}

@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {

    /* 默認值，無需重置 */

}

@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {

    .border::before {

        width: 200%;

        height: 200%;

        transform: scale(.5);

    }

    .border-top::before,

    .border-bottom::before,

    .border-topbottom::before,

    .border-topbottom::after,

    .border-topleft::before,

    .border-rightbottom::after,

    .border-topright::before,

    .border-bottomleft::before {

        transform: scaleY(.5);

    }

    .border-right::before,

    .border-left::before,

    .border-rightleft::before,

    .border-rightleft::after,

    .border-topleft::after,

    .border-rightbottom::before,

    .border-topright::after,

    .border-bottomleft::after {

        transform: scaleX(.5);

    }

}

@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {

    .border::before {

        width: 300%;

        height: 300%;

        transform: scale(.33333);

    }

    .border-top::before,

    .border-bottom::before,

    .border-topbottom::before,

    .border-topbottom::after,

    .border-topleft::before,

    .border-rightbottom::after,

    .border-topright::before,

    .border-bottomleft::before {

        transform: scaleY(.33333);

    }

    .border-right::before,

    .border-left::before,

    .border-rightleft::before,

    .border-rightleft::after,

    .border-topleft::after,

    .border-rightbottom::before,

    .border-topright::after,

    .border-bottomleft::after {

        transform: scaleX(.33333);

    }

}

頁面位置：新建文件放在  src/assets/border1px.css

 

（4）爲避免瀏覽器兼容問題引發的點擊問題（部分瀏覽器對點擊事件有300毫秒的延遲響應機制）

解決辦法：

1）先安裝依賴 Fastclick （界面操做方式->搜索依賴Fastclick並安裝  ； 或者 命令方式安裝  ）

注意：是Fastclick運行依賴

2）頁面位置：src/main.js文件中，加入如下代碼

import Fastclick from 'fastclick'

 

//問題：當使用FastClick 時，input框在ios上點擊輸入調取手機自帶輸入鍵盤不靈敏，有時候甚至點不出來。而安卓上徹底沒問題。這個緣由是由於FastClick的點擊穿透。

//FastClick的ios點擊穿透解決方案

Fastclick.prototype.focus = function (targetElement) {

  let length;

  if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {

      length = targetElement.value.length;

      targetElement.focus();

      targetElement.setSelectionRange(length, length);

  } else {

      targetElement.focus();

  }

};

Fastclick.attach(document.body);

//way2

/*if ("addEventListener" in document && "ontouchstart" in window) {

  FastClick.prototype.focus = function(targetElement) {

    targetElement.focus();

  };

  document.addEventListener(

    "DOMContentLoaded",

    function() {

      FastClick.attach(document.body);

    },

    false

  );

}*/

 

（5）vant相關引入

1）自動按需引入組件 （或者界面搜索依賴 babel-plugin-import並安裝）

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'] ] }; 

// 接着你能夠在代碼中直接引入 Vant 組件 // 插件會自動將代碼轉化爲方式二中的按需引入形式 import { Button } from 'vant';

2）iPhone X 等機型底部存在底部指示條，指示條的操做區域與頁面底部存在重合，容易致使用戶誤操做，所以咱們須要針對這些機型進行底部安全區適配。Vant 中部分組件提供了safe-area-inset-bottom屬性，設置該屬性後，便可在對應的機型上開啓適配，以下示例：

頁面位置：public/index.html

　<!-- 在 head 標籤中添加 meta 標籤，並設置 viewport-fit=cover 值 -->

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,er-scalable=no, viewport-fit=cover">

    <!-- 開啓 safe-area-inset-bottom 屬性 -->

    <van-number-keyboard safe-area-inset-bottom />

 

3）rem適配  （注意：若是隻是用px，不需配置此步驟）

Vant 中的樣式默認使用px做爲單位，若是須要使用rem單位，推薦使用如下兩個工具：

• postcss-pxtorem 是一款 postcss 插件，用於將單位轉化爲 rem
• lib-flexible 用於設置 rem 基準值

而後，須要進行PostCSS配置

下面提供了一份基本的 postcss 配置，能夠在此配置的基礎上根據項目需求進行修改

注意：在配置 postcss-loader 時，應避免 ignore node_modules 目錄，這會致使 Vant 的樣式沒法被編譯

module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }

4）同一臺機器運行多個vue項目，修改vue.config.js中端口號的設置

module.exports = {

......其餘設置項
lintOnSave: true, // 在保存時校驗格式
productionSourceMap: false, // 生產環境是否生成 SourceMap
devServer: {
open: true, // 啓動服務後是否打開瀏覽器
host: '0.0.0.0',
port: 3000, // 服務端口
https: false,
hotOnly: false,
proxy: null, // 設置代理
before: app => {}
}
};

 

 

 

 

============寫在最後====================================================================================================

【注意事項】

在界面模式下安裝依賴的時候，要選擇運行依賴仍是開發依賴。

問題：原先vant和fastclick都是運行依賴安裝好了，後來安裝babel-plugin-import需選擇開發依賴，可是會改變了vant和fastclick爲開發依賴。後來卸載重裝了好幾回，，以爲界面選擇的時候，存在bug吧。

若是仍是界面模式下，建議先安裝好開發依賴babel-plugin-import，而後選擇運行依賴切換按鈕下的vant和fastclick，點擊安裝前也再點擊 運行依賴的切換按鈕，以保證安裝的是運行依賴。