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
234923c3
authored
2020-04-15 22:02:19 +0800
by
宋楠
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
sass
1 parent
fec05cdd
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
165 additions
and
4 deletions
README.md
src/assets/css/index.scss
src/assets/css/mixin.scss
src/assets/css/variables.scss
README.md
View file @
234923c
...
...
@@ -6,15 +6,19 @@
[
demo
](
https://solui.cn/vue-h5-template/#/
)
建议手机端查看
### Node 版本要求
`Vue CLI`
需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用
[
nvm
](
https://github.com/nvm-sh/nvm
)
或
[
nvm-windows
](
https://github.com/coreybutler/nvm-windows
)
在同一台电脑中管理多个 Node 版本。
本示例 Node.js 12.14.1
<span
id=
"top"
>
目录
</span>
-
[
√ 配置多环境变量
](
#env
)
-
[
√ rem 适配方案
](
#rem
)
-
Vue-cli4
-
VantUI 组件按需加载
-
Sass
-
[
√ Vue-cli4
](
https://cli.vuejs.org/zh/guide/
)
-
[
√ VantUI 组件按需加载
](
#vant
)
-
[
√ Sass
](
#sass
)
-
Webpack 4
-
Vuex
-
Axios 封装
...
...
@@ -45,6 +49,7 @@
  
以
`VUE_APP_`
开头的变量,在代码中可以通过
`process.env.VUE_APP_`
访问。
  
比如,
`VUE_APP_ENV = 'development'`
通过
`process.env.VUE_APP_ENV`
访问
  
除了
`VUE_APP_*`
变量之外,在你的应用代码中始终可用的还有两个特殊的变量
`NODE_ENV`
和
`BASE_URL`
在项目根目录中新建.env
...
...
@@ -141,7 +146,7 @@ module.exports = {
很多小伙伴会问我,适配的问题。
举个例子:设计给了你一张 750px
\*
1334px 图片,在 iPhone6 上铺
面
屏幕,其他机型适配。
举个例子:设计给了你一张 750px
\*
1334px 图片,在 iPhone6 上铺
满
屏幕,其他机型适配。
-
当
`rootValue: 70`
, 样式
`width: 750px;height: 1334px;`
图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
-
当
`rootValue: 37.5`
的时候,样式
`width: 375px;height: 667px;`
图片会撑满 iPhone6 屏幕。
...
...
@@ -169,6 +174,72 @@ module.exports = {
[
▲ 回顶部
](
#top
)
### <span id="vant">✅ VantUI 组件按需加载 </span>
项目采用
[
自动按需引入组件 (推荐)
](
https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian
)
下面安装插件介绍:
[
babel-plugin-import
](
https://github.com/ant-design/babel-plugin-import
)
是一款
`babel`
插件,它会在编译过程中将
`import`
的写法自动转换为按需引入的方式
# 安装插件
```
javascript
npm
i
babel
-
plugin
-
import
-
D
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module
.
exports
=
{
presets
:
[[
'@vue/cli-plugin-babel/preset'
,
{
useBuiltIns
:
'entry'
}]],
plugins
:
[
[
'import'
,
{
libraryName
:
'vant'
,
libraryDirectory
:
'es'
,
style
:
true
},
'vant'
]
]
}
```
# 使用组件
项目在
`src/plugins/vant.js`
下统一管理组件,用哪个引入哪个,无需在页面里重复引用
```
javascript
// 按需全局引入 vant组件
import
Vue
from
'vue'
import
{
Button
,
List
,
Cell
,
Tabbar
,
TabbarItem
}
from
'vant'
Vue
.
use
(
Button
)
Vue
.
use
(
Cell
)
Vue
.
use
(
List
)
Vue
.
use
(
Tabbar
).
use
(
TabbarItem
)
```
[
▲ 回顶部
](
#top
)
### <span id="sass">✅ Sass </span>
首先 你可能会遇到
`node-sass`
安装不成功,别放弃多试几次!!!
在
`src/assets/css/`
文件夹下包含了三个文件
-
`index.scss`
主入口,主要引入其他两个scss文件,和公共样式
-
`variables.scss`
定义变量
-
`mixin.scss`
定义
`mixin`
方法
你可以直接在vue文件下写 sass 语法
```
html
<style
lang=
"scss"
scoped
>
</style>
```
[
▲ 回顶部
](
#top
)
#### 总结
因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长
...
...
src/assets/css/index.scss
View file @
234923c
@import
'./variables.scss'
;
@import
'./mixin.scss'
;
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html
,
body
,
div
,
span
,
applet
,
object
,
iframe
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
p
,
blockquote
,
pre
,
a
,
abbr
,
acronym
,
address
,
big
,
cite
,
code
,
del
,
dfn
,
em
,
img
,
ins
,
kbd
,
q
,
s
,
samp
,
small
,
strike
,
strong
,
sub
,
sup
,
tt
,
var
,
b
,
u
,
i
,
center
,
dl
,
dt
,
dd
,
ol
,
ul
,
li
,
fieldset
,
form
,
label
,
legend
,
table
,
caption
,
tbody
,
tfoot
,
thead
,
tr
,
th
,
td
,
article
,
aside
,
canvas
,
details
,
embed
,
figure
,
figcaption
,
footer
,
header
,
hgroup
,
menu
,
nav
,
output
,
ruby
,
section
,
summary
,
time
,
mark
,
audio
,
video
{
margin
:
0
;
padding
:
0
;
border
:
0
;
font-size
:
100%
;
font
:
inherit
;
vertical-align
:
baseline
;
}
/* HTML5 display-role reset for older browsers */
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
menu
,
nav
,
section
{
display
:
block
;
}
body
{
line-height
:
1
;
}
ol
,
ul
{
list-style
:
none
;
}
blockquote
,
q
{
quotes
:
none
;
}
blockquote
:before
,
blockquote
:after
,
q
:before
,
q
:after
{
content
:
''
;
content
:
none
;
}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
;
}
.app-container
{
padding-bottom
:
50px
}
\ No newline at end of file
...
...
src/assets/css/mixin.scss
0 → 100644
View file @
234923c
// mixin
// 清除浮动
@mixin
clearfix
{
&
:after
{
content
:
""
;
display
:
table
;
clear
:
both
;
}
}
// 多行隐藏
@mixin
textoverflow
(
$clamp
:
1
)
{
display
:
block
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
-o-text-overflow
:
ellipsis
;
display
:
-
webkit-box
;
-webkit-line-clamp
:
$clamp
;
/*! autoprefixer: ignore next */
-webkit-box-orient
:
vertical
;
}
//flex box
@mixin
flexbox
(
$jc
:
space-between
,
$ai
:
center
,
$fd
:
row
,
$fw
:
nowrap
)
{
display
:
flex
;
display
:
-
webkit-flex
;
flex
:
1
;
justify-content
:
$jc
;
-webkit-justify-content
:
$jc
;
align-items
:
$ai
;
-webkit-align-items
:
$ai
;
flex-direction
:
$fd
;
-webkit-flex-direction
:
$fd
;
flex-wrap
:
$fw
;
-webkit-flex-wrap
:
$fw
;
}
src/assets/css/variables.scss
0 → 100644
View file @
234923c
// variables
$background-color
:
#f8f8f8
;
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