ce8557ef by sunnie

readme

1 parent 18372b1e
1 # vue-h5-template 1 # vue-h5-template
2 2
3 基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 3 基于 vue-cli3.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装,构建手机端模板脚手架
4 4
5 [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
6
7 #### 介绍
8 [关于项目介绍](https://juejin.im/post/5cfefc73f265da1bba58f9f7) 5 [关于项目介绍](https://juejin.im/post/5cfefc73f265da1bba58f9f7)
9 6
10 - Vue-cli4 7 [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
11 - VantUI组件按需加载 8
12 - Sass 9 - Vue-cli4
13 - Webpack 4 10 - VantUI 组件按需加载
11 - Sass
12 - Webpack 4
14 - Vuex 13 - Vuex
15 - Axios封装 14 - Axios 封装
16 - rem适配方案 15 - rem 适配方案
17 - 多环境配置 16 - 生产环境 cdn 优化首屏加速
18 - 生产环境cdn优化首屏加速 17 - babel 低版本浏览器兼容
19 - babel低版本浏览器兼容 18 - Eslint+Pettier 统一开发规范
20 - Eslint+Pettier统一开发规范 19
21 20 <span id="top">目录</span>
22 #### 多环境 21
22 - [√ 配置多环境变量](#env)
23 - [√ rem 适配方案](#rem)
24 - [√ 配置基础 vue.config.js](#base)
25 - [√ 配置 proxy 跨域](#proxy)
26 - [√ 修复 HMR(热更新)失效](#hmr)
27 - [√ 修复 Lazy loading routes Error: Cyclic dependency](#lazyloading)
28 - [√ 添加别名 alias](#alias)
29 - [√ 压缩图片](#compressimage)
30 - [√ 自动生成雪碧图](#spritesmith)
31 - [√ SVG 转 font 字体](#font)
32 - [√ 使用 SVG 组件](#svg)
33 - [√ 去除多余无效的 css](#removecss)
34 - [√ 添加打包分析](#analyze)
35 - [√ 配置 externals 引入 cdn 资源](#externals)
36 - [√ 多页面打包 multi-page](#multiple-pages)
37 - [√ 删除 moment 语言包](#moment)
38 - [√ 去掉 console.log](#log)
39 - [√ 利用 splitChunks 单独打包第三方模块](#splitchunks)
40 - [√ 开启 gzip 压缩](#gzip)
41 - [√ 开启 stylelint 检测 scss, css 语法](#stylelint)
42 - [√ 为 sass 提供全局样式,以及全局变量](#globalscss)
43 - [√ 为 stylus 提供全局变量](#globalstylus)
44 - [√ 预渲染 prerender-spa-plugin](#prerender)
45 - [√ 添加 IE 兼容](#ie)
46 - [√ 静态资源自动打包上传阿里 oss、华为 obs](#alioss)
47 - [√ 完整依赖](#allconfig)
48
49 ### <span id="env">✅ 配置多环境变量 </span>
50
51 &emsp;&emsp;NODE_ENV 和 BASE_URL 是两个特殊变量,在代码中始终可用
52
53 `package.json` 里的 `scripts` 配置 `serve` `stage` `build`,通过 `--mode xxx` 来执行不同环境
54
55 - 通过 `npm run serve` 启动本地 , 执行 `development`
56 - 通过 `npm run stage` 打包测试 , 执行 `staging`
57 - 通过 `npm run build` 打包正式 , 执行 `production`
58
59 ```javascript
60 "scripts": {
61 "serve": "vue-cli-service serve --open",
62 "stage": "vue-cli-service build --mode staging",
63 "build": "vue-cli-service build",
64 }
65 ```
66
67 ##### 配置介绍
68
69 &emsp;&emsp;`VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。
70 &emsp;&emsp;比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问
71
72 在项目根目录中新建.env
73
74 - .env.development 本地开发环境配置
23 75
76 ```bash
77 NODE_ENV='development'
78 # must start with VUE_APP_
79 VUE_APP_ENV = 'development'
24 80
25 之前写过一个多环境的方案,是基于vue-cli2.0的 [vue多环境配置方案-传送门](https://segmentfault.com/a/1190000019136606) 81 ```
26 最近新的项目采用了vuecli3.0开始了一番折腾 82
83 - .env.staging 测试环境配置
84
85 ```bash
86 NODE_ENV='production'
87 # must start with VUE_APP_
88 VUE_APP_ENV = 'staging'
89 ```
90
91 - .env.production 正式环境配置
92
93 ```bash
94 NODE_ENV='production'
95 # must start with VUE_APP_
96 VUE_APP_ENV = 'production'
97 ```
98
99 这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV `development` `staging` `production`
100 变量我们统一在 src/config/env.\*.js 里进行管理。修改起来方便,不需要重启项目,符合开发习惯。
101
102 config/index.js
103
104 ```javascript
105 // 根据环境引入不同配置 process.env.NODE_ENV
106 const config = require('./env.' + process.env.VUE_APP_ENV)
107 module.exports = config
108 ```
109
110 配置对应环境的变量,拿本地环境文件 `env.development.js` 举例,用户可以根据需求修改
111
112 ```javascript
113 // 本地环境配置
114 module.exports = {
115 title: 'vue-h5-template',
116 baseUrl: 'http://localhost:9018', // 项目地址
117 baseApi: 'https://test.xxx.com/api', // 本地api请求地址
118 APPID: 'xxx',
119 APPSECRET: 'xxx'
120 }
121 ```
122
123 根据环境不同,变量就会不同了
124
125 ```javascript
126 // 根据环境不同引入不同baseApi地址
127 import {baseApi} from '@/config'
128 console.log(baseApi)
129 ```
27 130
28 这里参考了[vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) 基本思路不变 131 [▲ 回顶部](#top)
29 在src的文件里新建config 根据不同的环境去引用不同的配置文件,不同的是在根目录下有三个设置环境变量的文件
30 这里可以参考vue-admin-template
31 132
32 #### rem适配方案 133 ### <span id="rem">✅ rem 适配方案 </span>
33 134
34 还是那句话,用vw还是用rem,这是个问题? 135 不用担心,项目已经配置好了 `rem` 适配, 下面仅做介绍:
35 136
36 选用rem的原因是因为vant直接给到了这个适配方案,个人也比较喜欢这个方案 137 Vant 中的样式默认使用`px`作为单位,如果需要使用`rem`单位,推荐使用以下两个工具:
37 138
38 [vant](https://youzan.github.io/vant/#/zh-CN/quickstart) 139 - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 `postcss` 插件,用于将单位转化为 `rem`
39 140 - [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 `rem` 基准值
40 #### 总结 141
142 ##### PostCSS 配置
143
144 下面提供了一份基本的 `postcss` 配置,可以在此配置的基础上根据项目需求进行修改
145
146 ```javascript
147 // https://github.com/michael-ciniawsky/postcss-load-config
148 module.exports = {
149 plugins: {
150 autoprefixer: {
151 overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
152 },
153 'postcss-pxtorem': {
154 rootValue: 37.5,
155 propList: ['*']
156 }
157 }
158 }
159 ```
160
161 更多详细信息: [vant](https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa)
162
163 **新手必看,老鸟跳过**
164
165 很多小伙伴会问我,适配的问题。
166
167 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺面屏幕,其他机型适配。
168
169 -`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
170 -`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
171
172 本案例采用 Vant 是基于 375 设计稿 , rootValue: 37.5。其他的你就可以根据你设计图,去做对应的设置了。
173
174 当然,想要撑满屏幕你可以使用100%,这里只是举例说明。
175
176 ```html
177 <img class="image" src="https://imgs.solui.cn/weapp/logo.png" />
178
179 <style>
180 /* rootValue: 75 */
181 .image {
182 width: 750px;
183 height: 1334px;
184 }
185 /* rootValue: 37.5 */
186 .image {
187 width: 375px;
188 height: 667px;
189 }
190 </style>
191 ```
192
193 [▲ 回顶部](#top)
194
195 #### 总结
41 196
42 因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长 197 因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长
43 198
...@@ -46,6 +201,7 @@ ...@@ -46,6 +201,7 @@
46 获取更多技术相关文章,关注公众号”前端女塾“。 201 获取更多技术相关文章,关注公众号”前端女塾“。
47 202
48 回复加群,即可加入”前端仙女群“ 203 回复加群,即可加入”前端仙女群“
204
49 <p> 205 <p>
50 <img src="./static/gognzhonghao.jpg" width="256" style="display:inline;"> 206 <img src="./static/gognzhonghao.jpg" width="256" style="display:inline;">
51 </p> 207 </p>
......
This diff could not be displayed because it is too large.
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
2 "name": "vue-h5-template", 2 "name": "vue-h5-template",
3 "version": "2.0.0", 3 "version": "2.0.0",
4 "description": "A vue h5 template with Vant UI", 4 "description": "A vue h5 template with Vant UI",
5 "author": "Sunnie <s406803045@163.com>", 5 "author": "Sunnie <sunniejs@163.com>",
6 "private": true, 6 "private": true,
7 "scripts": { 7 "scripts": {
8 "serve": "vue-cli-service serve --open", 8 "serve": "vue-cli-service serve --open",
9 "build:prod": "vue-cli-service build", 9 "build": "vue-cli-service build",
10 "build:stage": "vue-cli-service build --mode staging", 10 "stage": "vue-cli-service build --mode staging",
11 "lint": "vue-cli-service lint" 11 "lint": "vue-cli-service lint"
12 }, 12 },
13 "dependencies": { 13 "dependencies": {
......
1 // 本地 1 // 本地环境配置
2 module.exports = { 2 module.exports = {
3 title: 'vue-h5-template', 3 title: 'vue-h5-template',
4 baseUrl: 'https://test.xxx.com', // 项目地址 4 baseUrl: 'http://localhost:9018', // 项目地址
5 baseApi: 'https://test.xxx.com', // 本地api请求地址 5 baseApi: 'https://test.xxx.com/api', // 本地api请求地址
6 api: { 6 APPID: 'xxx',
7 base_api: 'https://xxx.xxx.com/admin', 7 APPSECRET: 'xxx'
8 common_api: 'https://xxx.xxx.com/common'
9 }
10 } 8 }
......
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
2 module.exports = { 2 module.exports = {
3 title: 'vue-h5-template', 3 title: 'vue-h5-template',
4 baseUrl: 'https://www.xxx.com/', // 正式项目地址 4 baseUrl: 'https://www.xxx.com/', // 正式项目地址
5 baseApi: 'https://test.xxx.com', // 正式api请求地址 5 baseApi: 'https://www.xxx.com/api', // 正式api请求地址
6 api: { 6 APPID: 'xxx',
7 base_api: 'https://xxx.xxx.com/admin', 7 APPSECRET: 'xxx'
8 common_api: 'https://xxx.xxx.com/common'
9 }
10 } 8 }
......
1 module.exports = { 1 module.exports = {
2 title: 'vue-h5-template', 2 title: 'vue-h5-template',
3 baseUrl: 'https://test.xxx.com', // 测试项目地址 3 baseUrl: 'https://test.xxx.com', // 测试项目地址
4 baseApi: 'https://test.xxx.com', // 测试api请求地址 4 baseApi: 'https://test.xxx.com/api', // 测试api请求地址
5 api: { 5 APPID: 'xxx',
6 base_api: 'https://xxx.xxx.com/admin', 6 APPSECRET: 'xxx'
7 common_api: 'https://xxx.xxx.com/common'
8 }
9 } 7 }
......
...@@ -46,7 +46,18 @@ module.exports = { ...@@ -46,7 +46,18 @@ module.exports = {
46 overlay: { 46 overlay: {
47 warnings: false, 47 warnings: false,
48 errors: true 48 errors: true
49 } 49 },
50 // proxy: {
51 // //配置跨域
52 // '/api': {
53 // target: "https://test.xxx.com",
54 // ws:true,
55 // changOrigin:true,
56 // pathRewrite:{
57 // '^/api':'/'
58 // }
59 // }
60 // }
50 }, 61 },
51 62
52 configureWebpack: config => { 63 configureWebpack: config => {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!