輝太郎看前端 移動端獨立開發專案前期配置

2021-10-13 21:10:38 字數 3783 閱讀 9771

前言

移動端我們要用到多環境開發axios,vant,rem

配置專案

package.json裡的scripts中配置serve,stage,build,通過--mode ***來執行不同環境。

"scripts"

:

在根目錄新建三個檔案

node_env

='development'

# must start with

='development'

node_env

='production'

# must start with

='staging'

node_env

='production'

# must start with

='production'

src目錄下新建config資料夾,統一管理baseurl

// 根據環境引入不同配置 process.env.node_env

const config =

require

('./env.'

+ process.env.

)module.exports = config

// 本地環境配置

module.exports =

注:一下兩個和上邊的配置差不多,就不一一寫了,對應環境,配置對應介面即可。

axios***中匯入我們配置的環境

import

from

'@/config/index'

npm install axios -

s

新建http資料夾裡邊新建三個js檔案

import axios from

'axios'

import store from

'@/store'

import

from

'vant'

// 根據環境不同引入不同api位址

函式名稱

(params))}

export

default

在main.js中匯入

vue.prototype.$http = axios元件中呼叫

s匯入

import vant from

'vant'

import

'vant/lib/index.css'

vue.

use(vant)

npm i babel-plugin-

import

-d

在babel.config.js中配置

// 對於使用 babel7 的使用者,可以在 babel.config.js 中配置

const plugins =[[

'import',,

'vant']]

module.exports =]]

, plugins

}

元件的使用(新建src/vant/vant.js)

// 按需全域性引入 vant元件

import vue from

'vue'

import

from

'vant'

vue.

use(button)

vue.

use(cell)

vue.

use(list)

vue.

use(tabbar)

.use

(tabbaritem)

一般情況我只會在assets中新建乙個js檔案,然後匯入到main.js

js內容配置

function

rem(

)rem()

;window.onresize=rem;

匯入到main.js

import

'@/assets/rem.js'

public中的index.html中設定meta標籤

name

="viewport"

content

="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

>

總結

初出茅廬,請多多指教哦!?

輝太郎看前端 手寫深拷貝遞迴

建立乙個新的物件和陣列,將原物件的各項屬性的 值 陣列的所有元素 拷貝過來,是 複製 而不是 引用 注 該 只能夠傳物件和陣列,其他類不行。一丶const add arr a b c 遞迴函式 function deepclone obj let result 初始化變數 判斷是不是乙個陣列 if ...

輝太郎看前端 js非同步巨集任務和微任務

前言巨集任務 settimeout,setinterval,ajax,dom事件 微任務 promise,async await。優先順序 微任務執行要比巨集任務要早。注 同步任務會和微任務按照出場順序先後執行,最後執行巨集任務。同步和非同步console.log 123 alert 阻塞 cons...

移動端前端開發1 0

1.從時間成本來說,移動端的開發最耗時的是尺寸即解析度,為了解決解析度問題,我們要先理清幾個關鍵性概念 window.innerwidth 980 viewport content width device width,initial scale 1,initial scale 1,minimum ...