From 234923c38a71d567d962a550c6eee87df491a73b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=8B=E6=A5=A0?= <406803045@qq.com>
Date: Wed, 15 Apr 2020 22:02:19 +0800
Subject: [PATCH] sass

---
 README.md                     | 79 +++++++++++++++++++++++++++++++++--
 src/assets/css/index.scss     | 51 ++++++++++++++++++++++
 src/assets/css/mixin.scss     | 36 ++++++++++++++++
 src/assets/css/variables.scss |  3 ++
 4 files changed, 165 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/css/mixin.scss
 create mode 100644 src/assets/css/variables.scss

diff --git a/README.md b/README.md
index 408411d..c519fa6 100644
--- a/README.md
+++ b/README.md
@@ -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)
+
 #### 总结
 
 因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index 8f831f4..dc41a5b 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -1,3 +1,54 @@
+@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
diff --git a/src/assets/css/mixin.scss b/src/assets/css/mixin.scss
new file mode 100644
index 0000000..327b6d4
--- /dev/null
+++ b/src/assets/css/mixin.scss
@@ -0,0 +1,36 @@
+// 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;
+}
diff --git a/src/assets/css/variables.scss b/src/assets/css/variables.scss
new file mode 100644
index 0000000..2f85e3e
--- /dev/null
+++ b/src/assets/css/variables.scss
@@ -0,0 +1,3 @@
+ 
+// variables
+$background-color: #f8f8f8;