技術選型和專案優化
import 'amfe-flexible'
import '../../common/css/base.less';
import Vue from 'vue'
import App from './App.vue'
import fastclick from 'fastclick'
import VueLazyload from 'vue-lazyload'
import CreateAPI from 'vue-create-api'
import Toast from 'components/Toast.vue'
import { setupWebViewJavascriptBridge } from 'common/js/util'
// 第三方元件庫cube
const { Dialog } = window.cube;
Vue.use(Dialog);
Vue.use(CreateAPI);
// yjk自定義全域性元件 - toast
Vue.createAPI(Toast, true);
fastclick.attach(document.body)
Vue.config.productionTip = false
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: require('common/img/default.png')
})
setupWebViewJavascriptBridge((bridge) => { })
new Vue({
render: h => h(App)
}).$mount('#app');
複製程式碼專案使用到的第三方庫 依賴有：
-
flexible：flexible.js 移動端自適應方案； 移動端佈局
-
fastclick： 在檢測到touchend事件的時候，會通過DOM自定義事件立即出發模擬一個click事件，並把瀏覽器在300ms之後真正的click事件阻止掉；
-
vue-lazyload： VUE圖片懶載入-vue lazyload外掛使用 vue懶載入
-
vue-create-api： vue-create-api 一個能夠讓 Vue 元件通過 API 方式呼叫的外掛。 做自己的元件庫用
import CreateAPI from 'vue-create-api' import Toast from 'components/Toast.vue' Vue.use(CreateAPI); // 自定義全域性元件 - toast Vue.createAPI(Toast, true); 在js內部和 vue檔案內部都可以被呼叫； 複製程式碼
關於引用外部第三方庫的解決方案：
考慮到每個外掛都不是很大，大概10K左右， 如果通過外部連結的方式去載入， 比較浪費頻寬。
解決方案 把這個js通過webpack打包成一個公共的js檔案；chunk-vendors.js 檔案的形式
複製程式碼關於第三方元件庫的優化方案：
現在使用的是cube-ui的元件庫；在使用元件庫的時候，可以選擇後編譯和按需載入元件；
複製程式碼在.babelrc檔案下
// 通過後編譯的方式引入 元件庫，且是輕量的
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": [
"transform-runtime",
[
"transform-modules", {
"cube-ui": {
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
}
}
]
]
}
複製程式碼但是在實際的開發過程中發現， 使用元件庫的場景並沒有那麼多， 而使用最多的是他的toast元件， 因此這個庫也可以做優化；
通過js載入並掛載在window物件下， 按需載入， 需要時候才引用；簡單的功能儘量用自家的元件去完成；
// 第三方元件庫cube
const { Dialog } = window.cube;
Vue.use(Dialog);
複製程式碼關於vue.config.js的配置
const path = require('path');
// 引入多頁配置js檔案；
返回pages： {
multipage:
{ entry:
'C:\\Ben\\src\\pages\\multipage/index.js',
template:
'C:\\Ben\\src\\pages\\multipage/index.html',
filename: 'multipage/index.html' },
singlepage:
{ entry:
'C:\\Ben\\src\\pages\\singlepage/index.js',
template:
'C:\\Ben\\src\\pages\\singlepage/index.html',
filename: 'singlepage/index.html' } }
const pages = require('./config/multipage').getPages();
// 環境變數
const env = process.env.NODE_ENV;
module.exports = {
// 在開發環境使用 / 目錄，因為在記憶體裡的dist根目錄下，線上環境取'./',因為部署時會取整個dist目錄下的檔案
baseUrl: env === 'development' ? '/' : './',
lintOnSave: false,
productionSourceMap: false,
// 在多核機器下會預設開啟。
parallel: require('os').cpus().length > 1,
pages,
// css相關配置
css: {
// 預設值是(開發環境保證正常css熱更新，不分離，線上環境可抽離)
// 是否使用css分離外掛 ExtractTextPlugin
// extract: env === 'development' ? false : true,
sourceMap: false, // 開啟 CSS source maps?
loaderOptions: {
less: {
javascriptEnabled: true
}
}, // css預設器配置項
modules: false // 啟用 CSS modules for all css / pre-processor files.
},
// 一些配置，保證輸出結果按照 配置後的輸出
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.module.rule('images').use('url-loader').loader('url-loader').tap(options => {
options.name = 'static/img/[name].[hash:8].[ext]';
return options;
});
config.plugin('extract-css').tap(() => [
{
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].css'
}
]);
}
},
// 一些配置，保證輸出結果按照 配置後的輸出
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.output.path = path.join(__dirname, './dist')
config.output.filename = 'static/js/[name].[contenthash:8].js'
// config.output.publicPath = './'
config.output.chunkFilename = 'static/js/[name].[contenthash:8].js'
}
// 開發生產共同配置
Object.assign(config, {
// webpack編譯打包時不處理它，卻可以引用到它，這兩個通過外部連結去引用，以減少公共包的體積
[https://segmentfault.com/a/1190000012113011]
(https://blog.csdn.net/zlingyun/article/details/81382323)
externals: [
{'vue': 'window.Vue'},
{'vue-router': 'window.VueRouter'}
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'assets': path.resolve(__dirname, './src/assets'),
'common': path.resolve(__dirname, './src/common'),
'components': path.resolve(__dirname, './src/components'),
'pages': path.resolve(__dirname, './src/pages'),
'vue$': 'vue/dist/vue.esm.js'
}
}
});
}
};
複製程式碼關於package.json的配置
{
"name": "vue-multipage",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve --open",
"lint": "vue-cli-service lint",
"vue inspect > output.js": "審查專案的 webpack 配置",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.17.1",
"fastclick": "^1.0.6",
"md5": "^2.2.1",
"vue-create-api": "^0.2.0",
"vue-lazyload": "^1.2.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "3.0.0",
"@vue/cli-plugin-eslint": "3.0.0",
"@vue/cli-service": "3.0.0",
"ali-oss": "^6.0.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-px2rem": "^0.3.0",
"vue-template-compiler": "^2.5.17"
},
"babel": {
"presets": [
"@vue/app"
]
},
// eslint配置
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
// css處理
"postcss": {
"plugins": {
"autoprefixer": {}, // 就是自動補全css字首 https://www.jianshu.com/p/aa3e52be303e
"postcss-px2rem": { // https://www.jianshu.com/p/21d43d6ed713
"remUnit": 75 // 因為我是根據ip6做的佈局方案， 所以這裡使用的是750/10 = 75
}
}
},
"browserslist": [ // browserslist 目標瀏覽器配置表 https://www.jianshu.com/p/bd9cb7861b85
"> 1%",
"last 4 versions",
"not ie <= 8",
"ios >= 7",
"android >= 4.0"
]
}
複製程式碼