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

 

1. webpack 打包擴展
2. css：sass支持、normalize.css、_mixin.scss、_variables.scss
3. vw、rem布局
4. 跨域設置
5. eslint設置
6. cdn引入
7. 路由設計、登錄攔截
8. axios、api 設計
9. 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: true, // 開啟 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({ name: 'login', query: { redirect: to.path } }) } } 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() console.log('response', response); 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) } ) /** * 封裝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) }) }) } /** * 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) }) }) } 復制代碼

為了方便管理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_開頭，兩個特殊的變量：

1. NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決於應用運行的模式。
2. 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/#…

作者：web_zhou
鏈接：https://juejin.im/post/5cbf32bc6fb9a03236393379
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。