簡單搭建 @vue-cli3.0 及常用sass使用

1,在安裝了Node.js后使用其中自帶的包管理工具npm。或者使用淘寶鏡像cnpm（這里不做說明）

1-1，下載vue3.0腳手架（如果之前裝vue-cli3x之前的版本，先卸載 npm uninstall vue-cli -g）

npm install -g @vue/cli

1-2，下載sass

npm install node-sass --save-dev

npm install sass-loader --save-dev

 

1-3，使用vue命令創建my-project項目

vue create my-project（vue init webpack my-project）

1-4，進入項目

cd my-project

1-5，啟動項目

npm run serve啟動項目

2，目錄圖片如下在組件componets下新建組件（可以建個文件夾放一個系列組件，便於項目管理）

2-1，在路由中引入組件（沒有安裝router記得install下，判斷方法：可以在package.json文件下

dependencies是否含有vue-router，沒有的話執行 npm install vue-router -S；或者直接在依賴寫

"vue-router": "^3.0.6"  然后npm install），

使用：在路由文件中 實例化配置路由后暴露出去 export default router。最后在入口文件main.js里注入路由vue.use(vue-router)，然后將導入的router配置掛載到實例的vue中。

最后在組件中  設置路由出口， 路由匹配到的組件將渲染的位置< router-view></router-view> 

 

 

2-3，然后就可以在你的組件里聲明下css類型  <style lang="scss" type="text/css" scoped> 就可以愉快的使用sass了

2-4，cnpm install axios --save-dev 安裝請求模塊

入口文件main.js
import Axios from 'axios'
Vue.prototype.$axios = Axios //掛載到vue上

組件使用
this.axios({method, url, data, res})

2-5，擴展說明，以前build下的配置，現在放到./node_modules\@vue\cli-service\lib　

3，這里羅列下常用的sass

3-1,

<style lang="scss" type="text/css" scoped>
/* 導入文件是 .sass或者.scss會被合並進來，是.css則是引用
 @import url('common/css/reset.css'); */
$vw_base: 375; 
$pink: pink !default;
$pink: blue; //下面的層級高
@function vw($px) {
    @return ($px / 375) * 100vw;
}
.center-left{
    width:vw(375/2);
    background: $pink;
    $color: red;
    color: $color;
}
.flex{
    display:flex;
    width: vw(50);
    // 子選擇器嵌套
    .red{
        color: $pink;
    }
    // 屬性嵌套
    border: {
        top: 5px solid green;
        bottom: 5px solid orange
    }
    // & 偽類嵌套 .flex:after{}
    &:after{
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
}
// 屬性繼承@extend
.btn {
    border: 1px solid $pink; 
    padding: 6px 10px;
}
.btn-primary { 
    background-color: #f36;
    @extend .btn;
}
// 混合指令通過@mixin來定義，@include來調用(參數若是沒有傳時，可以使用默認值)
@mixin div-border ($direct: right, $color: red){
    border-#{$direct}: 1px solid $color
}
.btn {
    @include div-border(top, yellow);   //border-top:1px solid yellow
    @include div-border()   //border-right:1px solid red
}

//占位符號 % color1並沒有存在於基類，只是額外聲明，不會產生代碼，只有在@extend繼承是才會編譯成css
%color1{
    color: yellow
}
.color-tatal{
    @extend %color1;
}

// sass中的數組用空格或逗號作分隔符，length($color-arr)：返回一個列表的長度值3。以下循環只寫其中一位
// 關於加減乘除運算，單位要相同
// 插值#{}: 變量替換
$color-arr: red yellow, green;
$color-map: (h1:16px, h2:32px, h3:64px);
@each $color in $color-arr{ // .item-red{color:red}
    @warn "輸出： #{$color}";   //@error, @debug
    .item-#{$color}{
        color: $color;
    }
}  
@each $key, $value in $color-map {  //h1{font-size:16px;color:red}
    #{$key}{
        font-size: $value
    }
    @if $key == h1 {
        #{$key}{
            color: red
        }
    }
}
@for $i from 0 through 3 {  //.item-1{font-size:12px}
    @if $i != 0{
        .item.#{$i} {
            font-size: round($i* 12)/2; //四舍五入后除法運算
        }
    }
}

$types : 0;
$type-width : "10"+"px";    // “+”將兩個字符連接
@while $types < 3 {     // while2{width:12px}
    .while-#{$types} {
        width : $type-width + $types;
    }
    $types : $types + 1;
}
// 函數
.test1 {
    content: unquote("'Hello Sass!'");  //刪除函數前后單（雙）引號 content:"Hello Sass"
}
.test2 {
    content:quote('Hello') + "Sass" //將字符創轉成雙引號
}
.test3{
    content: to-upper-case(aAa); //將字符串轉大小，To-lower-case()小寫
}
.test4{
    width : precentage(20px / 200px);   //將一個不帶單位的數轉換成百分比值
}
.test5{
    width: ceil(12.3)   //取整大於本身（13）; floor取整小於本身; abs返回一個數的絕對值
}
.test6{
    width:random() *100px // 用來獲取一個隨機數
}
</style>