基於vue-cli3.0構建功能完善的移動端架子

web_zhou發表於2019-04-23

Vue

已升級vue-cli4,點我檢視

基於vue-cli3.0構建功能完善的移動端架子，主要功能包括

webpack 打包擴充套件
css：sass支援、normalize.css、_mixin.scss、_variables.scss
vw、rem佈局
跨域設定
eslint設定
cdn引入
路由設計、登入攔截
axios、api 設計
vuex狀態管理

專案地址: vue-cli3-H5

demo地址: zhouyupeng.github.io/vuecli3H5/#…

webpack 打包擴充套件

vue-cli3.*後目錄結構大改，去除了以往的build,config資料夾，要實現配置的改動在根目錄下增加vue.config.js進行配置

css：sass支援、normalize.css、_mixin.scss、_variables.scss

使用的css前處理器是sass，對於css mixin，變數這裡做了全域性引入，並且引入normalize.css 使HTML元素樣式在跨瀏覽器上表現得的高度一致性 vue.config.js配置

css: {
        // 是否使用css分離外掛 ExtractTextPlugin
        extract:isProduction ? true:false,
        // 開啟 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        // 啟用 CSS modules for all css / pre-processor files.
        modules: false,
            sass: {
                data: '@import "style/_mixin.scss";@import "style/_variables.scss";' // 全域性引入
            }
        }
    }
複製程式碼

vw、rem佈局

對於移動端適配方案使用的是網易新聞的方法, 使用vw + rem佈局

/**
750px設計稿
    取1rem=100px為參照，那麼html元素的寬度就可以設定為width: 7.5rem，於是html的font-size=deviceWidth / 7.5
**/
html {
    font-size: 13.33333vw
}

@media screen and (max-width: 320px) {
    html {
        font-size: 42.667PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size: 48PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size: 50PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size: 52.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size: 54.93PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size: 55.2PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size: 64PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size: 72PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size: 85.33PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size: 96PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size: 102.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4PX;

        #app {
            margin: 0 auto
        }
    }


}
複製程式碼

vue.config.js配置

loaderOptions: {
    postcss: {
        // 這是rem適配的配置
        plugins: [
            require('postcss-px2rem')({
                remUnit: 100
            })
        ]
    }
}
複製程式碼

開發時跨域設定

devServer: {
        open: true, // 啟動服務後是否開啟瀏覽器
        host: '127.0.0.1',
        port: 8088, // 服務埠
        https: false,
        hotOnly: false,
        proxy: 'https://easy-mock.com/' // 設定代理
    }
複製程式碼

配置完後，本地開發環境的axios的baseUrl要寫為 '' ，即空字串。釋出到線上時如果前端程式碼不是和後臺api放在同源下的，後臺還需做跨域處理，

eslint standard設定

使用的是JavaScript standard 程式碼規範,一個好的編碼風格它可以幫助減少團隊之間的摩擦，程式碼閱讀起來也更加清爽，更加可讀性，不要覺得煩，用了都說好。這是 JavaScript standard 程式碼規範的全文

自定義配置，在.eslintrc.js裡修改，這裡是我給出的配置，4個空格縮排，不檢查結尾分號,關閉單var 宣告，可自行配置

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    indent: [
        'error',
        4,
        {
            SwitchCase: 1
        }
    ],
    semi: 0, // 不檢查結尾分號,
    // 強制使用單引號
    quotes: ['error', 'single'],
    // 關閉函式名與後面括號間必須空格規則
    'space-before-function-paren': 0,
    // 關閉var 宣告，每個宣告佔一行規則。
    'one-var': 0
    }
複製程式碼

cdn引入

對於 vue、vue-router、vuex、axios等等這些不經常改動的庫、我們讓webpack不對他們進行打包，通過cdn引入，可以減少程式碼的大小、也可以減少伺服器的頻寬這裡使用的是360的cdn,附上一份公共cdn評測文章點我

vue.config.js配置

const externals = {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    'mint-ui': 'MINT',
    axios: 'axios'

}

const cdn = {
    // 開發環境
    dev: {
        css: [
            'https://lib.baomitu.com/mint-ui/2.2.13/style.min.css'
        ],
        js: []
    },
    // 生產環境
    build: {
        css: [
            'https://lib.baomitu.com/mint-ui/2.2.13/style.min.css'
        ],
        js: [
            'https://lib.baomitu.com/vue/2.6.6/vue.min.js',
            'https://lib.baomitu.com/vue-router/3.0.1/vue-router.min.js',
            'https://lib.baomitu.com/vuex/3.0.1/vuex.min.js',
            'https://lib.baomitu.com/axios/0.18.0/axios.min.js',
            'https://lib.baomitu.com/mint-ui/2.2.13/index.js'
        ]
    }
}

configureWebpack: config => {
        if (isProduction) {
            // externals裡的模組不打包
            Object.assign(config, {
                externals: externals
            })
       
        } else {
            // 為開發環境修改配置...
        }
    },
chainWebpack: config => {
    // 對vue-cli內部的 webpack 配置進行更細粒度的修改。
    // 新增CDN引數到htmlWebpackPlugin配置中， 詳見public/index.html 修改
    config.plugin('html').tap(args => {
        if (process.env.NODE_ENV === 'production') {
            args[0].cdn = cdn.build
        }
        if (process.env.NODE_ENV === 'development') {
            args[0].cdn = cdn.dev
        }
        return args
    })
}
複製程式碼

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<!-- DNS預解析 -->
	<link rel="dns-prefetch" href="//lib.baomitu.com" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui,viewport-fit=cover" />
	<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
	<!-- 使用CDN加速的CSS檔案，配置在vue.config.js下 -->
	<% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
	<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
	<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
	<% } %>

	<title>vuedemo</title>
</head>

<body>
	<noscript>
		<strong>We're sorry but vuedemo doesn't work properly without JavaScript
			enabled. Please enable it to continue.</strong>
	</noscript>
	<div id="app"></div>
	<!-- 使用CDN加速的JS檔案，配置在vue.config.js下 -->
	<% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
	<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
	<% } %>

	<!-- built files will be auto injected -->
</body>

</html>

複製程式碼

路由設計、登入攔截

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: {
                auth: false, // 是否需要登入
                keepAlive: true // 是否快取元件
            }
        },
        {
            path: '/about',
            name: 'about',
            component: () =>
                import(/* webpackChunkName: "about" */ './views/About.vue'),
            meta: {
                auth: true,
                keepAlive: true
            }
        },
        {
            path: '/login',
            name: 'login',
            component: () =>
                import(/* webpackChunkName: "login" */ './views/login.vue'),
            meta: {
                auth: false,
                keepAlive: true
            }
        },
        {
            path: '*', // 未匹配到路由時重定向
            redirect: '/',
            meta: {
                // auth: true,
                // keepAlive: true
            }
        }
    ]
})

// 全域性路由鉤子函式 對全域性有效
router.beforeEach((to, from, next) => {
    let auth = to.meta.auth
    let token = store.getters['login/token'];

    if (auth) { // 需要登入
        if (token) {
            next()
        } else {
            next({
                path: '/login',
                query: {
                    redirect: to.fullPath
                }
            })
        }
    } else {
        next()
    }
})

複製程式碼

在meta中設定是否需要登入以及是否快取當前元件，在router.beforeEac路由鉤子函式中對登入許可權判斷，沒有登入的跳到登入頁面，並且把當前頁面傳過去，登入後跳回這個頁面。

對於頁面快取的在app.vue裡進行處理

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
複製程式碼

axios、api 設計

對於axios的設計主要是請求攔截器， respone攔截器，以及get,post的二次封裝

axios.defaults.timeout = 12000 // 請求超時時間
axios.defaults.baseURL = process.env.VUE_APP_BASE_API

axios.defaults.headers.post['Content-Type'] =
    'application/x-www-form-urlencoded;charset=UTF-8' // post請求頭的設定
// axios 請求攔截器
axios.interceptors.request.use(
    config => {
        // 可在此設定要傳送的token
        let token = store.getters['login/token'];
        token && (config.headers.token = token)
        Indicator.open('資料載入中')
        return config
    },
    error => {
        return Promise.error(error)
    }
)
// axios respone攔截器
axios.interceptors.response.use(
    response => {
        // 如果返回的狀態碼為200，說明介面請求成功，可以正常拿到資料
        // 否則的話丟擲錯誤 結合自身業務和後臺返回的介面狀態約定寫respone攔截器
        Indicator.close()
        if (response.status === 200 && response.data.code === 0) {
            return Promise.resolve(response)
        } else {
            Toast({
                message: response.data.msg,
                position: 'middle',
                duration: 2000
            });
            return Promise.reject(response)
        }
    },
    error => {
        Indicator.close()
        const responseCode = error.response.status
        switch (responseCode) {
            // 401：未登入
            case 401:
                break
            // 404請求不存在
            case 404:
                Toast({
                    message: '網路請求不存在',
                    position: 'middle',
                    duration: 2000
                });
                break
            default:
                Toast({
                    message: error.response.data.message,
                    position: 'middle',
                    duration: 2000
                });
        }
        return Promise.reject(error.response)
    }
)
/**
 * 封裝get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
function get (url, params = {}) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
    // 或者return axios.get();
}
/**
 * post方法，對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
function post (url, params) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, qs.stringify(params))
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
    //  或者return axios.post();
}


複製程式碼

為了方便管理api路徑，這裡把所以請求都放在了api資料夾下，如

import { get, post } from '@/axios/http.js'
function getIndex (params) {
    return get('/mock/5cb48c7ed491cd741c54456f/base/index', params)
}
function login(params) {
    return post('/mock/5cb48c7ed491cd741c54456f/base/login', params)
}
export {
    getIndex,
    login
}

複製程式碼

其他

去除console.log

裝uglifyjs-webpack-plugin外掛

 // 上線壓縮去除console等資訊
config.plugins.push(
    new UglifyJsPlugin({
        uglifyOptions: {
            compress: {
                warnings: false,
                drop_console: true,
                drop_debugger: false,
                pure_funcs: ['console.log'] // 移除console
            }
        },
        sourceMap: false,
        parallel: true
    })
)
複製程式碼

設定alias目錄別名

在專案中經常會引用各個地方的檔案，配置後可以更加方便的引入了

config.resolve.alias
            .set('assets', '@/assets')
            .set('components', '@/components')
            .set('view', '@/view')
            .set('style', '@/style')
            .set('api', '@/api')
            .set('store', '@/store')
複製程式碼

環境變數和模式

在一個產品的前端開發過程中，一般來說會經歷本地開發、測試指令碼、開發自測、測試環境、預上線環境，然後才能正式的釋出。對應每一個環境可能都會有所差異，比如說伺服器地址、介面地址、websorket地址…… 等等。在各個環境切換的時候，就需要不同的配置引數，所以就可以用環境變數和模式，來方便我們管理。

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略
複製程式碼

自定義的變數VUE_APP_開頭，兩個特殊的變數：

NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決於應用執行的模式。
BASE_URL - 會和 vue.config.js 中的 baseUrl 選項相符，即你的應用會部署到的基礎路徑。

如我們定義的.env

NODE_ENV = 'development'
BASE_URL = '/'
VUE_APP_BASE_API = ''
複製程式碼

.env.production

NODE_ENV = 'production'
BASE_URL = './'
VUE_APP_BASE_API = 'https://easy-mock.com/'
複製程式碼

在專案中可以用process.env.VUE_APP_*，如process.env.VUE_APP_BASE_API獲取到定義的值

全域性引入filter

把多個地方用到的過濾器寫在一個js裡面，複用程式碼。

// 過濾日期格式，傳入時間戳，根據引數返回不同格式
const formatTimer = function(val, hours) {
    if (val) {
        var dateTimer = new Date(val * 1000)
        var y = dateTimer.getFullYear()
        var M = dateTimer.getMonth() + 1
        var d = dateTimer.getDate()
        var h = dateTimer.getHours()
        var m = dateTimer.getMinutes()
        M = M >= 10 ? M : '0' + M
        d = d >= 10 ? d : '0' + d
        h = h >= 10 ? h : '0' + h
        m = m >= 10 ? m : '0' + m
        if (hours) {
            return y + '-' + M + '-' + d + ' ' + h + ':' + m
        } else {
            return y + '-' + M + '-' + d
        }
    }
}
export default {
    formatTimer
}

複製程式碼

main.js引入

import filters from './filters/index'
// 注入全域性過濾器
Object.keys(filters).forEach(item => {
    Vue.filter(item, filters[item])
})
複製程式碼

使用

{{1555851774 | formatTimer()}}
複製程式碼

vue中使用mock.js

檢視我以前寫的文章點選我

wepback的視覺化資源分析工具外掛---webpack-bundle-analyzer

用來分析哪些模組引入了哪些程式碼，進行有目的性的優化程式碼

在打包環境中加，使用命令npm run build --report

if (process.env.npm_config_report) {
    config.plugins.push(new BundleAnalyzerPlugin())
}
複製程式碼

程式碼地址

專案地址: vue-cli3-H5

demo地址: zhouyupeng.github.io/vuecli3H5/#…

沒有伺服器學習的童鞋可以看看騰訊雲的 1核2G，1M頻寬，50GB儲存空間的雲伺服器，120一年哦。

基於vue-cli3.0構建功能完善的前端架子
2018-10-05
Vue前端
Spark Machine Learning 04 構建基於Spark的推薦引擎 (待完善)
2016-04-29
SparkMac
移動端基於動態路由的架構設計
2017-01-12
路由架構
基於Springboot+Vue搭建功能基本完善
2022-03-01
Spring BootVue
vue移動助手實踐（一）——基於vue的換膚功能
2017-10-09
Vue
websocketd | 基於 docker 構建
2019-07-10
WebDocker
基於機器人自主移動實現SLAM建圖
2023-05-19
機器人SLAM
基於HT的CSG功能構建HTML5的3D書架
2014-12-25
HTML3D
基於 ASK + EB 構建容器事件驅動服務
2022-01-06
事件
“遊戲版號”新規對移動遊戲產業的影響及完善建議
2020-07-31
遊戲產業
基於Kafka和Elasticsearch構建實時站內搜尋功能的實踐
2023-03-27
KafkaElasticsearch
基於 ubuntu base 構建 rootfs
2024-08-04
Ubuntu
輕鬆構建基於 Serverless 架構的小程式
2020-02-25
Server架構
移動端基於LBS實現簽到功能可行性分析
2017-08-18
基於GitLab CI搭建Golang自動構建環境
2019-06-19
GitlabGolang
基於 GitLab CI 搭建前端自動構建環境
2018-07-12
Gitlab前端
Akka-CQRS（0）- 基於akka-cluster的讀寫分離框架，構建gRPC移動應用後端架構
2019-01-22
框架RPC後端架構
為 Memcached 構建基於 Go 的 Operator 示例
2021-09-08
Go
基於Grunt構建一個的專案
2017-02-12
基於ubuntu映象構建redis映象
2024-03-14
UbuntuRedis
讓移動開發更輕鬆閒魚基於Flutter構建跨端APP應用實踐
2018-12-22
移動開發Flutter跨端APP
基於資料驅動的FMEA元件失效模式矩陣構建
2021-08-26
元件模式矩陣
使用新的LunchBadger 14天試用版構建基於無伺服器的功能
2018-08-14
伺服器
帶你瞭解基於Ploto構建自動駕駛平臺
2022-12-06
自動駕駛
移動應用AI化成新戰場？詳解蘋果最新Core ML模型構建基於機器學習的智慧應用
2019-03-02
AI蘋果模型機器學習
基於 Serverless 的部署平臺構建與思考
2020-01-18
Server
如何構建基於 docker 的開發環境
2019-02-21
Docker開發環境
基於maven構建多模組化的SSM框架
2019-03-04
MavenSSM框架
基於nb-iot的物聯網構建
2020-12-21
Spring系列：基於XML的方式構建IOC
2023-11-07
SpringXML
基於 Go 技術棧的微服務構建
2017-11-30
Go微服務
構建基於Spring4的Rest API
2016-07-21
SpringRESTAPI
如何構建基於docker的開發環境
2016-08-10
Docker開發環境
? 升級vue-cli3.0/vue.config.js配置檔案/vue-cli3.0移動端適配
2019-02-22
VueJS
基於Vite+React構建線上Excel
2022-06-23
ViteReactExcel
vue基於Element構建自定義樹
2017-09-19
Vue
基於Grunt構建一個JavaScript庫
2014-07-14
JavaScript
構建一個基於事件分發驅動的EventLoop執行緒模型
2020-07-27
事件OOP執行緒模型

基於vue-cli3.0構建功能完善的移動端架子

已升級vue-cli4,點我檢視