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

Loong_T 發布于2019-08-23 17:05 / 949人閱讀

摘要：對應每一個環境可能都會有所差異，比如說服務器地址接口地址地址等等。具體的值取決于應用運行的模式。會和中的選項相符，即你的應用會部署到的基礎路徑。

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

webpack 打包擴展

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

vw、rem布局

跨域設置

eslint設置

cdn引入

路由設計、登錄攔截

axios、api 設計

vuex狀態管理

項目地址: vue-cli3-H5

demo地址: https://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
    })
}





    
    
    
    
    
    
    
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    
    
    <% } %>

    vuedemo



    
    
    
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    
    <% } %>

路由設計、登錄攔截

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里進行處理

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地址: https://zhouyupeng.github.io/vuecli3H5/#/

GPU云服務器云服務器構建基于通訊的云服務器基于lte-fi車載云主機的構建基于lte-fi車載云vps的構建基于lte-fi車載云服務器的構建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103791.html

基于vue-cli3.0的項目工程重新構建空白版，拿來即用

摘要：寫在前面使用框架開發時，很多人會選擇官方提供的腳手架，最新的已經更新到完全無配置，只需下載就能方便的使用構建的項目工程，但基礎的并不能滿足正常的項目開發，在開發中我們需要根據自己的習慣和業務功能而添加些基礎功能。寫在前面使用vue框架開發時，很多人會選擇vue官方提供的cli腳手架，最新的cli已經更新到3.0完全無配置，只需下載就能方便的使用vuecli構建的項目工程，但基礎的c...

xingpingz 2019-08-26 10:33 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
基于vue + element ui的table編輯,保存和刪除

摘要：在最近年的工作中遇到過幾次很基礎的基于的開發簡單的增刪改查功能閑下來想整理一下以備后用架子用最新的此處可以參考我之前的最好的系列環境搭建篇項目基礎構建好以后這個小我們暫且將數據存在之后我將更新基于前端操作數據庫的操作點擊新增按鈕點擊保存在最近2年的工作中遇到過幾次很基礎的基于element-ui的table開發,簡單的增刪改查功能,閑下來想整理一下~ 以備后用 vue架子,用最新的...

frontoldman 2019-08-22 18:08 評論0 收藏0

發表評論

登陸后可評論

0條評論

Loong_T

男|高級講師

我要關注我要私信

TA的文章

ESP8266使用Arduino ide通過MQTT協議接入阿里云平臺（上傳溫濕度，甲醛濃度，土壤濕

閱讀 1923·2021-11-19 09:40
ESP8266-NodeMCU項目（四）：將上一項目的空調控制接入小愛同學（Blinker_APP同

閱讀 2132·2021-10-09 09:43
軟件測試工程師需要具備哪些能力？

閱讀 3293·2021-09-06 15:00
if 與 switch語句

閱讀 2809·2019-08-29 13:04
再看正則表達式

閱讀 2766·2019-08-26 11:53
在自己的項目里調用百度接口，實現百度搜索

閱讀 3512·2019-08-26 11:46
使用 Typescript 檢查你的代碼規范

閱讀 2319·2019-08-26 11:38
JavaScript_Html5_LocalStorage項目demo

閱讀 390·2019-08-26 11:27

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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

相關文章

**基于vue-cli3.0的項目工程重新構建空白版，拿來即用**

關于Vue2一些值得推薦的文章 -- 五、六月份

關于Vue2一些值得推薦的文章 -- 五、六月份

基于vue + element ui的table編輯,保存和刪除

發表評論

0條評論

Loong_T

男|高級講師

TA的文章

ESP8266使用Arduino ide通過MQTT協議接入阿里云平臺（上傳溫濕度，甲醛濃度，土壤濕

ESP8266-NodeMCU項目（四）：將上一項目的空調控制接入小愛同學（Blinker_APP同

軟件測試工程師需要具備哪些能力？

if 與 switch語句

再看正則表達式

在自己的項目里調用百度接口，實現百度搜索

使用 Typescript 檢查你的代碼規范

JavaScript_Html5_LocalStorage項目demo

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！