Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
627b11b3 by sunnie
Options

readme

1 parent c6bd6058
Inline Side-by-side
Showing 8 changed files with 187 additions and 95 deletions
README.md
......@@ -6,6 +6,10 @@
[demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
<p>
<img src="./static/demo.png" width="256" style="display:inline;">
</p>
### Node 版本要求
`Vue CLI` 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 [nvm](https://github.com/nvm-sh/nvm) 或
......@@ -25,19 +29,17 @@ npm install
npm run serve
```
<span id="top">目录</span>
- [√ Vue-cli4](https://cli.vuejs.org/zh/guide/)
- [√ Vue-cli4](https://cli.vuejs.org/zh/guide/){:target="_blank"}
- [√ 配置多环境变量](#env)
- [√ rem 适配方案](#rem)
- [√ VantUI 组件按需加载](#vant)
- [√ Sass](#sass)
- [√ Webpack 4](#webpack)
- [√ Vuex](#vuex)
- [√ Sass 全局样式](#sass)
- [√ Vuex 状态管理](#vuex)
- [√ Axios 封装及接口管理](#axios)
- [√ Vue-router](#router)
- [√ vue.config.js 基础配置](#base)
- [√ Webpack 4 vue.config.js 基础配置](#base)
- [√ 配置 proxy 跨域](#proxy)
- [√ 配置 alias 别名](#alias)
- [√ 配置 打包分析](#bundle)
......@@ -45,12 +47,7 @@ npm run serve
- [√ 去掉 console.log ](#console)
- [√ splitChunks 单独打包第三方模块](#chunks)
- [√ 添加 IE 兼容 ](#ie)
* Vuex
* Axios 封装
* 生产环境 cdn 优化首屏加速
* babel 低版本浏览器兼容
* Eslint+Pettier 统一开发规范
- [√ Eslint+Pettier 统一开发规范 ](#pettier)
### <span id="env">✅ 配置多环境变量 </span>
......@@ -259,55 +256,138 @@ Vue.use(Tabbar).use(TabbarItem)
[▲ 回顶部](#top)
### <span id="sass">✅ Sass </span>
### <span id="sass">✅ Sass 全局样式</span>
首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
在 `src/assets/css/`文件夹下包含了三个文件
目录结构，在 `src/assets/css/`文件夹下包含了三个文件
- `index.scss` 主入口，主要引入其他两个 scss 文件，和公共样式
- `variables.scss` 定义变量
- `mixin.scss` 定义 `mixin` 方法
```bash
├── assets
│ ├── css
│ │ ├── index.scss # 全局通用样式
│ │ ├── mixin.scss # 全局mixin
│ │ └── variables.scss # 全局变量
```
你可以直接在 vue 文件下写 sass 语法
每个页面自己对应的样式都写在自己的 .vue 文件之中
```html
<style lang="scss">
/* global styles */
</style>
<style lang="scss" scoped>
.demo {
.title {
font-size: 12px;
/* local styles */
</style>
```
`vue.config.js` 配置注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址
```javascript
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = {
css: {
extract: IS_PROD,
sourceMap: false,
loaderOptions: {
scss: {
// 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
prependData: `
@import "assets/css/mixin.scss";
@import "assets/css/variables.scss";
$cdn: "${defaultSettings.$cdn}";
`
}
}
}
}
```
在 `main.js` 中引用全局样式（发现在上面的，prependData 里设置`@import "assets/css/index.scss";`并没有应用全局样式这里在
main.js 引入）
设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问
```javascript
// 引入全局样式
import '@/assets/css/index.scss'
// 设置 js中可以访问 $cdn
// 引入cdn
import {$cdn} from '@/config'
Vue.prototype.$cdn = $cdn
```
在 css 中引用
```html
<script>
console.log(this.$cdn)
</script>
<style lang="scss" scoped>
.logo {
width: 120px;
height: 120px;
background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
}
</style>
```
[▲ 回顶部](#top)
### <span id="sass">✅ Sass </span>
### <span id="vuex">✅ Vuex 状态管理</span>
首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
目录结构
```bash
├── store
│ ├── modules
│ │ └── app.js
│ ├── index.js
│ ├── getters.js
```
在 `src/assets/css/`文件夹下包含了三个文件
`main.js` 引入
- `index.scss` 主入口，主要引入其他两个 scss 文件，和公共样式
- `variables.scss` 定义变量
- `mixin.scss` 定义 `mixin` 方法
```javascript
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
```
你可以直接在 vue 文件下写 sass 语法
使用
```html
<style lang="scss" scoped>
.demo {
.title {
font-size: 12px;
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'userName'
])
},
methods: {
// Action 通过 store.dispatch 方法触发
doDispatch() {
this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
}
}
</style>
}
</script>
```
[▲ 回顶部](#top)
### <span id="base">✅ Vue-router </span>
### <span id="router">✅ Vue-router </span>
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
......@@ -430,13 +510,13 @@ import qs from 'qs'
import request from '@/utils/request'
//user api
// 登录
export function login(params) {
// 用户信息
export function getUserInfo(params) {
return request({
url: '/user/login', // 接口地址
method: 'post', // method
data: qs.stringify(params)
// hideloading: true
url: '/user/userinfo',
method: 'get',
data: qs.stringify(params),
hideloading: true // 隐藏 loading 组件
})
}
```
......@@ -448,14 +528,14 @@ export function login(params) {
import {getUserInfo} from '@/api/user.js'
const params = {user: 'sunnie'}
getUserInfo()
getUserInfo(params)
.then(() => {})
.catch(() => {})
```
[▲ 回顶部](#top)
### <span id="base">✅ vue.config.js 基础配置 </span>
### <span id="base">✅ Webpack 4 vue.config.js 基础配置 </span>
如果你的 `Vue Router` 模式是 hash
......@@ -580,7 +660,7 @@ npm run build
[▲ 回顶部](#top)
### <span id="proxy">✅ 配置 externals 引入 cdn 资源 </span>
### <span id="externals">✅ 配置 externals 引入 cdn 资源 </span>
这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可
以实际测试一下。
......
src/api/user.js
......@@ -9,7 +9,6 @@ export function login(params) {
url: '/user/login',
method: 'post',
data: qs.stringify(params)
// hideloading: true
})
}
// 用户信息
......
src/components/TabBar.vue
......@@ -25,9 +25,7 @@ export default {
}
},
methods: {
// onChange(index) {
// if (index === 1) window.location.href = 'https://github.com/sunniejs/vue-h5-template'
// }
}
}
</script>
......
src/main.js
......@@ -4,8 +4,12 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局样式
import '@/assets/css/index.scss'
// 设置 js中可以访问 $cdn
import {$cdn} from '@/config'
Vue.prototype.$cdn = $cdn
// 全局引入按需引入UI库 vant
import '@/plugins/vant'
......
src/store/modules/app.js
......@@ -13,7 +13,6 @@ const actions = {
}
}
export default {
namespaced: true,
state,
mutations,
actions
......
src/views/home/about.vue
......@@ -2,17 +2,19 @@
<template>
<div class="app-container">
<div class="warpper">
<h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
<h2 class="demo-home__desc">
A vue h5 template with Vant UI
</h2>
<div class="list">
<div class="author"></div>
<div class="logo"></div>
<div class="demo-home__title"> VUE H5开发模板</div>
<div class="item">项目地址: <a href="https://github.com/sunniejs">https://github.com/sunniejs</a></div>
<div class="item">项目作者: sunnie</div>
<div class="item"></div>
<div class="wechat"></div>
<div>关注公众号：回复“加群”即可加 前端仙女群</div>
<div class="wechat">
<img :src="this.wechat" alt="">
</div>
<div class="item">关注公众号：回复“加群”即可加 前端仙女群</div>
<div class="item">{{userName}} <van-button v-if="userName==''" type="warning" size="small" @click="doDispatch">快点我~</van-button>
</div>
</div>
</div>
</div>
......@@ -20,14 +22,20 @@
<script>
// 请求接口
import {getUserInfo} from '@/api/user.js'
import { getUserInfo } from '@/api/user.js'
import { mapGetters } from 'vuex'
export default {
data() {
return {}
return {
wechat: `${this.$cdn}/wx/640.gif`
}
},
computed: {},
computed: {
...mapGetters([
'userName'
])
},
mounted() {
this.initData()
......@@ -37,10 +45,17 @@ export default {
// 请求数据案例
initData() {
// 请求接口数据，仅作为展示，需要配置src->config下环境文件
const params = {user: 'sunnie'}
const params = { user: 'sunnie' }
getUserInfo(params)
.then(() => {})
.catch(() => {})
.then(() => { })
.catch(() => { })
},
// Action 通过 store.dispatch 方法触发
doDispatch() {
this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
},
goGithub(index) {
window.location.href = 'https://github.com/sunniejs/vue-h5-template'
}
}
}
......@@ -48,9 +63,16 @@ export default {
<style lang="scss" scoped>
.app-container {
background: #fff;
height: 100%;
height: 100vh;
box-sizing: border-box;
.warpper {
padding: 12px;
padding: 50px 12px 12px 12px;
.list {
display: flex;
flex-direction: column;
align-items: center;
color: #666;
font-size: 14px;
.demo-home__title {
margin: 0 0 6px;
font-size: 32px;
......@@ -59,40 +81,28 @@ export default {
display: inline-block;
vertical-align: middle;
}
img {
width: 32px;
}
span {
margin-left: 16px;
font-weight: 500;
}
}
.demo-home__desc {
margin: 0 0 20px;
color: rgba(69, 90, 100, 0.6);
font-size: 14px;
}
.list {
display: flex;
flex-direction: column;
align-items: center;
color: #666;
font-size: 14px;
.item {
font-size: 14px;
line-height: 24px;
line-height: 34px;
a {
text-decoration: underline;
}
}
.author {
width: 200px;
height: 200px;
background: url($cdn+'/weapp/me.png') center / contain no-repeat;
.logo {
width: 120px;
height: 120px;
background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
}
.wechat {
width: 200px;
height: 200px;
background: url($cdn+'/wx/640.gif') center / contain no-repeat;
img {
width: 100%;
height: auto;
}
}
}
}
}
......
src/views/home/index.vue
......@@ -2,7 +2,7 @@
<template>
<div class="app-container">
<div class="warpper">
<h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
<h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span> VUE H5开发模板</span></h1>
<h2 class="demo-home__desc">
A vue h5 template with Vant UI
</h2>
......@@ -19,12 +19,12 @@ export default {
'Vue-cli4',
'配置多环境变量',
'VantUI 组件按需加载',
'Sass',
'Sass 全局样式',
'Webpack 4',
'Vuex',
' Axios 封装及接口管理',
'Vuex 状态管理',
'Axios 封装及接口管理',
'Vue-router',
'vue.config.js 基础配置',
'Webpack 4 vue.config.js 基础配置',
'配置 proxy 跨域',
'配置 alias 别名',
'配置 打包分析',
......@@ -36,7 +36,9 @@ export default {
}
},
computed: {},
computed: {
},
mounted() {},
......
static/demo.png
static/demo.png

23.5 KB | W: | H:

static/demo.png

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!