溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關怎么基于vue-cli3.0構建功能完善的移動端架子的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
基于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: 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_開頭，兩個特殊的變量：
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.0構建功能完善的移動端架子”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
