234923c3 by 宋楠

sass

1 parent fec05cdd
......@@ -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 @@
&emsp;&emsp;`VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。
&emsp;&emsp;比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问
&emsp;&emsp; 除了 `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)
#### 总结
因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长
......
@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
......
// 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;
}
// variables
$background-color: #f8f8f8;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!