# scss-tutorials

**Repository Path**: seongbrave/scss-tutorials

## Basic Information

- **Project Name**: scss-tutorials
- **Description**: scss学习笔记
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-09-09
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端工程化之Vue的简单学习使用
## 技术栈
---
  [es6](http://es6.ruanyifeng.com/)  [Vue](https://cn.vuejs.org/v2/guide/)  [vue-router 2](https://router.vuejs.org/zh-cn/)  [Vuex](https://vuex.vuejs.org/zh-cn/)  [axios](https://github.com/mzabriskie/axios)  [webpack](https://mp.weixin.qq.com/s?__biz=MzIwNjEwNTQ4Mw==&mid=2651577617&idx=1&sn=5d74f835ccb4e8070c2a03a215ee199e&chksm=8cd9c3f5bbae4ae3fbca8d88c7b5844a3bc7b5b8e2277200932074c26765ac04f4dfbc37637c#rd)  [scss](https://www.sass.hk/docs/)  [Flexbox](http://www.w3cplus.com/css3/a-guide-to-flexbox.html)   `rem`

---
##  [Vue学习](https://cn.vuejs.org/v2/guide/)

> Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的[渐进式框架](https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484393&idx=1&sn=142b8e37dfc94de07be211607e468030&chksm=9723612ba054e83db6622a891287af119bb63708f1b7a09aed9149d846c9428ad5abbb822294&mpshare=1&scene=1&srcid=1026oUz3521V74ua0uwTcIWa&from=groupmessage&isappinstalled=0#wechat_redirect&utm_source=tuicool&utm_medium=referral)~~~

### 基础语法

   1. **[Vue.use](https://cn.vuejs.org/v2/api/#Vue-use)** 安装 Vue.js 插件
   2. **[data](https://cn.vuejs.org/v2/api/#data)** Vue 实例的数据对象
   3. **[props](https://cn.vuejs.org/v2/api/#props)** props 可以是数组或对象，用于接收来自父组件的数据
   4. **[computed](https://cn.vuejs.org/v2/api/#computed)** 计算属性
   5. **[methods](https://cn.vuejs.org/v2/api/#methods)** 用户自定义方法
   6. **[components](https://cn.vuejs.org/v2/api/#components)** 包含 Vue 实例可用组件的哈希表
   7. **[props](https://cn.vuejs.org/v2/api/#vm-props)** 一个对象，代表当前组件收到的 props
   
---

>生命周期

![](lifecycle.png)
``` javascript
<script>

export default {
  data() {
    return {
      minirefresh: null,
      homelist: []
    }
  },
  beforeCreate: function() {
    console.log('beforecreated');
  },
  created: function() {
    console.log('实例已经创建');
  },
  beforeMount: function() {
    console.log('beforeMount')

  },
  mounted: function() {
    console.log('mounted');
  },
  beforeUpdate: function() {
    console.log('beforeUpdate');
  },
  updated: function() {
    console.log('updated');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy');
  },
  destroyed: function() {
    console.log('destroyed');
  },
  activated: function() {
    console.log('activated');
  },
  destroyed: function() {
    console.log('deactivated');
  },
  methods: {
   console.log('methods');
  }
}
</script>
      
```
## [vue-router 2](https://router.vuejs.org/zh-cn/)

1. [简单demo](http://jsfiddle.net/yyx990803/xgrjzsup/)
2. 注册路由
```javascript
   const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})Ï
   ```
   3. 使用路由
   ```javascript
   <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

   ```
   或者是js
   ```javascript
   router.push({ name: 'user', params: { userId: 123 }})
   ```
   4. [导航钩子](https://router.vuejs.org/zh-cn/advanced/navigation-guards.html)
   >正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。
   ```javascript
           // 路由拦截
        // 差点忘了说明,不是所有版块都需要鉴权的
        // 所以需要鉴权,我都会在路由meta添加添加一个字段requireLogin,设置为true的时候
        // 这货就必须走鉴权,像登录页这些不要,是可以直接访问的!!!
    router.beforeEach((to, from, next) => {
        if (to.matched.some(res => res.meta.requireLogin)) {
            // 判断是否需要登录权限
            if (window.localStorage.getItem("loginUserBaseInfo")) {
                // 判断是否登录
                next();
            } else {
                // 没登录则跳转到登录界面
                next({
                    path: "/login"
                });
            }
        } else {
            next();
        }
    });
   ```
   ## [Vuex](https://vuex.vuejs.org/zh-cn/)
   >Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
   1. [State](https://vuex.vuejs.org/zh-cn/state.html)
   2. [Getters](https://vuex.vuejs.org/zh-cn/getters.html)
   3. [Mutations](https://vuex.vuejs.org/zh-cn/mutations.html)
   4. [Action](https://vuex.vuejs.org/zh-cn/actions.html)

   ## [vue-cli](https://github.com/vuejs/vue-cli)
   安装
   ```javascript
   npm install -g vue-cli
   ```
   使用
   ```javascript
   vue init webpack my-project
   ```
   ## [webpack](https://mp.weixin.qq.com/s?__biz=MzIwNjEwNTQ4Mw==&mid=2651577617&idx=1&sn=5d74f835ccb4e8070c2a03a215ee199e&chksm=8cd9c3f5bbae4ae3fbca8d88c7b5844a3bc7b5b8e2277200932074c26765ac04f4dfbc37637c#rd)
   **只是一个打包工具** 
   >它把所有的文件都可以当做模块处理，包括你的 JavaScript 代码，也包括 CSS 和 fonts 以及图片等等，只要通过合适的 Loaders，它们都可以被当做模块被处理.

 ## [scss](https://www.sass.hk/docs/)
   * 安装
   ```ruby
   gem install sass
   ```
   * 监视单个 Sass 文件，每次修改并保存时自动编译：
   ```scss
   sass --watch main.scss:css/main.min.css --style compressed
   ```
   #### 基本语法
   SASS允许使用变量，所有变量以$开头。
   ```scss
   　　$blue : #1875e7;　
　　div {
　　　color : $blue;
　　}
   ```
   如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
   ```scss
   　　$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}
   ```
   SASS允许选择器嵌套。比如，下面的CSS代码：
   ```scss
   　　div h1 {
　　　　color : red;
　　}
   ```
   可以写成：
   ```scss
   　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}
   ```
   `&`表示父元素
   `@extend`表示继承
   `@mixin`有点像C语言的宏（macro），是可以重用的代码块。
   `@import`命令，用来插入外部文件。
   
   使用@mixin命令，定义一个代码块。
   ```scss
   　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
   ```
   使用@include命令，调用这个mixin。
   ```scss
   　　div {
　　　　@include left;
　　}
  ```
  mixin的强大之处，在于可以指定参数和缺省值。
  ```scss
  　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
  ```
  使用的时候，根据需要加入参数：
  ```scss
  　　div {
　　　　@include left(20px);
　　}
  ```


### [BEM](http://www.jianshu.com/p/e7576cc6e6be)与[scss](https://www.sass.hk/docs/)的结合

#### BEM简单介绍
 >命名约定的模式如下：
 ```css
 .block{}
.block__element{}
.block--modifier{}
```
* .block 代表了更高级别的抽象或组件。
* .block__element 代表.block的后代，用于形成一个完整的.block的整体。
* .block--modifier代表.block的不同状态或不同版本。

#### 工具方法
```scss
/* BEM帮助工具 */
// 元素
@mixin element($name) {
    @at-root #{&}__#{$name} {
        @content;
    }
}

// 修饰符
@mixin modifier($name) {
    @at-root #{&}-#{$name} {
        @content;
    }
}
```
#### 结合使用
* html文件使用class
```html
<div class="login">
        <div class="login__logo">
            <img src="../../images/login-logo.png">
        </div>
        <div class="login__input">

        </div>
    </div>
```
* 使用工具方法之前
```scss
.login {
    @include fj(center);
    &__logo {
        margin-top: torem(55);
        text-align: center;
        img {
            width: torem(134);
            height: torem(134);
            background: $img-bg_c;
        }
    }
    &__input {
        height: 3rem;
        width: 100%;
    }
}
```
* 使用工具方法之后
```scss
.login {
    @include fj(center);
    flex-direction: column;
    @include element(logo) {
        margin-top: torem(55);
        text-align: center;
        img {
            width: torem(134);
            height: torem(134);
            background: $img-bg_c;
        }
    }
    @include element(input) {
        height: 3rem;
        width: 100%;
    }
}
```
 ## [Flexbox](http://www.w3cplus.com/css3/a-guide-to-flexbox.html)
  * [一个很直观的学习Flexbox网站](https://jonathantneal.github.io/flexibility/)
  * [Flexible-box-tutorials](https://gitee.com/seongbrave/Flexible-box-tutorials)

---
  ## 学习资料
  ### 练习项目
- [觅客直供App](https://gitee.com/emeker/Eddard-Web)
 ### 官网资料
- [官网](https://cn.vuejs.org/index.html)
- [Api](https://cn.vuejs.org/v2/api/)
- [vue-router 2](https://router.vuejs.org/zh-cn/)
- [Vuex](https://vuex.vuejs.org/zh-cn/)
- [博客](http://www.cnblogs.com/keepfool/)
### 教程网站
- [Vue简单系列文章教程](https://github.com/keepfool/vue-tutorials)
- [Vue.js——60分钟快速入门](http://www.cnblogs.com/keepfool/p/5619070.html)
- [Vue技术汇总](https://github.com/opendigg/awesome-github-vue)
### sass学习资料
- [w3cplus](http://www.w3cplus.com/blog/tags/302.html)
- [sass语法](http://www.w3cplus.com/sassguide/syntax.html)
- [sassguide](http://www.w3cplus.com/sassguide/index.html)
### 公众号推荐
* 前端之巅
![README.md-20179149199](2017-09-14-09-19-09.png)

*  InfoQ
![README.md-201791492049](2017-09-14-09-20-49.png)