sass
Showing
4 changed files
with
165 additions
and
4 deletions
... | @@ -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 |   以 `VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。 | 50 |   以 `VUE_APP_` 开头的变量,在代码中可以通过 `process.env.VUE_APP_` 访问。 |
47 |   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 | 51 |   比如,`VUE_APP_ENV = 'development'` 通过`process.env.VUE_APP_ENV` 访问 |
52 |    除了 `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 | ... | ... |
src/assets/css/mixin.scss
0 → 100644
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 | } |
src/assets/css/variables.scss
0 → 100644
-
Please register or sign in to post a comment