前端達人 - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

302021-8

引入echars5.0報錯“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

問題

引入 echars 5.0 遇到報錯 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

解決

引入方式改為

import * as echarts from 'echarts'; // 或 const echarts = require('echarts'); 
            

                
                    1
                

                
                    2
                

                
                    3

簡單粗暴快速解決

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2695)

302021-8

CSS3 元素轉圈動畫（元素旋轉動畫）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 轉圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定義的動畫名稱
      1s : 動畫時間
      linear : 動畫以何種運行軌跡完成一個周期
      infinite :規定動畫應該無限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>

復制代碼

分類: CSS

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1918)

302021-8

CSS3 元素轉圈動畫（元素旋轉動畫）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css 轉圈</title> <style> .turn{ width:100px; height: 100px; background: aqua; animation:turn 1s linear infinite; margin: 100px auto; } /* turn : 定義的動畫名稱
      1s : 動畫時間
      linear : 動畫以何種運行軌跡完成一個周期
      infinite :規定動畫應該無限次播放 */ @keyframes turn{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <div class="turn"></div> </body> </html>

復制代碼

分類: CSS

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2294)

272021-8

Vue中動畫的實現從基本動畫，到炫酷動畫?？催@一篇就夠了

文章目錄

Vue中的基本動畫實現

直接一點，基本動畫的步驟

在需要加動畫的地方，加入transition

<transition> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

在style中寫vue已定義好的類名

 進入前和結束后的狀態
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

這樣就已經完成了基本動畫了，上完整代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.min.js"></script> <style> 進入前和結束后的狀態 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">顯示/隱藏</button> <transition> <P v-if="isNum">我是一只小小鳥</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50

動畫類名的重定義

只需要在transition標簽上添加一個name屬性，然后把類名中v改成你定義的類名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

 進入前和結束后的狀態
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

使用第三方的動畫庫

第三方的動畫庫有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity動畫、AlloyStick骨骼動畫引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就選擇其中一個庫做示范其他都一樣

在使用第三方庫之前，需要在，你要做動畫的標簽上加個基本類
animated，這個基本類是根據每個庫不一樣而定的，
我們要用Animated，所以需要加

<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

接著就是引入第三方庫，你們可以下載。
我比較懶，我就直接npm下載了。

npm install animate.css --save  


    
        1

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  


    
        1

寫上類名，就行了，，提示，千萬別下錯文件，不然動畫也無法實現

 <!-- 進入用lightSpeedIn    離開用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    
        1
    

    
        2
    

    
        3

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://www.syprn.cn/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍藍設計</a>(&nbsp;<a href="http://www.syprn.cn/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">www.syprn.cn&nbsp;</a>)是一家專注而深入的<a href="http://www.syprn.cn/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面設計公司</a>，為期望卓越的國內外企業提供卓越的UI界面設計、<a href="http://www.syprn.cn/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面設計</a><a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包裝設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">圖標定制&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用戶體驗 、交互設計、&nbsp;</a><a href="http://www.syprn.cn/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">網站建設</a><a href="http://www.syprn.cn/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://www.syprn.cn/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面設計服務</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

評論(0) 瀏覽(2688)

272021-8

Vue中select的使用

效果：

HTML：

 


    

        

            

            

        

        

            
                <div class="sel01"> 
            

        

    

    

        

            

            

        

        

            
                <select v-model="selectClassEnd" @change="selectClass($event)"> 
            

        

    

    

        

            

            

        

        

            
                <option value="NONE">未選擇</option> 
            

        

    

    

        

            

            

        

        

            
                <option v-for="(options,id) in selectClassData" :key="id" :value="options.id"> 
            

        

    

    

        

            

            

        

        

            
                {{options.title}}
            

        

    

    

        

            

            

        

        

            
                </option> 
            

        

    

    

        

            

            

        

        

            
                </select> 
            

        

    

    

        

            

            

        

        

            
                </div>

CSS：

 


    

        

            

            

        

        

            
                .sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
            

        

    

    

        

            

            

        

        

            
                .sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
            

        

    

    

        

            

            

        

        

            
                border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
            

        

    

    

        

            

            

        

        

            
                .sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
            

        

    

    

        

            

            

        

        

            
                .sel01 select:focus{outline:none;}

JS：

 


    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name:"Name",
            

        

    

    

        

            

            

        

        

            
                data(){
            

        

    

    

        

            

            

        

        

            
                return{
            

        

    

    

        

            

            

        

        

            
                selectClassData:[ //類別選擇數據或者從后臺獲取數據 
            

        

    

    

        

            

            

        

        

            
                {id:1,title:"科普類"},
            

        

    

    

        

            

            

        

        

            
                {id:2,title:"親子類"},
            

        

    

    

        

            

            

        

        

            
                {id:3,title:"制作類"},
            

        

    

    

        

            

            

        

        

            
                {id:4,title:"創意類"}
            

        

    

    

        

            

            

        

        

            
                ],
            

        

    

    

        

            

            

        

        

            
                selectClassEnd:"NONE",//類別默認選擇 
            

        

    

    

        

            

            

        

        

            
                select_class_id:"",//類別id提交報名需要 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                methods:{
            

        

    

    

        

            

            

        

        

            
                //類別選中 
            

        

    

    

        

            

            

        

        

            
                selectClass(event){
            

        

    

    

        

            

            

        

        

            
                this.select_class_id = event.target.value; //獲取option對應的value值 select_class_id是后臺約定的提交數據的名稱 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                }

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3442)

262021-8

vue-cli@3添加sass（vue項目模板封裝系列）

前言

上一期分享了如何在vue-cli3的框架中，封裝mixins，module 。本期將分享如何在vue項目中添加sass。
在這里插入圖片描述

GitHub項目地址：https://github.com/jiangjiaheng/web-template

關于sass

本文默認你對sass有一定的了解，并且閱讀過相關的官方文檔，因此本文就不在贅述關于sass的基礎知識。

在這里插入圖片描述
sass官方文檔：https://www.sass.hk/

添加方式

1. 創建項目時選擇預處理器sass

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features 


    
        1
    

    
        2
    

    
        3
    

    
        4

移動上下鍵選擇Manually select features：手動選擇創建項目的特性。

顯示如下：

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

移動上下鍵在CSS Pre-processors，按提示點擊空格鍵選擇CSS-processors。

顯示如下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus 


    
        1
    

    
        2
    

    
        3
    

    
        4

選擇第一個SCSS/SASS作為我們的CSS預處理器。

完成后項目會幫我們安裝sass-loader node-sass。

2. 手動安裝sass-loader

如果在創建項目沒有選擇CSS預處理器，我們也可以手動安裝sass-loader node-sass來集成scss。

npm install -D sass-loader node-sass 


    
        1

使用

完成添加后，我們只需要在style指定lang為scss即可，無須多余操作：

<style lang="scss" scoped>
$color: red;

h1 {
  color: $color;
}
</style>

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2422)

262021-8

Vue報錯Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解決方案

錯誤提示：




    

        

            

            

        

        

            
                ERROR  Failed to compile with 1 errors 下午6:51:57
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                error in ./src/views/Login.vue
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
            

        

    

    

        

            

            

        

        

            
                at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
            

        

    

    

        

            

            

        

        

            
                at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
            

        

    

    

        

            

            

        

        

            
                Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
            

        

    

    

        

            

            

        

        

            
                13:3-17:5 14:22-397
            

        

    

    

        

            

            

        

        

            
                @ ./src/views/Login.vue
            

        

    

    

        

            

            

        

        

            
                @ ./src/router/index.js
            

        

    

    

        

            

            

        

        

            
                @ ./src/main.js
            

        

    

    

        

            

            

        

        

            
                @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

解決方案：

找到問題所在：Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

這個問題是因為Sass的版本過高導致，所以根據提示將版本改為對應的版本就可以了，我這里是改為4.0.0版本。

下面是怎么改版本：

1.首先在IDE中找的package.json文件：

2. 然后打開該文件找到“sass-loader”，后面跟著的便是你現在的版本，根據提示將其改為對應版本即可：

3.在Terminal（終端）中輸入：cnpm install（注意用cnpm 淘寶的鏡像，用npm可能會下載不成功）

4.運行成功：npm run dev

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(7999)

252021-8

npm run dev 和 npm run serve

1、ERR引發的思考

創建好的 vue 項目直接執行 vue run dev 報錯？運行 vue run serve 就可以啟動...如下

npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log

2、dev build serve?

其實 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要這么寫。
npm run XXX是執行配置在 package.json 中的腳本，比如：

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

npm run xxx 中的 xxx 可以理解為鍵值對的 key，實際上 run 的是在 package.json 里面 scripts 配置的 value；

比如，npm run serve 實際運行的是 vue-cli-service serve；

而放在 3.0 以前運行的則是 node build/dev-server.js 文件；

這時候我們再來看上邊的問題是不是豁然了呢， scripts 中并沒有配置 dev ，所以控制臺報了 [ missing script: dev ] 的錯誤；

3、總結

npm run xxx，并不是你想運行就運行的，只有在 package.json scripts 配置了，你才能 run 的，所以不是所有的項目都能 npm run dev/build。

要了解這些命令做了什么，就要去scripts中看具體執行的是什么代碼。

這里就像是一些命令的快捷方式，免去每次都要輸入很長的的命令（比如 serve 那行）

一般項目都會有 build, dev, unit 等，所以起名，最起碼要從名字上基本能看出來是干什么的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1898)

252021-8

Vue.js——十分鐘入門Vuex

一. 什么是Vuex?

Vuex

Vuex是一個專門為Vue.js應用程序開發的狀態管理模式, 它采用集中式存儲管理所有組件的公共狀態, 并以相應的規則保證狀態以一種可預測的方式發生變化.

Vuex核心

Vuex核心

上圖中綠色虛線包裹起來的部分就是Vuex的核心, state中保存的就是公共狀態, 改變state的唯一方式就是通過mutations進行更改. 可能你現在看這張圖有點不明白, 等經過本文的解釋和案例演示, 再回來看這張圖, 相信你會有更好的理解.

二. 為什么要使用Vuex?

試想這樣的場景, 比如一個Vue的根實例下面有一個根組件名為App.vue, 它下面有兩個子組件A.vue和B.vue, App.vue想要與A.vue或者B.vue通訊可以通過props傳值的方式, 但是如果A.vue和B.vue之間的通訊就很麻煩了, 他們需要共有的父組件通過自定義事件進行實現, A組件想要和B組件通訊往往是這樣的:

組件通訊

組件通訊

A組件說: "報告老大, 能否幫我托個信給小弟B" => dispatch一個事件給App
App老大說: "包在我身上, 它需要監聽A組件的dispatch的時間, 同時需要broadcast一個事件給B組件"
B小弟說: "信息已收到", 它需要on監聽App組件分發的事件

這只是一條通訊路徑, 如果父組件下有多個子組件, 子組件之間通訊的路徑就會變的很繁瑣, 父組件需要監聽大量的事件, 還需要負責分發給不同的子組件, 很顯然這并不是我們想要的組件化的開發體驗.

Vuex就是為了解決這一問題出現的

三.如何引入Vuex?

下載vuex: npm install vuex --save
在main.js添加:

import Vuex from 'vuex' Vue.use( Vuex ); const store = new Vuex.Store({ //待添加 }) new Vue({ el: '#app', store, render: h => h(App) })

四. Vuex的核心概念?

在介紹Vuex的核心概念之前, 我使用vue-cli初始化了一個demo, 準備以代碼的形式來說明Vuex的核心概念, 大家可以在github上的master分支進行下載.這個demo分別有兩個組件ProductListOne.vue和ProductListTwo.vue, 在App.vue的datat中保存著共有的商品列表, 代碼和初始化的效果如下圖所示:

初始化效果

初始化效果

//App.vue中的初始化代碼 <template> <div id="app"> <product-list-one v-bind:products="products"></product-list-one> <product-list-two v-bind:products="products"></product-list-two> </div> </template> <script> import ProductListOne from './components/ProductListOne.vue' import ProductListTwo from './components/ProductListTwo.vue' export default { name: 'app', components: { 'product-list-one': ProductListOne, 'product-list-two': ProductListTwo }, data () { return { products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] } } } </script> <style> body{ font-family: Ubuntu; color: #555; } </style>

//ProductListOne.vue <template> <div id="product-list-one"> <h2>Product List One</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-one{ background: #FFF8B1; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-one ul{ padding: 0; } #product-list-one li{ display: inline-block; margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #E8800C; } </style>

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> </ul> </div> </template> <script> export default { props: ['products'], data () { return { } } } </script> <style scoped> #product-list-two{ background: #D1E4FF; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); margin-bottom: 30px; padding: 10px 20px; } #product-list-two ul{ padding: 0; list-style-type: none; } #product-list-two li{ margin-right: 10px; margin-top: 10px; padding: 20px; background: rgba(255,255,255,0.7); } .price{ font-weight: bold; color: #860CE8; display: block; } </style>

核心概念1: State

state就是Vuex中的公共的狀態, 我是將state看作是所有組件的data, 用于保存所有組件的公共數據.

此時我們就可以把App.vue中的兩個組件共同使用的data抽離出來, 放到state中,代碼如下:

//main.js import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' Vue.use( Vuex ) const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] } }) new Vue({ el: '#app', store, render: h => h(App) })

此時,ProductListOne.vue和ProductListTwo.vue也需要做相應的更改

//ProductListOne.vue export default { data () { return { products : this.$store.state.products //獲取store中state的數據 } } }

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products //獲取store中state的數據 } } }

此時的頁面如下圖所示, 可以看到, 將公共數據抽離出來后, 頁面沒有發生變化.

state效果

到此處的Github倉庫中代碼為: 分支code01

核心概念2: Getters

我將getters屬性理解為所有組件的computed屬性, 也就是計算屬性. vuex的官方文檔也是說到可以將getter理解為store的計算屬性, getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

此時,我們可以在main.js中添加一個getters屬性, 其中的saleProducts對象將state中的價格減少一半(除以2)

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ //添加getters saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } } })

將productListOne.vue中的products的值更換為this.$store.getters.saleProducts

export default { data () { return { products : this.$store.getters.saleProducts } } }

現在的頁面中,Product List One中的每項商品的價格都減少了一半

getters效果

getters效果

到此處的Github倉庫中代碼為: 分支code02

核心概念3: Mutations

我將mutaions理解為store中的methods, mutations對象中保存著更改數據的回調函數,該函數名官方規定叫type, 第一個參數是state, 第二參數是payload, 也就是自定義的參數.

下面,我們在main.js中添加mutations屬性,其中minusPrice這個回調函數用于將商品的價格減少payload這么多, 代碼如下:

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ //添加mutations minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } } })

在ProductListTwo.vue中添加一個按鈕,為其添加一個點擊事件, 給點擊事件觸發minusPrice方法

//ProductListTwo.vue <template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">減少價格</button> //添加按鈕 </ul> </div> </template>

在ProductListTwo.vue中注冊minusPrice方法, 在該方法中commitmutations中的minusPrice這個回調函數
注意:調用mutaions中回調函數, 只能使用store.commit(type, payload)

//ProductListTwo.vue export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); //提交`minusPrice,payload為2 } } }

添加按鈕, 可以發現, Product List Two中的價格減少了2, 當然你可以自定義payload,以此自定義減少對應的價格.

mutations效果

(Product List One中的價格沒有發生變化，原因是getter 監聽的是map方法產生的新對象)

到此處的Github倉庫中代碼為: 分支code03

核心概念4: Actions

actions 類似于 mutations，不同在于：

actions提交的是mutations而不是直接變更狀態
actions中可以包含異步操作, mutations中絕對不允許出現異步
actions中的回調函數的第一個參數是context, 是一個與store實例具有相同屬性和方法的對象
此時,我們在store中添加actions屬性, 其中minusPriceAsync采用setTimeout來模擬異步操作,延遲2s執行該方法用于異步改變我們剛才在mutaions中定義的minusPrice

//main.js const store = new Vuex.Store({ state:{ products: [ {name: '鼠標', price: 20}, {name: '鍵盤', price: 40}, {name: '耳機', price: 60}, {name: '顯示屏', price: 80} ] }, getters:{ saleProducts: (state) => { let saleProducts = state.products.map( product => { return { name: product.name, price: product.price / 2 } }) return saleProducts; } }, mutations:{ minusPrice (state, payload ) { let newPrice = state.products.forEach( product => { product.price -= payload }) } }, actions:{ //添加actions minusPriceAsync( context, payload ) { setTimeout( () => { context.commit( 'minusPrice', payload ); //context提交 }, 2000) } } })

在ProductListTwo.vue中添加一個按鈕,為其添加一個點擊事件, 給點擊事件觸發minusPriceAsync方法

<template> <div id="product-list-two"> <h2>Product List Two</h2> <ul> <li v-for="product in products"> <span class="name">{{ product.name }}</span> <span class="price">${{ product.price }}</span> </li> <button @click="minusPrice">減少價格</button> <button @click="minusPriceAsync">異步減少價格</button> //添加按鈕 </ul> </div> </template>

在ProductListTwo.vue中注冊minusPriceAsync方法, 在該方法中dispatchactions中的minusPriceAsync這個回調函數

export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); }, minusPriceAsync() { this.$store.dispatch('minusPriceAsync', 5); //分發actions中的minusPriceAsync這個異步函數 } } }

添加按鈕, 可以發現, Product List Two中的價格延遲2s后減少了5

actions效果

到此處的Github倉庫中代碼為: 分支code04

核心概念5: Modules

由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的狀態 store.state.b // -> moduleB 的狀態

作者：EduMedia_熠輝

鏈接：https://www.jianshu.com/p/a804606ad8e9

來源：簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1621)

242021-8

Vue中使用定時器setInterval和setTimeout

js中定時器有兩種，一個是循環執行setInterval，另一個是定時執行setTimeout

一、循環執行（setInterval）

顧名思義，循環執行就是設置一個時間間隔，每過一段時間都會執行一次這個方法,直到這個定時器被銷毀掉

用法是setInterval（“方法名或方法”，“延時”），第一個參數為方法名或者方法，注意為方法名的時候不要加括號,第二個參數為時間間隔

復制代碼

<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  }; </script>

復制代碼

上面的例子就是頁面初始化的時候創建了一個定時器setInterval，時間間隔為1秒，每一秒都會調用一次函數get，從而使value的值加一。

二、定時執行（setTimeout）

定時執行setTimeout是設置一個時間，等待時間到達的時候只執行一次，但是執行完以后定時器還在，只是沒有運行

用法是setTimeout(“方法名或方法”, “延時”); 第一個參數為方法名或者方法，注意為方法名的時候不要加括號,第二個參數為時間間隔

復制代碼

<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  }; </script>

復制代碼

上面是頁面初始化時候創建一個定時器setTimeout，只在1秒后執行一次方法。

定時器需要在頁面銷毀的時候清除掉，不然會一直存在?。?！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1772)

« 1 ... 28 29 30 31 32 33 34 ... 77 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合