From 6c4a6a6f6a5f42bba29e34dba061ec0fcb5793e2 Mon Sep 17 00:00:00 2001 From: sunnie <406803045@qq.com> Date: Mon, 20 Apr 2020 18:07:56 +0800 Subject: [PATCH] about --- README.md | 180 ++++++++++++++++++++++------ public/index.html | 8 +- src/App.vue | 11 +- src/assets/css/index.scss | 49 -------- src/components/TabBar.vue | 25 ++-- src/config/env.development.js | 3 +- src/config/env.production.js | 3 +- src/config/env.staging.js | 3 +- src/main.js | 2 +- src/views/home/about.vue | 56 +++++---- src/views/home/index.vue | 37 +++--- vue.config.js | 218 +++++++++++++++++----------------- 12 files changed, 336 insertions(+), 259 deletions(-) diff --git a/README.md b/README.md index c9b6048..7adaa92 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 基于 vue-cli3.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架 -[关于项目介绍](https://juejin.im/post/5cfefc73f265da1bba58f9f7) +掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7) [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看 @@ -13,6 +13,19 @@ 本示例 Node.js 12.14.1 +### 启动项目 + +```bash + +git clone https://github.com/sunniejs/vue-h5-template.git + +cd vue-h5-template + +npm install + +npm run serve +``` + 目录 - [√ Vue-cli4](https://cli.vuejs.org/zh/guide/) @@ -30,10 +43,9 @@ - [√ 配置 打包分析](#bundle) - [√ 配置 externals 引入 cdn 资源 ](#externals) - [√ 去掉 console.log ](#console) -- [√ splitChunks ](#console) +- [√ splitChunks 单独打包第三方模块](#chunks) - [√ 添加 IE 兼容 ](#ie) - * Vuex * Axios 封装 * 生产环境 cdn 优化首屏加速 @@ -466,7 +478,7 @@ module.exports = { outputDir: 'dist', // 生产环境构建文件的目录 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 lintOnSave: false, - productionSourceMap: !IS_PROD, // 生产环境的 source map + productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 devServer: { port: 9020, // 端口号 open: false, // 启动后打开浏览器 @@ -524,9 +536,9 @@ export function getUserInfo(params) { ### ✅ 配置 alias 别名 ```javascript -const path = require("path"); -const resolve = dir => path.join(__dirname, dir); -const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); +const path = require('path') +const resolve = dir => path.join(__dirname, dir) +const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) module.exports = { chainWebpack: config => { @@ -538,40 +550,52 @@ module.exports = { .set('views', resolve('src/views')) .set('components', resolve('src/components')) } -}; +} ``` + [▲ 回顶部](#top) ### ✅ 配置 打包分析 ```javascript -const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") - .BundleAnalyzerPlugin; +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { chainWebpack: config => { // 打包分析 if (IS_PROD) { - config.plugin("webpack-report").use(BundleAnalyzerPlugin, [ + config.plugin('webpack-report').use(BundleAnalyzerPlugin, [ { - analyzerMode: "static" + analyzerMode: 'static' } - ]); + ]) } } -}; +} ``` + ```bash npm run build ``` + [▲ 回顶部](#top) ### ✅ 配置 externals 引入 cdn 资源 +这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可 +以实际测试一下。 + +另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名） + +因为页面每次遇到` + \ No newline at end of file diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index dc41a5b..b96d86c 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -1,54 +1,5 @@ @import './variables.scss'; @import './mixin.scss'; -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - .app-container{ padding-bottom:50px } \ No newline at end of file diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue index e7b2e14..8a5a309 100644 --- a/src/components/TabBar.vue +++ b/src/components/TabBar.vue @@ -1,15 +1,22 @@ diff --git a/src/config/env.development.js b/src/config/env.development.js index bcbcdbe..1b49bd9 100644 --- a/src/config/env.development.js +++ b/src/config/env.development.js @@ -4,5 +4,6 @@ module.exports = { baseUrl: 'http://localhost:9018', // 项目地址 baseApi: 'https://test.xxx.com/api', // 本地api请求地址 APPID: 'xxx', - APPSECRET: 'xxx' + APPSECRET: 'xxx', + $cdn:'https://imgs.solui.cn' } diff --git a/src/config/env.production.js b/src/config/env.production.js index 1072fe6..d98ff2c 100644 --- a/src/config/env.production.js +++ b/src/config/env.production.js @@ -4,5 +4,6 @@ module.exports = { baseUrl: 'https://www.xxx.com/', // 正式项目地址 baseApi: 'https://www.xxx.com/api', // 正式api请求地址 APPID: 'xxx', - APPSECRET: 'xxx' + APPSECRET: 'xxx', + $cdn:'https://imgs.solui.cn' } diff --git a/src/config/env.staging.js b/src/config/env.staging.js index 5112b61..866221b 100644 --- a/src/config/env.staging.js +++ b/src/config/env.staging.js @@ -3,5 +3,6 @@ module.exports = { baseUrl: 'https://test.xxx.com', // 测试项目地址 baseApi: 'https://test.xxx.com/api', // 测试api请求地址 APPID: 'xxx', - APPSECRET: 'xxx' + APPSECRET: 'xxx', + $cdn:'https://imgs.solui.cn' } diff --git a/src/main.js b/src/main.js index 7b5e693..20d4762 100644 --- a/src/main.js +++ b/src/main.js @@ -5,7 +5,7 @@ import App from './App.vue' import router from './router' import store from './store' // 引入全局样式 -import '@/assets/css/index.scss' +// import '@/assets/css/index.scss' // 全局引入按需引入UI库 vant import '@/plugins/vant' diff --git a/src/views/home/about.vue b/src/views/home/about.vue index c5f1469..47019b1 100644 --- a/src/views/home/about.vue +++ b/src/views/home/about.vue @@ -6,45 +6,31 @@

A vue h5 template with Vant UI

+
+
项目地址: https://github.com/sunniejs
+
项目作者: sunnie
+
+
+
- - -