627b11b3 by sunnie

readme

1 parent c6bd6058
...@@ -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'
......
...@@ -13,7 +13,6 @@ const actions = { ...@@ -13,7 +13,6 @@ const actions = {
13 } 13 }
14 } 14 }
15 export default { 15 export default {
16 namespaced: true,
17 state, 16 state,
18 mutations, 17 mutations,
19 actions 18 actions
......
...@@ -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
......

23.5 KB | W: | H:

25.4 KB | W: | H:

static/demo.png
static/demo.png
static/demo.png
static/demo.png
  • 2-up
  • Swipe
  • Onion skin
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!