readme
Showing
8 changed files
with
187 additions
and
95 deletions
... | @@ -6,6 +6,10 @@ | ... | @@ -6,6 +6,10 @@ |
6 | 6 | ||
7 | [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看 | 7 | [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看 |
8 | 8 | ||
9 | <p> | ||
10 | <img src="./static/demo.png" width="256" style="display:inline;"> | ||
11 | </p> | ||
12 | |||
9 | ### Node 版本要求 | 13 | ### Node 版本要求 |
10 | 14 | ||
11 | `Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或 | 15 | `Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或 |
... | @@ -25,19 +29,17 @@ npm install | ... | @@ -25,19 +29,17 @@ npm install |
25 | 29 | ||
26 | npm run serve | 30 | npm run serve |
27 | ``` | 31 | ``` |
28 | |||
29 | <span id="top">目录</span> | 32 | <span id="top">目录</span> |
30 | 33 | ||
31 | - [√ Vue-cli4](https://cli.vuejs.org/zh/guide/) | 34 | - [√ Vue-cli4](https://cli.vuejs.org/zh/guide/){:target="_blank"} |
32 | - [√ 配置多环境变量](#env) | 35 | - [√ 配置多环境变量](#env) |
33 | - [√ rem 适配方案](#rem) | 36 | - [√ rem 适配方案](#rem) |
34 | - [√ VantUI 组件按需加载](#vant) | 37 | - [√ VantUI 组件按需加载](#vant) |
35 | - [√ Sass](#sass) | 38 | - [√ Sass 全局样式](#sass) |
36 | - [√ Webpack 4](#webpack) | 39 | - [√ Vuex 状态管理](#vuex) |
37 | - [√ Vuex](#vuex) | ||
38 | - [√ Axios 封装及接口管理](#axios) | 40 | - [√ Axios 封装及接口管理](#axios) |
39 | - [√ Vue-router](#router) | 41 | - [√ Vue-router](#router) |
40 | - [√ vue.config.js 基础配置](#base) | 42 | - [√ Webpack 4 vue.config.js 基础配置](#base) |
41 | - [√ 配置 proxy 跨域](#proxy) | 43 | - [√ 配置 proxy 跨域](#proxy) |
42 | - [√ 配置 alias 别名](#alias) | 44 | - [√ 配置 alias 别名](#alias) |
43 | - [√ 配置 打包分析](#bundle) | 45 | - [√ 配置 打包分析](#bundle) |
... | @@ -45,12 +47,7 @@ npm run serve | ... | @@ -45,12 +47,7 @@ npm run serve |
45 | - [√ 去掉 console.log ](#console) | 47 | - [√ 去掉 console.log ](#console) |
46 | - [√ splitChunks 单独打包第三方模块](#chunks) | 48 | - [√ splitChunks 单独打包第三方模块](#chunks) |
47 | - [√ 添加 IE 兼容 ](#ie) | 49 | - [√ 添加 IE 兼容 ](#ie) |
48 | 50 | - [√ Eslint+Pettier 统一开发规范 ](#pettier) | |
49 | * Vuex | ||
50 | * Axios 封装 | ||
51 | * 生产环境 cdn 优化首屏加速 | ||
52 | * babel 低版本浏览器兼容 | ||
53 | * Eslint+Pettier 统一开发规范 | ||
54 | 51 | ||
55 | ### <span id="env">✅ 配置多环境变量 </span> | 52 | ### <span id="env">✅ 配置多环境变量 </span> |
56 | 53 | ||
... | @@ -259,55 +256,138 @@ Vue.use(Tabbar).use(TabbarItem) | ... | @@ -259,55 +256,138 @@ Vue.use(Tabbar).use(TabbarItem) |
259 | 256 | ||
260 | [▲ 回顶部](#top) | 257 | [▲ 回顶部](#top) |
261 | 258 | ||
262 | ### <span id="sass">✅ Sass </span> | 259 | ### <span id="sass">✅ Sass 全局样式</span> |
263 | 260 | ||
264 | 首先 你可能会遇到 `node-sass` 安装不成功,别放弃多试几次!!! | 261 | 首先 你可能会遇到 `node-sass` 安装不成功,别放弃多试几次!!! |
265 | 262 | ||
266 | 在 `src/assets/css/`文件夹下包含了三个文件 | 263 | 目录结构,在 `src/assets/css/`文件夹下包含了三个文件 |
267 | 264 | ||
268 | - `index.scss` 主入口,主要引入其他两个 scss 文件,和公共样式 | 265 | ```bash |
269 | - `variables.scss` 定义变量 | 266 | ├── assets |
270 | - `mixin.scss` 定义 `mixin` 方法 | 267 | │ ├── css |
268 | │ │ ├── index.scss # 全局通用样式 | ||
269 | │ │ ├── mixin.scss # 全局mixin | ||
270 | │ │ └── variables.scss # 全局变量 | ||
271 | ``` | ||
271 | 272 | ||
272 | 你可以直接在 vue 文件下写 sass 语法 | 273 | 每个页面自己对应的样式都写在自己的 .vue 文件之中 |
273 | 274 | ||
274 | ```html | 275 | ```html |
276 | <style lang="scss"> | ||
277 | /* global styles */ | ||
278 | </style> | ||
279 | |||
275 | <style lang="scss" scoped> | 280 | <style lang="scss" scoped> |
276 | .demo { | 281 | /* local styles */ |
277 | .title { | 282 | </style> |
278 | font-size: 12px; | 283 | ``` |
284 | |||
285 | `vue.config.js` 配置注入 `sass` 的 `mixin` `variables` 到全局,不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址 | ||
286 | |||
287 | ```javascript | ||
288 | const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) | ||
289 | |||
290 | module.exports = { | ||
291 | css: { | ||
292 | extract: IS_PROD, | ||
293 | sourceMap: false, | ||
294 | loaderOptions: { | ||
295 | scss: { | ||
296 | // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn | ||
297 | // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders | ||
298 | prependData: ` | ||
299 | @import "assets/css/mixin.scss"; | ||
300 | @import "assets/css/variables.scss"; | ||
301 | $cdn: "${defaultSettings.$cdn}"; | ||
302 | ` | ||
303 | } | ||
279 | } | 304 | } |
280 | } | 305 | } |
306 | } | ||
307 | ``` | ||
308 | |||
309 | 在 `main.js` 中引用全局样式(发现在上面的,prependData 里设置`@import "assets/css/index.scss";`并没有应用全局样式这里在 | ||
310 | main.js 引入) | ||
311 | |||
312 | 设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问 | ||
313 | |||
314 | ```javascript | ||
315 | // 引入全局样式 | ||
316 | import '@/assets/css/index.scss' | ||
317 | |||
318 | // 设置 js中可以访问 $cdn | ||
319 | // 引入cdn | ||
320 | import {$cdn} from '@/config' | ||
321 | Vue.prototype.$cdn = $cdn | ||
322 | ``` | ||
323 | |||
324 | 在 css 中引用 | ||
325 | |||
326 | ```html | ||
327 | <script> | ||
328 | console.log(this.$cdn) | ||
329 | </script> | ||
330 | <style lang="scss" scoped> | ||
331 | .logo { | ||
332 | width: 120px; | ||
333 | height: 120px; | ||
334 | background: url($cdn+'/weapp/logo.png') center / contain no-repeat; | ||
335 | } | ||
281 | </style> | 336 | </style> |
282 | ``` | 337 | ``` |
283 | 338 | ||
284 | [▲ 回顶部](#top) | 339 | [▲ 回顶部](#top) |
285 | 340 | ||
286 | ### <span id="sass">✅ Sass </span> | 341 | ### <span id="vuex">✅ Vuex 状态管理</span> |
287 | 342 | ||
288 | 首先 你可能会遇到 `node-sass` 安装不成功,别放弃多试几次!!! | 343 | 目录结构 |
344 | |||
345 | ```bash | ||
346 | ├── store | ||
347 | │ ├── modules | ||
348 | │ │ └── app.js | ||
349 | │ ├── index.js | ||
350 | │ ├── getters.js | ||
351 | ``` | ||
289 | 352 | ||
290 | 在 `src/assets/css/`文件夹下包含了三个文件 | 353 | `main.js` 引入 |
291 | 354 | ||
292 | - `index.scss` 主入口,主要引入其他两个 scss 文件,和公共样式 | 355 | ```javascript |
293 | - `variables.scss` 定义变量 | 356 | import Vue from 'vue' |
294 | - `mixin.scss` 定义 `mixin` 方法 | 357 | import App from './App.vue' |
358 | import store from './store' | ||
359 | new Vue({ | ||
360 | el: '#app', | ||
361 | router, | ||
362 | store, | ||
363 | render: h => h(App) | ||
364 | }) | ||
365 | ``` | ||
295 | 366 | ||
296 | 你可以直接在 vue 文件下写 sass 语法 | 367 | 使用 |
297 | 368 | ||
298 | ```html | 369 | ```html |
299 | <style lang="scss" scoped> | 370 | <script> |
300 | .demo { | 371 | import { mapGetters } from 'vuex' |
301 | .title { | 372 | export default { |
302 | font-size: 12px; | 373 | computed: { |
374 | ...mapGetters([ | ||
375 | 'userName' | ||
376 | ]) | ||
377 | }, | ||
378 | |||
379 | methods: { | ||
380 | // Action 通过 store.dispatch 方法触发 | ||
381 | doDispatch() { | ||
382 | this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~') | ||
303 | } | 383 | } |
304 | } | 384 | } |
305 | </style> | 385 | } |
386 | </script> | ||
306 | ``` | 387 | ``` |
307 | |||
308 | [▲ 回顶部](#top) | 388 | [▲ 回顶部](#top) |
309 | 389 | ||
310 | ### <span id="base">✅ Vue-router </span> | 390 | ### <span id="router">✅ Vue-router </span> |
311 | 391 | ||
312 | 本案例采用 `hash` 模式,开发者根据需求修改 `mode` `base` | 392 | 本案例采用 `hash` 模式,开发者根据需求修改 `mode` `base` |
313 | 393 | ||
... | @@ -430,13 +510,13 @@ import qs from 'qs' | ... | @@ -430,13 +510,13 @@ import qs from 'qs' |
430 | import request from '@/utils/request' | 510 | import request from '@/utils/request' |
431 | //user api | 511 | //user api |
432 | 512 | ||
433 | // 登录 | 513 | // 用户信息 |
434 | export function login(params) { | 514 | export function getUserInfo(params) { |
435 | return request({ | 515 | return request({ |
436 | url: '/user/login', // 接口地址 | 516 | url: '/user/userinfo', |
437 | method: 'post', // method | 517 | method: 'get', |
438 | data: qs.stringify(params) | 518 | data: qs.stringify(params), |
439 | // hideloading: true | 519 | hideloading: true // 隐藏 loading 组件 |
440 | }) | 520 | }) |
441 | } | 521 | } |
442 | ``` | 522 | ``` |
... | @@ -448,14 +528,14 @@ export function login(params) { | ... | @@ -448,14 +528,14 @@ export function login(params) { |
448 | import {getUserInfo} from '@/api/user.js' | 528 | import {getUserInfo} from '@/api/user.js' |
449 | 529 | ||
450 | const params = {user: 'sunnie'} | 530 | const params = {user: 'sunnie'} |
451 | getUserInfo() | 531 | getUserInfo(params) |
452 | .then(() => {}) | 532 | .then(() => {}) |
453 | .catch(() => {}) | 533 | .catch(() => {}) |
454 | ``` | 534 | ``` |
455 | 535 | ||
456 | [▲ 回顶部](#top) | 536 | [▲ 回顶部](#top) |
457 | 537 | ||
458 | ### <span id="base">✅ vue.config.js 基础配置 </span> | 538 | ### <span id="base">✅ Webpack 4 vue.config.js 基础配置 </span> |
459 | 539 | ||
460 | 如果你的 `Vue Router` 模式是 hash | 540 | 如果你的 `Vue Router` 模式是 hash |
461 | 541 | ||
... | @@ -580,7 +660,7 @@ npm run build | ... | @@ -580,7 +660,7 @@ npm run build |
580 | 660 | ||
581 | [▲ 回顶部](#top) | 661 | [▲ 回顶部](#top) |
582 | 662 | ||
583 | ### <span id="proxy">✅ 配置 externals 引入 cdn 资源 </span> | 663 | ### <span id="externals">✅ 配置 externals 引入 cdn 资源 </span> |
584 | 664 | ||
585 | 这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可 | 665 | 这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可 |
586 | 以实际测试一下。 | 666 | 以实际测试一下。 | ... | ... |
... | @@ -9,7 +9,6 @@ export function login(params) { | ... | @@ -9,7 +9,6 @@ export function login(params) { |
9 | url: '/user/login', | 9 | url: '/user/login', |
10 | method: 'post', | 10 | method: 'post', |
11 | data: qs.stringify(params) | 11 | data: qs.stringify(params) |
12 | // hideloading: true | ||
13 | }) | 12 | }) |
14 | } | 13 | } |
15 | // 用户信息 | 14 | // 用户信息 | ... | ... |
... | @@ -25,9 +25,7 @@ export default { | ... | @@ -25,9 +25,7 @@ export default { |
25 | } | 25 | } |
26 | }, | 26 | }, |
27 | methods: { | 27 | methods: { |
28 | // onChange(index) { | 28 | |
29 | // if (index === 1) window.location.href = 'https://github.com/sunniejs/vue-h5-template' | ||
30 | // } | ||
31 | } | 29 | } |
32 | } | 30 | } |
33 | </script> | 31 | </script> | ... | ... |
... | @@ -4,8 +4,12 @@ import Vue from 'vue' | ... | @@ -4,8 +4,12 @@ import Vue from 'vue' |
4 | import App from './App.vue' | 4 | import App from './App.vue' |
5 | import router from './router' | 5 | import router from './router' |
6 | import store from './store' | 6 | import store from './store' |
7 | |||
7 | // 引入全局样式 | 8 | // 引入全局样式 |
8 | import '@/assets/css/index.scss' | 9 | import '@/assets/css/index.scss' |
10 | // 设置 js中可以访问 $cdn | ||
11 | import {$cdn} from '@/config' | ||
12 | Vue.prototype.$cdn = $cdn | ||
9 | 13 | ||
10 | // 全局引入按需引入UI库 vant | 14 | // 全局引入按需引入UI库 vant |
11 | import '@/plugins/vant' | 15 | import '@/plugins/vant' | ... | ... |
... | @@ -2,17 +2,19 @@ | ... | @@ -2,17 +2,19 @@ |
2 | <template> | 2 | <template> |
3 | <div class="app-container"> | 3 | <div class="app-container"> |
4 | <div class="warpper"> | 4 | <div class="warpper"> |
5 | <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1> | ||
6 | <h2 class="demo-home__desc"> | ||
7 | A vue h5 template with Vant UI | ||
8 | </h2> | ||
9 | <div class="list"> | 5 | <div class="list"> |
10 | <div class="author"></div> | 6 | <div class="logo"></div> |
7 | <div class="demo-home__title"> VUE H5开发模板</div> | ||
11 | <div class="item">项目地址: <a href="https://github.com/sunniejs">https://github.com/sunniejs</a></div> | 8 | <div class="item">项目地址: <a href="https://github.com/sunniejs">https://github.com/sunniejs</a></div> |
12 | <div class="item">项目作者: sunnie</div> | 9 | <div class="item">项目作者: sunnie</div> |
10 | |||
13 | <div class="item"></div> | 11 | <div class="item"></div> |
14 | <div class="wechat"></div> | 12 | <div class="wechat"> |
15 | <div>关注公众号:回复“加群”即可加 前端仙女群</div> | 13 | <img :src="this.wechat" alt=""> |
14 | </div> | ||
15 | <div class="item">关注公众号:回复“加群”即可加 前端仙女群</div> | ||
16 | <div class="item">{{userName}} <van-button v-if="userName==''" type="warning" size="small" @click="doDispatch">快点我~</van-button> | ||
17 | </div> | ||
16 | </div> | 18 | </div> |
17 | </div> | 19 | </div> |
18 | </div> | 20 | </div> |
... | @@ -20,14 +22,20 @@ | ... | @@ -20,14 +22,20 @@ |
20 | 22 | ||
21 | <script> | 23 | <script> |
22 | // 请求接口 | 24 | // 请求接口 |
23 | import {getUserInfo} from '@/api/user.js' | 25 | import { getUserInfo } from '@/api/user.js' |
24 | 26 | import { mapGetters } from 'vuex' | |
25 | export default { | 27 | export default { |
26 | data() { | 28 | data() { |
27 | return {} | 29 | return { |
30 | wechat: `${this.$cdn}/wx/640.gif` | ||
31 | } | ||
28 | }, | 32 | }, |
29 | 33 | ||
30 | computed: {}, | 34 | computed: { |
35 | ...mapGetters([ | ||
36 | 'userName' | ||
37 | ]) | ||
38 | }, | ||
31 | 39 | ||
32 | mounted() { | 40 | mounted() { |
33 | this.initData() | 41 | this.initData() |
... | @@ -37,10 +45,17 @@ export default { | ... | @@ -37,10 +45,17 @@ export default { |
37 | // 请求数据案例 | 45 | // 请求数据案例 |
38 | initData() { | 46 | initData() { |
39 | // 请求接口数据,仅作为展示,需要配置src->config下环境文件 | 47 | // 请求接口数据,仅作为展示,需要配置src->config下环境文件 |
40 | const params = {user: 'sunnie'} | 48 | const params = { user: 'sunnie' } |
41 | getUserInfo(params) | 49 | getUserInfo(params) |
42 | .then(() => {}) | 50 | .then(() => { }) |
43 | .catch(() => {}) | 51 | .catch(() => { }) |
52 | }, | ||
53 | // Action 通过 store.dispatch 方法触发 | ||
54 | doDispatch() { | ||
55 | this.$store.dispatch('setUserName', '真乖,赶紧关注公众号,组织都在等你~') | ||
56 | }, | ||
57 | goGithub(index) { | ||
58 | window.location.href = 'https://github.com/sunniejs/vue-h5-template' | ||
44 | } | 59 | } |
45 | } | 60 | } |
46 | } | 61 | } |
... | @@ -48,9 +63,16 @@ export default { | ... | @@ -48,9 +63,16 @@ export default { |
48 | <style lang="scss" scoped> | 63 | <style lang="scss" scoped> |
49 | .app-container { | 64 | .app-container { |
50 | background: #fff; | 65 | background: #fff; |
51 | height: 100%; | 66 | height: 100vh; |
67 | box-sizing: border-box; | ||
52 | .warpper { | 68 | .warpper { |
53 | padding: 12px; | 69 | padding: 50px 12px 12px 12px; |
70 | .list { | ||
71 | display: flex; | ||
72 | flex-direction: column; | ||
73 | align-items: center; | ||
74 | color: #666; | ||
75 | font-size: 14px; | ||
54 | .demo-home__title { | 76 | .demo-home__title { |
55 | margin: 0 0 6px; | 77 | margin: 0 0 6px; |
56 | font-size: 32px; | 78 | font-size: 32px; |
... | @@ -59,40 +81,28 @@ export default { | ... | @@ -59,40 +81,28 @@ export default { |
59 | display: inline-block; | 81 | display: inline-block; |
60 | vertical-align: middle; | 82 | vertical-align: middle; |
61 | } | 83 | } |
62 | img { | ||
63 | width: 32px; | ||
64 | } | ||
65 | span { | ||
66 | margin-left: 16px; | ||
67 | font-weight: 500; | ||
68 | } | ||
69 | } | ||
70 | .demo-home__desc { | ||
71 | margin: 0 0 20px; | ||
72 | color: rgba(69, 90, 100, 0.6); | ||
73 | font-size: 14px; | ||
74 | } | 84 | } |
75 | .list { | ||
76 | display: flex; | ||
77 | flex-direction: column; | ||
78 | align-items: center; | ||
79 | color: #666; | ||
80 | font-size: 14px; | ||
81 | .item { | 85 | .item { |
82 | font-size: 14px; | 86 | font-size: 14px; |
83 | line-height: 24px; | 87 | line-height: 34px; |
88 | a { | ||
89 | text-decoration: underline; | ||
84 | } | 90 | } |
85 | } | 91 | } |
86 | 92 | ||
87 | .author { | 93 | .logo { |
88 | width: 200px; | 94 | width: 120px; |
89 | height: 200px; | 95 | height: 120px; |
90 | background: url($cdn+'/weapp/me.png') center / contain no-repeat; | 96 | background: url($cdn+'/weapp/logo.png') center / contain no-repeat; |
91 | } | 97 | } |
92 | .wechat { | 98 | .wechat { |
93 | width: 200px; | 99 | width: 200px; |
94 | height: 200px; | 100 | height: 200px; |
95 | background: url($cdn+'/wx/640.gif') center / contain no-repeat; | 101 | img { |
102 | width: 100%; | ||
103 | height: auto; | ||
104 | } | ||
105 | } | ||
96 | } | 106 | } |
97 | } | 107 | } |
98 | } | 108 | } | ... | ... |
... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
2 | <template> | 2 | <template> |
3 | <div class="app-container"> | 3 | <div class="app-container"> |
4 | <div class="warpper"> | 4 | <div class="warpper"> |
5 | <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1> | 5 | <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span> VUE H5开发模板</span></h1> |
6 | <h2 class="demo-home__desc"> | 6 | <h2 class="demo-home__desc"> |
7 | A vue h5 template with Vant UI | 7 | A vue h5 template with Vant UI |
8 | </h2> | 8 | </h2> |
... | @@ -19,12 +19,12 @@ export default { | ... | @@ -19,12 +19,12 @@ export default { |
19 | 'Vue-cli4', | 19 | 'Vue-cli4', |
20 | '配置多环境变量', | 20 | '配置多环境变量', |
21 | 'VantUI 组件按需加载', | 21 | 'VantUI 组件按需加载', |
22 | 'Sass', | 22 | 'Sass 全局样式', |
23 | 'Webpack 4', | 23 | 'Webpack 4', |
24 | 'Vuex', | 24 | 'Vuex 状态管理', |
25 | ' Axios 封装及接口管理', | 25 | 'Axios 封装及接口管理', |
26 | 'Vue-router', | 26 | 'Vue-router', |
27 | 'vue.config.js 基础配置', | 27 | 'Webpack 4 vue.config.js 基础配置', |
28 | '配置 proxy 跨域', | 28 | '配置 proxy 跨域', |
29 | '配置 alias 别名', | 29 | '配置 alias 别名', |
30 | '配置 打包分析', | 30 | '配置 打包分析', |
... | @@ -36,7 +36,9 @@ export default { | ... | @@ -36,7 +36,9 @@ export default { |
36 | } | 36 | } |
37 | }, | 37 | }, |
38 | 38 | ||
39 | computed: {}, | 39 | computed: { |
40 | |||
41 | }, | ||
40 | 42 | ||
41 | mounted() {}, | 43 | mounted() {}, |
42 | 44 | ... | ... |
-
Please register or sign in to post a comment