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 安裝請求模組

1 2	入口檔案main.js<br>importAxios from'axios' Vue.prototype.$axios = Axios//掛載到vue上<br><br>元件使用<br>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>