Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
xqz
/
dianDemo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
627b11b3
authored
2020-04-21 11:10:36 +0800
by
sunnie
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
readme
1 parent
c6bd6058
Show whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
187 additions
and
95 deletions
README.md
src/api/user.js
src/components/TabBar.vue
src/main.js
src/store/modules/app.js
src/views/home/about.vue
src/views/home/index.vue
static/demo.png
README.md
View file @
627b11b
...
...
@@ -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
View file @
627b11b
...
...
@@ -9,7 +9,6 @@ export function login(params) {
url
:
'/user/login'
,
method
:
'post'
,
data
:
qs
.
stringify
(
params
)
// hideloading: true
})
}
// 用户信息
...
...
src/components/TabBar.vue
View file @
627b11b
...
...
@@ -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
View file @
627b11b
...
...
@@ -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
View file @
627b11b
...
...
@@ -13,7 +13,6 @@ const actions = {
}
}
export
default
{
namespaced
:
true
,
state
,
mutations
,
actions
...
...
src/views/home/about.vue
View file @
627b11b
...
...
@@ -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
:
20
0px
;
height
:
20
0px
;
background
:
url($cdn+'/weapp/me
.png')
center
/
contain
no-repeat
;
.logo
{
width
:
12
0px
;
height
:
12
0px
;
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
View file @
627b11b
...
...
@@ -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
View file @
627b11b
23.5 KB
|
W:
|
H:
25.4 KB
|
W:
|
H:
2-up
Swipe
Onion skin
Write
Preview
Styling with
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment