234923c3 by 宋楠

sass

1 parent fec05cdd
...@@ -6,15 +6,19 @@ ...@@ -6,15 +6,19 @@
6 6
7 [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看 7 [demo](https://solui.cn/vue-h5-template/#/)建议手机端查看
8 8
9 ### Node 版本要求
9 10
11 `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 版本。
12
13 本示例 Node.js 12.14.1
10 14
11 <span id="top">目录</span> 15 <span id="top">目录</span>
12 16
13 - [√ 配置多环境变量](#env) 17 - [√ 配置多环境变量](#env)
14 - [√ rem 适配方案](#rem) 18 - [√ rem 适配方案](#rem)
15 - Vue-cli4 19 - [√ Vue-cli4](https://cli.vuejs.org/zh/guide/)
16 - VantUI 组件按需加载 20 - [√ VantUI 组件按需加载](#vant)
17 - Sass 21 - [√ Sass](#sass)
18 - Webpack 4 22 - Webpack 4
19 - Vuex 23 - Vuex
20 - Axios 封装 24 - Axios 封装
...@@ -45,6 +49,7 @@ ...@@ -45,6 +49,7 @@
45 49
46 &emsp;&emsp;`VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。 50 &emsp;&emsp;`VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。
47 &emsp;&emsp;比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 51 &emsp;&emsp;比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问
52 &emsp;&emsp; 除了 `VUE_APP_*` 变量之外,在你的应用代码中始终可用的还有两个特殊的变量`NODE_ENV``BASE_URL`
48 53
49 在项目根目录中新建.env 54 在项目根目录中新建.env
50 55
...@@ -141,7 +146,7 @@ module.exports = { ...@@ -141,7 +146,7 @@ module.exports = {
141 146
142 很多小伙伴会问我,适配的问题。 147 很多小伙伴会问我,适配的问题。
143 148
144 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺屏幕,其他机型适配。 149 举个例子:设计给了你一张 750px \* 1334px 图片,在 iPhone6 上铺屏幕,其他机型适配。
145 150
146 -`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。 151 -`rootValue: 70` , 样式 `width: 750px;height: 1334px;` 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
147 -`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。 152 -`rootValue: 37.5` 的时候,样式 `width: 375px;height: 667px;` 图片会撑满 iPhone6 屏幕。
...@@ -169,6 +174,72 @@ module.exports = { ...@@ -169,6 +174,72 @@ module.exports = {
169 174
170 [▲ 回顶部](#top) 175 [▲ 回顶部](#top)
171 176
177 ### <span id="vant">✅ VantUI 组件按需加载 </span>
178
179 项目采用[自动按需引入组件 (推荐)](https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian)
180
181 下面安装插件介绍:
182
183 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 `babel` 插件,它会在编译过程中将 `import` 的写法自动转换为按需引入的方式
184
185 # 安装插件
186
187 ```javascript
188 npm i babel-plugin-import -D
189
190 // 对于使用 babel7 的用户,可以在 babel.config.js 中配置
191 module.exports = {
192 presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
193 plugins: [
194 [
195 'import',
196 {
197 libraryName: 'vant',
198 libraryDirectory: 'es',
199 style: true
200 },
201 'vant'
202 ]
203 ]
204 }
205 ```
206
207 # 使用组件
208
209 项目在 `src/plugins/vant.js` 下统一管理组件,用哪个引入哪个,无需在页面里重复引用
210
211 ```javascript
212 // 按需全局引入 vant组件
213 import Vue from 'vue'
214 import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'
215 Vue.use(Button)
216 Vue.use(Cell)
217 Vue.use(List)
218 Vue.use(Tabbar).use(TabbarItem)
219
220 ```
221 [▲ 回顶部](#top)
222
223 ### <span id="sass">✅ Sass </span>
224
225 首先 你可能会遇到 `node-sass` 安装不成功,别放弃多试几次!!!
226
227 `src/assets/css/`文件夹下包含了三个文件
228 - `index.scss` 主入口,主要引入其他两个scss文件,和公共样式
229 - `variables.scss` 定义变量
230 - `mixin.scss` 定义 `mixin` 方法
231
232 你可以直接在vue文件下写 sass 语法
233
234 ```html
235 <style lang="scss" scoped>
236
237 </style>
238
239 ```
240
241 [▲ 回顶部](#top)
242
172 #### 总结 243 #### 总结
173 244
174 因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长 245 因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长
......
1 @import './variables.scss';
2 @import './mixin.scss';
3 /* http://meyerweb.com/eric/tools/css/reset/
4 v2.0 | 20110126
5 License: none (public domain)
6 */
7
8 html, body, div, span, applet, object, iframe,
9 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
10 a, abbr, acronym, address, big, cite, code,
11 del, dfn, em, img, ins, kbd, q, s, samp,
12 small, strike, strong, sub, sup, tt, var,
13 b, u, i, center,
14 dl, dt, dd, ol, ul, li,
15 fieldset, form, label, legend,
16 table, caption, tbody, tfoot, thead, tr, th, td,
17 article, aside, canvas, details, embed,
18 figure, figcaption, footer, header, hgroup,
19 menu, nav, output, ruby, section, summary,
20 time, mark, audio, video {
21 margin: 0;
22 padding: 0;
23 border: 0;
24 font-size: 100%;
25 font: inherit;
26 vertical-align: baseline;
27 }
28 /* HTML5 display-role reset for older browsers */
29 article, aside, details, figcaption, figure,
30 footer, header, hgroup, menu, nav, section {
31 display: block;
32 }
33 body {
34 line-height: 1;
35 }
36 ol, ul {
37 list-style: none;
38 }
39 blockquote, q {
40 quotes: none;
41 }
42 blockquote:before, blockquote:after,
43 q:before, q:after {
44 content: '';
45 content: none;
46 }
47 table {
48 border-collapse: collapse;
49 border-spacing: 0;
50 }
51
1 .app-container{ 52 .app-container{
2 padding-bottom:50px 53 padding-bottom:50px
3 } 54 }
...\ No newline at end of file ...\ No newline at end of file
......
1 // mixin
2 // 清除浮动
3 @mixin clearfix {
4 &:after {
5 content: "";
6 display: table;
7 clear: both;
8 }
9 }
10
11 // 多行隐藏
12 @mixin textoverflow($clamp:1) {
13 display: block;
14 overflow: hidden;
15 text-overflow: ellipsis;
16 -o-text-overflow: ellipsis;
17 display: -webkit-box;
18 -webkit-line-clamp: $clamp;
19 /*! autoprefixer: ignore next */
20 -webkit-box-orient: vertical;
21 }
22
23 //flex box
24 @mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
25 display: flex;
26 display: -webkit-flex;
27 flex: 1;
28 justify-content: $jc;
29 -webkit-justify-content: $jc;
30 align-items: $ai;
31 -webkit-align-items: $ai;
32 flex-direction: $fd;
33 -webkit-flex-direction: $fd;
34 flex-wrap: $fw;
35 -webkit-flex-wrap: $fw;
36 }
1
2 // variables
3 $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!