<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>

首頁

052023-1

VUE&Element簡單介紹。

目錄

1、基本介紹

3、生命周期

1、基本介紹

2、Element 布局

一、VUE

1、基本介紹

? 概述

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫。

我們之前也學習過后端的框架 `Mybatis` ，`Mybatis` 是用來簡化 `jdbc` 代碼編寫的；而 `VUE` 是前端的框架，是用來簡化 `JavaScript` 代碼編寫的。前面的綜合性案例，里面進行了大量的DOM操作，如下

使用 `VUE` 后，這部分代碼我們就不需要再寫了。那么 `VUE` 是如何簡化 DOM 書寫呢？基于MVVM(Model-View-ViewModel)思想，實現數據的雙向綁定，將編程的關注點放在數據上。之前我們是將關注點放在了 DOM 操作上；而要了解 `MVVM` 思想，必須先了解 `MVC` 思想，如下圖就是 `MVC` 思想圖解

其中的C 就是咱們 js 代碼，M 就是數據，而 V 是頁面上展示的內容，如下圖：

`MVC` 思想是沒法進行雙向綁定的。雙向綁定是指當數據模型數據發生變化時，頁面展示的會隨之發生變化，而如果表單數據發生變化，綁定的模型數據也隨之發生變化。接下來了解`MVVM` 思想，如下圖是三個組件圖解：

圖中的 `Model` 就是我們的數據，`View` 是視圖，也就是頁面標簽，用戶可以通過瀏覽器看到的內容；`Model` 和 `View` 是通過 `ViewModel` 對象進行雙向綁定的，而 `ViewModel` 對象是 `Vue` 提供的。雙向綁定的效果：下圖是提前準備的代碼寫出來的，輸入框綁定了 `username` 模型數據，而在頁面上也使用 `{{}}` 綁定了 `username` 模型數據

通過瀏覽器打開該頁面可以看到如下頁面

當我們在輸入框中輸入內容，而輸入框后面隨之實時的展示我們輸入的內容，這就是雙向綁定的效果。

? 快速入門

Vue 使用起來是比較簡單的，總共分為如下三步：

1. 新建 HTML 頁面，引入 Vue.js文件

<script src="js/vue.js"></scrip>

2. 在JS代碼區域，創建Vue核心對象，進行數據綁定

 
    

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                           el: "#app",
                

            

        

        

            

                

                

            

            

                
                           data() {
                

            

        

        

            

                

                

            

            

                
                               return {
                

            

        

        

            

                

                

            

            

                
                                   username: "" 
                

            

        

        

            

                

                

            

            

                
                               }
                

            

        

        

            

                

                

            

            

                
                           }
                

            

        

        

            

                

                

            

            

                
                       });

創建 Vue 對象時，需要傳遞一個 js 對象，而該對象中需要如下屬性：

● `el` ：用來指定哪個地方的標簽受 Vue 管理。該屬性取值 `#app` 中的 `app` 需要是受管理的標簽的id屬性值
● `data` ：用來定義數據模型
● `methods` ：用來定義函數。這個我們在后面就會用到

3. 編寫視圖

 
    

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

                
                           <input name="username" v-model="username" > 
                

            

        

        

            

                

                

            

            

                
                           {{username}}
                

            

        

        

            

                

                

            

            

                
                       </div>

`{{}}` 是 Vue 中定義的 `插值表達式` ，在里面寫數據模型，到時候會將該模型的數據值展示在這個位置。

? 整體代碼如下：

 
    

        

            

                

                

            

            

                
                    <!DOCTYPE html> 
                

            

        

        

            

                

                

            

            

                
                    <html lang="en"> 
                

            

        

        

            

                

                

            

            

                
                    <head> 
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8"> 
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title> 
                

            

        

        

            

                

                

            

            

                
                    </head> 
                

            

        

        

            

                

                

            

            

                
                    <body> 
                

            

        

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <input v-model="username"> 
                

            

        

        

            

                

                

            

            

                
                        <!--插值表達式--> 
                

            

        

        

            

                

                

            

            

                
                        {{username}}
                

            

        

        

            

                

                

            

            

                
                    </div> 
                

            

        

        

            

                

                

            

            

                
                    <script src="js/vue.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <script> 
                

            

        

        

            

                

                

            

            

                
                        //1. 創建Vue核心對象 
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){  // data() 是 ECMAScript 6 版本的新的寫法 
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:"" 
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                            /*data: function () { 
                

            

        

        

            

                

                

            

            

                
                                return { 
                

            

        

        

            

                

                

            

            

                
                                    username:"" 
                

            

        

        

            

                

                

            

            

                
                                } 
                

            

        

        

            

                

                

            

            

                
                            }*/ 
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    </script> 
                

            

        

        

            

                

                

            

            

                
                    </body> 
                

            

        

        

            

                

                

            

            

                
                    </html>

2、Vue 指令

指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同含義。例如：v-if，v-for…

? v-bind & v-model 指令

? v-bind

該指令可以給標簽原有屬性綁定模型數據。這樣模型數據發生變化，標簽屬性值也隨之發生變化，例如：

<a v-bind:href="url">百度一下</a>

上面的 `v-bind:"` 可以簡化寫成 `:` ，如下：

 
    

        

            

                

                

            

            

                
                    <!-- 
                

            

        

        

            

                

                

            

            

                
                          v-bind 可以省略 
                

            

        

        

            

                

                

            

            

                
                      --> 
                

            

        

        

            

                

                

            

            

                
                      <a :href="url">百度一下</a>

? v-model

該指令可以給表單項標簽綁定模型數據。這樣就能實現雙向綁定效果。例如：

<input name="username" v-model="username">

? 代碼演示：

 
    

        

            

                

                

            

            

                
                    <!DOCTYPE html> 
                

            

        

        

            

                

                

            

            

                
                    <html lang="en"> 
                

            

        

        

            

                

                

            

            

                
                    <head> 
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8"> 
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title> 
                

            

        

        

            

                

                

            

            

                
                    </head> 
                

            

        

        

            

                

                

            

            

                
                    <body> 
                

            

        

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <a v-bind:href="url">點擊一下</a> 
                

            

        

        

            

                

                

            

            

                
                        <a :href="url">點擊一下</a> 
                

            

        

        

            

                

                

            

            

                
                        <input v-model="url"> 
                

            

        

        

            

                

                

            

            

                
                    </div> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <script src="js/vue.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <script> 
                

            

        

        

            

                

                

            

            

                
                        //1. 創建Vue核心對象 
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:"",
                

            

        

        

            

                

                

            

            

                
                                    url:"https://www.baidu.com" 
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script> 
                

            

        

        

            

                

                

            

            

                
                    </body> 
                

            

        

        

            

                

                

            

            

                
                    </html>

通過瀏覽器打開上面頁面，并且使用檢查查看超鏈接的路徑，該路徑會根據輸入框輸入的路徑變化而變化，這是因為超鏈接和輸入框綁定的是同一個模型數據

? v-on 指令

我們在頁面定義一個按鈕，并給該按鈕使用 `v-on` 指令綁定單擊事件，html代碼如下：

<input type="button" value="一個按鈕" v-on:click="show()">

而使用 `v-on` 時還可以使用簡化的寫法，將 `v-on:` 替換成 `@`，html代碼如下

<input type="button" value="一個按鈕" @click="show()">

上面代碼綁定的 `show()` 需要在 Vue 對象中的 `methods` 屬性中定義出來

 
    

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                        el: "#app",
                

            

        

        

            

                

                

            

            

                
                        methods: {
                

            

        

        

            

                

                

            

            

                
                            show(){
                

            

        

        

            

                

                

            

            

                
                                alert("我被點了");
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        }
                

            

        

        

            

                

                

            

            

                
                    });

注意：`v-on:` 后面的事件名稱是之前原生事件屬性名去掉on。
例如：
● 單擊事件：事件屬性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦點事件：事件屬性名是 onblur，而在vue中使用時 `v-on:blur`

? 整體頁面代碼如下：

 
    

        

            

                

                

            

            

                
                    <!DOCTYPE html> 
                

            

        

        

            

                

                

            

            

                
                    <html lang="en"> 
                

            

        

        

            

                

                

            

            

                
                    <head> 
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8"> 
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title> 
                

            

        

        

            

                

                

            

            

                
                    </head> 
                

            

        

        

            

                

                

            

            

                
                    <body> 
                

            

        

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <input type="button" value="一個按鈕" v-on:click="show()"><br> 
                

            

        

        

            

                

                

            

            

                
                        <input type="button" value="一個按鈕" @click="show()"> 
                

            

        

        

            

                

                

            

            

                
                    </div> 
                

            

        

        

            

                

                

            

            

                
                    <script src="js/vue.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <script> 
                

            

        

        

            

                

                

            

            

                
                        //1. 創建Vue核心對象 
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:"",
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            },
                

            

        

        

            

                

                

            

            

                
                            methods:{
                

            

        

        

            

                

                

            

            

                
                                show(){
                

            

        

        

            

                

                

            

            

                
                                    alert("我被點了...");
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script> 
                

            

        

        

            

                

                

            

            

                
                    </body> 
                

            

        

        

            

                

                

            

            

                
                    </html>

? 條件判斷指令

接下來通過代碼演示一下。在 Vue中定義一個 `count` 的數據模型，如下

 
    

        

            

                

                

            

            

                
                    //1. 創建Vue核心對象 
                

            

        

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                        el:"#app",
                

            

        

        

            

                

                

            

            

                
                        data(){
                

            

        

        

            

                

                

            

            

                
                            return {
                

            

        

        

            

                

                

            

            

                
                                count:3 
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        }
                

            

        

        

            

                

                

            

            

                
                    });

現在要實現，當 `count` 模型的數據是3時，在頁面上展示 `div1` 內容；當 `count` 模型的數據是4時，在頁面上展示 `div2` 內容；`count` 模型數據是其他值時，在頁面上展示 `div3`。這里為了動態改變模型數據 `count` 的值，再定義一個輸入框綁定 `count` 模型數據。html 代碼如下：

 
    

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <div v-if="count == 3">div1</div> 
                

            

        

        

            

                

                

            

            

                
                        <div v-else-if="count == 4">div2</div> 
                

            

        

        

            

                

                

            

            

                
                        <div v-else>div3</div> 
                

            

        

        

            

                

                

            

            

                
                        <hr> 
                

            

        

        

            

                

                

            

            

                
                        <input v-model="count"> 
                

            

        

        

            

                

                

            

            

                
                    </div>

? 整體頁面代碼如下：

 
    

        

            

                

                

            

            

                
                    <!DOCTYPE html> 
                

            

        

        

            

                

                

            

            

                
                    <html lang="en"> 
                

            

        

        

            

                

                

            

            

                
                    <head> 
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8"> 
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title> 
                

            

        

        

            

                

                

            

            

                
                    </head> 
                

            

        

        

            

                

                

            

            

                
                    <body> 
                

            

        

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <div v-if="count == 3">div1</div> 
                

            

        

        

            

                

                

            

            

                
                        <div v-else-if="count == 4">div2</div> 
                

            

        

        

            

                

                

            

            

                
                        <div v-else>div3</div> 
                

            

        

        

            

                

                

            

            

                
                        <hr> 
                

            

        

        

            

                

                

            

            

                
                        <input v-model="count"> 
                

            

        

        

            

                

                

            

            

                
                    </div> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <script src="js/vue.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <script> 
                

            

        

        

            

                

                

            

            

                
                        //1. 創建Vue核心對象 
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    count:3 
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script> 
                

            

        

        

            

                

                

            

            

                
                    </body> 
                

            

        

        

            

                

                

            

            

                
                    </html>

通過瀏覽器打開頁面并在輸入框輸入不同的值，效果如下

然后我們在看看 `v-show` 指令的效果，如果模型數據 `count ` 的值是3時，展示 `div v-show` 內容，否則不展示，html頁面代碼如下

 
    

        

            

                

                

            

            

                
                    <div v-show="count == 3">div v-show</div> 
                

            

        

        

            

                

                

            

            

                
                    <br> 
                

            

        

        

            

                

                

            

            

                
                    <input v-model="count">

瀏覽器打開效果如下：

通過上面的演示，發現 `v-show` 和 `v-if` 效果一樣，那它們到底有什么區別呢？我們根據瀏覽器的檢查功能查看源代碼：

通過上圖可以看出 `v-show` 不展示的原理是給對應的標簽添加 `display` css屬性，并將該屬性值設置為 `none` ，這樣就達到了隱藏的效果。而 `v-if` 指令是條件不滿足時根本就不會渲染。

? v-for 指令

這個指令看到名字就知道是用來遍歷的，該指令使用的格式如下：

 
    

        

            

                

                

            

            

                
                    <標簽 v-for="變量名 in 集合模型數據"> 
                

            

        

        

            

                

                

            

            

                
                        {{變量名}}
                

            

        

        

            

                

                

            

            

                
                    </標簽>

注意：需要循環那個標簽，`v-for` 指令就寫在那個標簽上。

如果在頁面需要使用到集合模型數據的索引，就需要使用如下格式：

 
    

        

            

                

                

            

            

                
                    <標簽 v-for="(變量名,索引變量) in 集合模型數據"> 
                

            

        

        

            

                

                

            

            

                
                        <!--索引變量是從0開始，所以要表示序號的話，需要手動的加1--> 
                

            

        

        

            

                

                

            

            

                
                       {{索引變量 + 1}} {{變量名}}
                

            

        

        

            

                

                

            

            

                
                    </標簽>

? 代碼演示：

 
    

        

            

                

                

            

            

                
                    <!DOCTYPE html> 
                

            

        

        

            

                

                

            

            

                
                    <html lang="en"> 
                

            

        

        

            

                

                

            

            

                
                    <head> 
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8"> 
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title> 
                

            

        

        

            

                

                

            

            

                
                    </head> 
                

            

        

        

            

                

                

            

            

                
                    <body> 
                

            

        

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <div v-for="addr in addrs"> 
                

            

        

        

            

                

                

            

            

                
                            {{addr}} <br> 
                

            

        

        

            

                

                

            

            

                
                        </div> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        <hr> 
                

            

        

        

            

                

                

            

            

                
                        <div v-for="(addr,i) in addrs"> 
                

            

        

        

            

                

                

            

            

                
                            {{i+1}}--{{addr}} <br> 
                

            

        

        

            

                

                

            

            

                
                        </div> 
                

            

        

        

            

                

                

            

            

                
                    </div> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <script src="js/vue.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <script> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        //1. 創建Vue核心對象 
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    addrs:["北京","上海","西安"]
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script> 
                

            

        

        

            

                

                

            

            

                
                    </body> 
                

            

        

        

            

                

                

            

            

                
                    </html>

通過瀏覽器打開效果如下

3、生命周期

生命周期的八個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法，這些生命周期方法也被稱為鉤子方法。

下圖是 Vue 官網提供的從創建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數

看到上面的圖，大家無需過多的關注這張圖。這些鉤子方法我們只關注 `mounted` 就行了。

`mounted`：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以后我們會在該方法中發送異步請求，加載數據。

二、Element

1、基本介紹

? 概述

Element：是餓了么公司前端開發團隊提供的一套基于 Vue 的網站組件庫，用于快速構建網頁。

Element 提供了很多組件（組成網頁的部件）供我們使用。例如超鏈接、按鈕、圖片、表格等等~

如下圖左邊的是我們編寫頁面看到的按鈕，上圖右邊的是 Element 提供的頁面效果，效果一目了然。

我們學習 Element 其實就是學習怎么從官網拷貝組件到我們自己的頁面并進行修改，官網網址是：元素 - 全球最受歡迎的 Vue UI 框架 (eleme.cn)

進入官網能看到如下頁面

接下來直接點擊 `組件` ，頁面如下

2、Element 布局

Element 提供了兩種布局方式，分別是：

● Layout 布局
● Container 布局容器

? Layout 局部

通過基礎的 24 分欄，迅速簡便地創建布局。也就是默認將一行分為 24 欄，根據頁面要求給每一列設置所占的欄數。

在左菜單欄找到 `Layout 布局` ，然后找到自己喜歡的按鈕樣式，點擊 `顯示代碼` ，在下面就會展示出對應的代碼，顯示出的代碼中有樣式，有html標簽。將樣式拷貝我們自己頁面的 `head` 標簽內，將html標簽拷貝到 `<div id="app"></div>` 標簽內。

? 整體頁面代碼如下：

 
    

        

            

                

                

            

            

                
                    <!DOCTYPE html> 
                

            

        

        

            

                

                

            

            

                
                    <html lang="en"> 
                

            

        

        

            

                

                

            

            

                
                    <head> 
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8"> 
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        <style> 
                

            

        

        

            

                

                

            

            

                
                            .el-row {
                

            

        

        

            

                

                

            

            

                
                                margin-bottom: 20px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .el-col {
                

            

        

        

            

                

                

            

            

                
                                border-radius: 4px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .bg-purple-dark {
                

            

        

        

            

                

                

            

            

                
                                background: #99a9bf;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .bg-purple {
                

            

        

        

            

                

                

            

            

                
                                background: #d3dce6;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .bg-purple-light {
                

            

        

        

            

                

                

            

            

                
                                background: #e5e9f2;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .grid-content {
                

            

        

        

            

                

                

            

            

                
                                border-radius: 4px;
                

            

        

        

            

                

                

            

            

                
                                min-height: 36px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                            .row-bg {
                

            

        

        

            

                

                

            

            

                
                                padding: 10px 0;
                

            

        

        

            

                

                

            

            

                
                                background-color: #f9fafc;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        </style> 
                

            

        

        

            

                

                

            

            

                
                    </head> 
                

            

        

        

            

                

                

            

            

                
                    <body> 
                

            

        

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <el-row> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        </el-row> 
                

            

        

        

            

                

                

            

            

                
                        <el-row> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        </el-row> 
                

            

        

        

            

                

                

            

            

                
                        <el-row> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        </el-row> 
                

            

        

        

            

                

                

            

            

                
                        <el-row> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        </el-row> 
                

            

        

        

            

                

                

            

            

                
                        <el-row> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        </el-row> 
                

            

        

        

            

                

                

            

            

                
                    </div> 
                

            

        

        

            

                

                

            

            

                
                    <script src="js/vue.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <script src="element-ui/lib/index.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <script> 
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app" 
                

            

        

        

            

                

                

            

            

                
                        })
                

            

        

        

            

                

                

            

            

                
                    </script> 
                

            

        

        

            

                

                

            

            

                
                    </body> 
                

            

        

        

            

                

                

            

            

                
                    </html>

現在需要添加一行，要求該行顯示8個格子，通過計算每個格子占 3 欄，具體的html 代碼如下

 
    

        

            

                

                

            

            

                
                    <!-- 
                

            

        

        

            

                

                

            

            

                
                    添加一行，8個格子  24/8 = 3 
                

            

        

        

            

                

                

            

            

                
                    --> 
                

            

        

        

            

                

                

            

            

                
                    <el-row> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col> 
                

            

        

        

            

                

                

            

            

                
                    </el-row>

? Container 布局容器

用于布局的容器組件，方便快速搭建頁面的基本結構。如下圖就是布局容器效果。

如下圖是官網提供的 Container 布局容器實例：

該效果代碼中包含了樣式、頁面標簽、模型數據。將里面的樣式 `<style>` 拷貝到我們自己頁面的 `head` 標簽中；將html標簽拷貝到 `<div id="app"></div>` 標簽中，再將數據模型拷貝到 `vue` 對象的 `data()` 中。

? 整體頁面代碼如下：

 
    

        

            

                

                

            

            

                
                    <!DOCTYPE html> 
                

            

        

        

            

                

                

            

            

                
                    <html lang="en"> 
                

            

        

        

            

                

                

            

            

                
                    <head> 
                

            

        

        

            

                

                

            

            

                
                        <meta charset="UTF-8"> 
                

            

        

        

            

                

                

            

            

                
                        <title>Title</title> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                        <style> 
                

            

        

        

            

                

                

            

            

                
                            .el-header {
                

            

        

        

            

                

                

            

            

                
                                background-color: #B3C0D1;
                

            

        

        

            

                

                

            

            

                
                                color: #333;
                

            

        

        

            

                

                

            

            

                
                                line-height: 60px;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                            .el-aside {
                

            

        

        

            

                

                

            

            

                
                                color: #333;
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        </style> 
                

            

        

        

            

                

                

            

            

                
                    </head> 
                

            

        

        

            

                

                

            

            

                
                    <body> 
                

            

        

        

            

                

                

            

            

                
                    <div id="app"> 
                

            

        

        

            

                

                

            

            

                
                        <el-container style="height: 500px; border: 1px solid #eee"> 
                

            

        

        

            

                

                

            

            

                
                            <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> 
                

            

        

        

            

                

                

            

            

                
                                <el-menu :default-openeds="['1', '3']"> 
                

            

        

        

            

                

                

            

            

                
                                    <el-submenu index="1"> 
                

            

        

        

            

                

                

            

            

                
                                        <template slot="title"><i class="el-icon-message"></i>導航一</template> 
                

            

        

        

            

                

                

            

            

                
                                        <el-menu-item-group> 
                

            

        

        

            

                

                

            

            

                
                                            <template slot="title">分組一</template> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="1-1">選項1</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="1-2">選項2</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group> 
                

            

        

        

            

                

                

            

            

                
                                        <el-menu-item-group title="分組2"> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="1-3">選項3</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group> 
                

            

        

        

            

                

                

            

            

                
                                        <el-submenu index="1-4"> 
                

            

        

        

            

                

                

            

            

                
                                            <template slot="title">選項4</template> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="1-4-1">選項4-1</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-submenu> 
                

            

        

        

            

                

                

            

            

                
                                    </el-submenu> 
                

            

        

        

            

                

                

            

            

                
                                    <el-submenu index="2"> 
                

            

        

        

            

                

                

            

            

                
                                        <template slot="title"><i class="el-icon-menu"></i>導航二</template> 
                

            

        

        

            

                

                

            

            

                
                                        <el-submenu index="2-1"> 
                

            

        

        

            

                

                

            

            

                
                                            <template slot="title">選項1</template> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="2-1-1">選項1-1</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-submenu> 
                

            

        

        

            

                

                

            

            

                
                                    </el-submenu> 
                

            

        

        

            

                

                

            

            

                
                                    <el-submenu index="3"> 
                

            

        

        

            

                

                

            

            

                
                                        <template slot="title"><i class="el-icon-setting"></i>導航三</template> 
                

            

        

        

            

                

                

            

            

                
                                        <el-menu-item-group> 
                

            

        

        

            

                

                

            

            

                
                                            <template slot="title">分組一</template> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="3-1">選項1</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="3-2">選項2</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group> 
                

            

        

        

            

                

                

            

            

                
                                        <el-menu-item-group title="分組2"> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="3-3">選項3</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-menu-item-group> 
                

            

        

        

            

                

                

            

            

                
                                        <el-submenu index="3-4"> 
                

            

        

        

            

                

                

            

            

                
                                            <template slot="title">選項4</template> 
                

            

        

        

            

                

                

            

            

                
                                            <el-menu-item index="3-4-1">選項4-1</el-menu-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-submenu> 
                

            

        

        

            

                

                

            

            

                
                                    </el-submenu> 
                

            

        

        

            

                

                

            

            

                
                                </el-menu> 
                

            

        

        

            

                

                

            

            

                
                            </el-aside> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                            <el-container> 
                

            

        

        

            

                

                

            

            

                
                                <el-header style="text-align: right; font-size: 12px"> 
                

            

        

        

            

                

                

            

            

                
                                    <el-dropdown> 
                

            

        

        

            

                

                

            

            

                
                                        <i class="el-icon-setting" style="margin-right: 15px"></i> 
                

            

        

        

            

                

                

            

            

                
                                        <el-dropdown-menu slot="dropdown"> 
                

            

        

        

            

                

                

            

            

                
                                            <el-dropdown-item>查看</el-dropdown-item> 
                

            

        

        

            

                

                

            

            

                
                                            <el-dropdown-item>新增</el-dropdown-item> 
                

            

        

        

            

                

                

            

            

                
                                            <el-dropdown-item>刪除</el-dropdown-item> 
                

            

        

        

            

                

                

            

            

                
                                        </el-dropdown-menu> 
                

            

        

        

            

                

                

            

            

                
                                    </el-dropdown> 
                

            

        

        

            

                

                

            

            

                
                                    <span>王小虎</span> 
                

            

        

        

            

                

                

            

            

                
                                </el-header> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                                <el-main> 
                

            

        

        

            

                

                

            

            

                
                                    <el-table :data="tableData"> 
                

            

        

        

            

                

                

            

            

                
                                        <el-table-column prop="date" label="日期" width="140"> 
                

            

        

        

            

                

                

            

            

                
                                        </el-table-column> 
                

            

        

        

            

                

                

            

            

                
                                        <el-table-column prop="name" label="姓名" width="120"> 
                

            

        

        

            

                

                

            

            

                
                                        </el-table-column> 
                

            

        

        

            

                

                

            

            

                
                                        <el-table-column prop="address" label="地址"> 
                

            

        

        

            

                

                

            

            

                
                                        </el-table-column> 
                

            

        

        

            

                

                

            

            

                
                                    </el-table> 
                

            

        

        

            

                

                

            

            

                
                                </el-main> 
                

            

        

        

            

                

                

            

            

                
                            </el-container> 
                

            

        

        

            

                

                

            

            

                
                        </el-container> 
                

            

        

        

            

                

                

            

            

                
                    </div> 
                

            

        

        

            

                

                

            

            

                
                    <script src="js/vue.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <script src="element-ui/lib/index.js"></script> 
                

            

        

        

            

                

                

            

            

                
                    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> 
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <script> 
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data() {
                

            

        

        

            

                

                

            

            

                
                                const item = {
                

            

        

        

            

                

                

            

            

                
                                    date: '2016-05-02',
                

            

        

        

            

                

                

            

            

                
                                    name: '王小虎',
                

            

        

        

            

                

                

            

            

                
                                    address: '上海市普陀區金沙江路 1518 弄' 
                

            

        

        

            

                

                

            

            

                
                                };
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    tableData: Array(20).fill(item)
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        })
                

            

        

        

            

                

                

            

            

                
                    </script> 
                

            

        

        

            

                

                

            

            

                
                    </body> 
                

            

        

        

            

                

                

            

            

                
                    </html>

? 完成分頁條展示

在 Element 官網找到 `Pagination 分頁` ，在頁面主體部分找到我們需要的效果，如下

轉自：csdn

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

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

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

評論(0) 瀏覽(1089)

052023-1

缺陷修改實踐——replace函數的運用|思考？

目錄

- 介紹
- 問題出現
- 問題分析
- 解決方法
- - 優化
- 實現
- 總結

介紹

大家好，我是清風。今天給大家分享一個項目中遇到問題解決問題的案例，編程其實就是一個思考的過程，缺少思考就沒有靈魂，遇到問題先靜下心去思考，想到方法后再去實踐。我們要學會靈活變通去解決問題，掌握方法，這樣才能舉一反三，臨危不亂，遇到所有問題都能很好地去解決。

事情是這樣的，做的一個答題小程序，要求在后臺編輯題目，編輯題目是用的textarea文本域，即輸入的是文本內容，配置之后小程序里查詢顯示后臺配置的題目列表。

在這里插入圖片描述

當然在測試時后臺去配置文本內容，小程序顯示是沒有問題的。因為配置的題目是純文本，小程序里也是直接在text里顯示的，沒有問題。

后臺配置題目

在這里插入圖片描述

小程序顯示題目
在這里插入圖片描述

問題出現

問題往往只有在用的時候才會發現，用戶或管理員的各種操作才能顯現出各種問題。現在小程序里已經不能正常顯示了，有些顯示的是html格式富文本格式，有些不顯示。顯然和需求大相徑庭，已經出現問題了。

問題分析

在這里插入圖片描述

如上圖，在用的時候因為是從word文檔里直接復制過去的題目（事先在word里整理好了題目，由于各部門工作對接，先是在word文檔進行審核），直接復制會把富文本內容也攜帶過去，攜帶過去的當然也有style樣式，小程序里不顯示的原因是富文本的字體顏色是黑色字體，和小程序面背景都是黑色，導致看不到文字。打開控制臺調試，問題確實是這么出現的。

在這里插入圖片描述

word文檔編輯的題目會出現不同的富文本的樣式格式，這都會導致小程序的不正常顯示。

在這里插入圖片描述

富文本的文字顏色是黑色，這導致的小程序頁里題目的不顯示。

解決方法

既然后臺有可能出現富文本，我們直接把小程序題目的渲染方式換成富文本渲染，這樣就算是純文本也可以顯示的。而第二個問題，由于小程序頁面背景顏色是黑色，所以題目的字體顏色不能是黑色，我們做一個查找替換，把style樣式里的字體樣式替換掉就可以了。

優化

樣式可能是各種各樣的，通過查找style樣式里的字體樣式考慮的匹配太多了，比如說color屬性值可以是rgb形式，也可是rgba形式，也可能是#號顏色值形式，還有可能是英文形式顏色，所以不可取。我們換一種思路，直接把style屬性替換掉，即查找到style，換成一個無效的屬性名。案例中我們替換成了c，c是一個無效的屬性，不會觸發節點的查找和計算。

replace函數

我們用到replace函數，replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

參數

regexp/substr，必需。規定子字符串或要替換的模式的 RegExp 對象。
replacement，必需。一個字符串值。規定了替換文本或生成替換文本的函數。

請注意，regexp/substr 是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp對象，返回值是一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

實現

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

 that.setData({
          _list: res.data
        })
        let data = that.data._list
        data.forEach((element, index) => {
          var stemContent = '_list[' + index + '].stemContent'
          that.setData({
            [stemContent]: element.stemContent.replace(/style/g, 'c')
          })
          element.choiceTopicVos.forEach((item, i) => {
            var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
            that.setData({
              [listCheck]:  item.optionDes.replace(/style/g, 'c')

            })
          })
        })  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17

用到的replace函數，進行了字符串的查找替換，查找到style屬性，把它替換到了無效的屬性c，沒有了樣式屬性，從而達到了去除內聯樣式的效果，經過調試，完美解決問題。

在這里插入圖片描述

總結

在這里插入圖片描述

這是一個小問題，我為什么要拿出來說呢？拋去開發的測試流程不說，我認為它能引發一些思考。寫代碼的過程必須是一個思考的過程，怎么樣更好地去實現效果，怎么樣更簡單有效地解決問題，怎么樣優化，要去考慮一個大的方面。善于發現問題，解決問題，并不是說用了什么高級語言就鄙棄了思考，機器語言是相通的，開發中各種各樣地應用才是魅力所在。編程是一門是藝術，最重要的是你怎樣去巧妙地運用，就像解一道數學題，精絕巧妙的解法會讓人眼前一亮，增色太多。同樣都做出來了，但是你做的就顯得十分優雅！

轉自 csdn

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

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

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

評論(0) 瀏覽(1135)

032023-1

【Vue】webpack的基本使用

文章目錄

webpack的學習目標
前端工程化
webpack的基本使用

webpack的學習目標

理解什么是前端工程化
- 轉變對前端開發的認知
了解webpack的基本用法
- 為后面Vue和React課程的學習做技術儲備
不強制要求大家能手動配置 webpack
- 一定要知道webpack在項目中有什么作用
- 清除webpack中的核心概念

前端工程化

小白眼中的前端開發 vs 實際的前端開發

小白眼中的前端開發
- 會寫HTML + CSS +JavaScript就會前端開發
- 需要美化頁面樣式，就拽一個bootstrap過來
- 需要操作DOM或發起Ajax，再拽一個jquery過來
- 需要快速實現網頁布局效果，就拽一個Layui過來
實際的前端開發
- 模塊化（js的模塊化，css的模塊化，資源的模塊化）
- 組件化（復用現有的UI結構，樣式，行為）
- 規范化（目錄結構的劃分，編碼規范化，接口規范化，文檔規范化，Git分支管理）
- 自動化（自動化構建，自動部署，自動化測試）

什么是前端工程化

前端工程化指的是：在企業級的前端項目開發中，把前端開發所謂的工具，技術，流程，經驗等進行規范化，標準化。
企業中的Vue項目和React項目，都是基于工程畫的方式進行開發。

好處：前端開發自成體系，有一套標準的開發方案和流量。

前端工程化的解決方案

早期的前端工程化解決方案
- grunt
- gulp
目前主流的前端工程化解決方案
- webpack
- parcel

webpack的基本使用

什么是webpack

概念： webpack是前端項目工程化的具體解決方案。

主要功能：它提供了友好的前端模塊化開發支持，以及代碼壓縮混淆，處理瀏覽器端JavaScript的兼容性性能優化等強大的功能。

好處：讓程序員把工作的重心放到具體功能的實現上，提高了前端開發效率和項目的可維護性。

注意：目前Vue，React等前端項目，基本上都是基于webpack進行工程化開發的。

列表隔行變色項目

步驟

新建項目空白目錄，并運行npm init -y命令，初始化包管理配置文件package.json
新建src源代碼目錄
新建src->index.html首頁和src->index.js腳本文件
初始化首頁基本的結構
運行npm install jquery -s命令，安裝jQuery
通過ES6模塊化的方式導入jQuery，實現列表隔行變色的效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> ul>li{這是第$個li}*9 </body> </html>  
        

            
                1
            

            
                2
            

            
                3
            

            
                4
            

            
                5
            

            
                6
            

            
                7
            

            
                8
            

            
                9
            

            
                10
            

            
                11
            

            
                12

在這里插入圖片描述

在這里插入圖片描述
import和require導入模塊的區別
1、require對應導出的方法是module.exports,
import對應的方法是export default/export

2、require 是CommonJs的語法
import 是 ES6 的語法標準。

3、require是運行運行時加載模塊里的所有方法（動態加載），
import 是編譯的時候調用（靜態加載），不管在哪里引用都會提升到代碼頂部。

4、require 是CommonJs的語法，引入的是的是整個模塊里面的對象，
import 可以按需引入模塊里面的對象

5、require 導出是值的拷貝,
import 導出的是值的引用
6. require是node.js帶有的 CommonJS語法里的東西，可以在終端中運行
如果要在瀏覽器端運行我們要使用import這個es6語法
js代碼

//導入模塊 // const $ = require('jquery') import $ from "jquery"; //定義jquery入口函數 $(function () { $('li:odd').css('background-Color', 'red') $('li:even').css('background-Color', 'pink') })  
        

            
                1
            

            
                2
            

            
                3
            

            
                4
            

            
                5
            

            
                6
            

            
                7
            

            
                8
            

            
                9

將js文件導入index.html之后，發現沒有效果，這時我們就需要webpack工具了，將語法進行重新編譯，把es6語法轉化為es5語法。

在項目中安裝并配置webpack

npm i webpack@5.42.1 webpack-cli -D  
        

            
                1

生產依賴
在這里插入圖片描述
創建webpack.config.js配置文件并寫入

//使用node.js的導出語法向外導出一個webpack的配置對象 //導入模塊并進行導出內容，這樣寫會比直接導出內容多一個記錄信息的txt文件，當然我們也可以使用es6語法進行導入導出，大家可以私下去了解。 const { Module } = require("webpack"); Module.export = { mode: 'development' } //也可以直接導出內容 // module.export = { //     mode: 'development' // }  
        

            
                1
            

            
                2
            

            
                3
            

            
                4
            

            
                5
            

            
                6
            

            
                7
            

            
                8
            

            
                9
            

            
                10
            

            
                11

在package.json配置文件中的script中寫入聲明

在這里插入圖片描述

最后執行npm命令進行編譯，有一個注意點就是node.js版本需要是17版本以下的不然會出錯，當然應該有其他解決辦法，但博主不會，只好退回版本
執行 npm run dev 這個命令，可以看到src里的index.js和jquery.js都被壓縮了。
在這里插入圖片描述
會生成一個編譯后的文件夾

將main.js文件導入index.html.，不用導入index.js。

打開頁面就可以成功顯示了

mode的可選值
mode節點的可選值有兩個，分別是：

development
- 開發環境
- 不會對打包生成的文件進行代碼壓縮和性能優化
- 打包速度快，適合在開發階段使用。
production
- 生產環境
- 會對打包生成的文件進行代碼壓縮和性能優化
- 打包速度很慢，僅適合在項目發布階段使用
  開發的時候使用development，打包速度快，上線的時候使用production，體積小。

webpack.config.js的作用

當我們使用npm run dev這個命令的時候，會執行package里的dev里的內容，在這里插入圖片描述
dev里寫的webpack，那么它就會執行weboack.config.js這個文件里的內容，根據里面的內容再進行打包。

webpack中的默認約定

大家可能有個疑問，就是打包的時候為什么會打包index.js這個文件，它是怎么尋找的路徑等問題。

在webpack4和5的版本中，有如下的默認約定，找不到就會報錯。

默認的打包入口文件為src -> index.js
默認的輸出文件路徑為dist -> main.js

注意：可以在webpack.config.js中修改打包的默認約定。

自定義打包的入口和出口

在webpack.config.js配置文件中，通過entry節點指定打包的入口，通過output節點指定打包的出口文件夾和出口文件。

// 使用node.js的導出語法向外導出一個webpack的配置對象 const path = require("path"); module.exports = { mode: 'development', entry: path.join(__dirname, 'src/index.js'), //設置打包輸出路徑，以及輸入文件名稱 output: { //指定存放目錄 path: path.join(__dirname, 'dist1'), filename: 'new.js' } }  
        

            
                1
            

            
                2
            

            
                3
            

            
                4
            

            
                5
            

            
                6
            

            
                7
            

            
                8
            

            
                9
            

            
                10
            

            
                11
            

            
                12
            

            
                13

生成的文件就變了。
在這里插入圖片描述

webpack中的插件

當我們修改js文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，這就很麻煩我們可以通過安裝和配置第三方的插件，可以擴展webpack的能力，從而讓webpack用起來更方便，常用的webpack插件有如下兩個：

webpack-dev-server
- 類似于node.js階段用到的nodemon工具。
- 每當修改了源代碼，webpack會自動進行項目的打包和構建。
html-webpack-plugin
- webpack中的html插件（“類似于一個模板引擎插件”），
- 可以通過此插件自定制index.html頁面的內容。

webpack-dev-server

安裝webpack-dev-server

安裝命令
npm install webpack-dev-server@3.11.2 -D  
        

            
                1
            

            
                2

配置webpack-dev-server

重新配置package.json中的script里的dev內容
再次運行 npm run dev命令，重新進行項目打包
在瀏覽器中訪問本地8080端口，查看自動打包效果。

注意：webpack-dev-server會啟動一個實時打包的http服務器。
在這里插入圖片描述
這樣當我們每次修改index.js文件時，保存后就會自動打包，摁兩次ctrl+c就可以終止運行。

這種打包實際上時虛擬打包，并不是每次保存打包之后將main.js進行了修改，當我們修改代碼保存自動打包之后，我們發現頁面UI并沒有變化，那是因為main.js實際上沒有修改，訪問自動打包修改后的頁面需要訪問本地8080端口
在這個http服務器內才能訪問到修改后的內容，我們前面說了修改后的js并沒有保存到main.js中，那它保存到哪里去了？它其實被保存到了根目錄中，以內存的形式進行了保存。
文件名跟你前面設置的打包文件名一樣，雖然看不到這個文件但是可以進行訪問，我們需要把頁面引入鏈接從 new.js改成新生成的保存到內存中的new.js，完成這兩個步驟就可以真正的實現自動打包并實時演示了。

html-webpack-plugin

當我們開啟了自動打包服務功能，訪問服務器后，顯示的是根目錄，需要點擊一下文件夾，才能顯示頁面文件index.html，我們只需要把頁面文件copy一份兒到根目錄，這樣點開網頁就能直接顯示，這個webpack插件就可以實現相應的功能。

安裝

npm install html-webpack-plugin@5.3.2 -D  
        

            
                1

使用代碼

//導入相應模塊 const HtmlPluginConfig = require('html-webpack-plugin') //實例化 const HtmlPlugin = new HtmlPluginConfig(); //實例化 const HtmlPlugin = new HtmlPluginConfig({ //被復制文件的路徑 template: './src/index.html', //復制到哪 filename: './index.html' });  
        

            
                1
            

            
                2
            

            
                3
            

            
                4
            

            
                5
            

            
                6
            

            
                7
            

            
                8
            

            
                9
            

            
                10
            

            
                11
            

            
                12
            

            
                13
            

            
                14
            

            
                15

最后再向外暴露對象

 //插件的數組，將來webpack在運行時，會加載并調用這些插件 plugins: [HtmlPlugin] //將實例化對象寫入。  
        

            
                1
            

            
                2

執行 npm run dev命令，進行自動打包，然后進入本地8080端口網頁，就可以直接看到頁面了。
在這里插入圖片描述
當你修改js之后也會實時更新。

注意點以及個人建議和理解
我們可以在scripts里設置兩個屬性，dev是用來開發實時瀏覽觀看內容的，dev2是用來進行物理打包的（當你完成項目需要打包的時候）。
在這里插入圖片描述
這里我需要說一下html-webpack-plugin這個插件，上面我們可以直接看到頁面是因為這個插件復制了一份兒index.html到根目錄所以可以直接訪問。
這個插件里面有個屬性叫filename，就是你將文件復制到什么位置。
在這里插入圖片描述
兩個注意點

第一個就是它的值，屬性值寫的相對路徑是根據你打包文件的位置為基準的，并不是webpack.config.js的文件位置，./就跟你的new.js文件在同一個文件夾里，…/就在new.js的上級文件夾里，所以當你打包的時候會發現除了new.js之外還有index.html

第二個就是輸出方式，如果執行的是dev2，那么就跟new.js進行物理復制，如果執行的是dev那么就跟new.js一樣，以內村存儲的方式進行保存。

生成的html文件里會自動導入同時打包的js文件
在這里插入圖片描述

devServer節點

在webpack.config.js配置文件中，可以通過devServer節點對webpack-dev-server插件進行更多配置。
其中有一些屬性設置可以更方便我們進行開發。

 devServer: { open: true, //打包完成后默認打開瀏覽器 port: 8080,//修改端口號 host: '127.0.0.1' //修改主機地址 }  
        

            
                1
            

            
                2
            

            
                3
            

            
                4
            

            
                5

文章已被收錄至官方知識檔案

轉自 csdn

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

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

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

評論(0) 瀏覽(1707)

032023-1

網站都變成灰色了，它是怎么實現的？

大家好，我是二哥呀。

想必大家都感受到了，很多網站、APP 在昨天都變灰了。

先來感受一下變灰后的效果。

這是 CSDN 的

這是 B站的

這種灰色的效果怎么實現的呢？如何做到圖片、文字、按鈕都變灰的效果呢？

方案 1，換一套灰色的 UI，那顯然成本太大了，用腳指頭想一想就知道不太可能。

方案 2，用魔法！

不好意思，還真被你猜中了！在網頁端按下 F12，打開開發者模式，用元素選擇器定位到 HTML 標簽上，在「樣式」的面板中往下翻，就可以看到這樣一段代碼。

我把它復制過來大家看一下。

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

打開二哥的網站《Java 程序員進階之路》，定位到 HTML 標簽，此時可以看到頁面是正常的顏色。

然后把之前的代碼添加到 HTML 上，然后就可以看到色系變成灰色了。

那這段代碼是什么意思呢？

直接把 filter grayscale 復制到搜索引擎里看一下。

當參數為 0 的時候，顏色是正常的。

然后依次試一下 60%：

100%：

MDN 是怎么解釋 grayscale() 函數呢？

The grayscale() CSS function converts the input image to grayscale. Its result is a .

大致的意思就是，grayscale 是一個 CSS 函數，可以把圖像轉成灰色，參數是個百分比，結果返回一個 filter 函數。

The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

filter 函數可以用來改變圖像的顯示效果，用于 CSS 的 filter 屬性。除了 grayscale 函數，可選項還有以下這些：

可以看到，目前的主流瀏覽器版本都支持 grayscale 函數，比如說 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。

沒有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣，我是不系之舟。

轉自 csdn

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

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

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

評論(0) 瀏覽(1340)

212022-4

還不懂什么是SaaS？一篇最專業的掃盲科普文

有了解和學習 B 端的同學必然都聽說過 SaaS 這個詞，這在 B 端行業是個非常重要的產品形式和分支。

雖然它重要，但新手對這東西的理解充滿了讓人遺憾的扭曲。比如常見的誤解式提問，Saas 應該怎么設計？適用哪些設計風格？

……

所以我從最底層的技術層面，來解析 Saas 到底是什么，在未來你再也不用擔心對這個詞匯一知半解，無法正常參與業務討論了。

講解什么是 Saas，或者剛剛圖例出現的 Paas、laas 是什么，首先要認識一個問題，一個需要聯網的軟件，是如何落地的，需要哪些前提條件。

通常，我們可以把一個普通的聯網產品要正式上線并使用，需要滿足 9 個層級的條件，我們簡稱 “9層塔”，分別是：

下面，我們根據每個大層級來解釋一下，它們分別都是什么。

1.1 基礎設施層

基礎設施層是一切網絡服務的根基，由現實世界的硬件組成，是所有技術、代碼、數據的運行基礎。

層1：網絡（Networking）

即基礎的互聯網電信寬帶服務，通過電信運營商在各地搭建聯網用的設備，并使用線纜相互連接，滿足數據的物理傳輸可能。

比如你想要在家上網沖浪（非移動上網），最基礎的條件是就是購買和開通寬帶服務，通過接入光纖的形式，實現從家中連接到互聯網世界的可能。

層2：服務器（Serves）

服務器，本質上也是一臺電腦。有了聯網的條件，我們就要把網絡接入到這臺 “電腦” 上，讓它來完成各種數據的處理和存儲。

但不管它能做什么，要做什么，首先你得先有這臺設備，不然后續的工作都無從談起，所以服務器指的就是用來完成后續工作的電腦設備。

層3：存儲（Storage）

存儲就是硬盤，你想要運行的任何程序、代碼，還是想要收集的數據，都需要容納的地方，那就是硬盤空間。存儲就是關聯到服務器的硬盤，是數據存儲的物理環境。

之所以硬盤被獨立出出來，而沒有把 CPU 內存這些拿出來，是因為數據的存儲和安全（物理上）是網絡服務的重中之重。CPU、內存、電源壞了，替換就可以，硬盤損壞導致數據的丟失是無論如何不可能接受的。

所以，工程師們開發了非常多特殊的技術來保障存儲的穩定和安全。

1.2 技術應用層

技術應用層，就是具備了網絡、服務器、硬盤以后，讓這些基礎設施充分發揮作用和能效的相關技術。

層4：虛擬化（Virtualization）

虛擬化是個比較抽象的概念，它是一種資源利用的技術，讓服務器最大化的利用和分配自己的資源。

比如一臺服務器，有8核心、8G內存、8G存儲，如果賣個一個客戶運行一個程序，那么很可能這個這個程序日常只使用一個核心的算力，1GB內存，1G不到的存儲，剩下的算力資源不就浪費了嘛？

于是，虛擬技術就可以把這臺服務器切割成 8 臺 “虛擬機” 賣給 8 個這樣的客戶。讓他們在這臺設備上運行 8 個不同的程序，并根據它們各自使用的消耗靈活分配 CPU 和內存資源。

所以，今天如果你想要搭建一個網站，云服務商出售的 “虛擬主機”，就是在實體服務器主機上切割出來的一部分。這樣客戶省錢了，商家利潤率也更高了！

層5：操作系統（OS）

每臺電腦都有自己的操作系統，我們熟知的 Windows、Mac OS等等。如果硬件沒有搭載操作系統，那它們就只是一堆工藝精密的廢鐵。

對于服務器來說也是，任何服務器想要正常運行，都必須搭載相關的服務器操作系統，有了基本的系統，我們才能創建程序，讓服務器去運行我們想要的功能。

前面提到的虛擬機，就允許同一臺服務器通過虛擬技術運行多個系統。

層6：中間件

中間件也是個比較復雜的技術概念，它是個獨立系統軟件服務程序，是軟件的直接面向對象（而不是服務器），是一種支撐軟件。

舉個不太嚴謹的例子，我們常規的邏輯是一個程序對應一臺服務器（或虛擬機），但真實情況往往是一個程序會關聯好幾個服務器和不同的系統，來完成不同的網絡服務。正常情況下，你需要對每個服務器和系統進行適配。

而中間件的作用就是幫助你省掉這個麻煩的步驟，讓你只需要對接唯一的翻譯和話事人，他會幫你向不同的任務對象傳達你的要求。

層7：程序環境（Rumtime）

程序環境，就是編譯代碼用的環境。我們常聽說的 C 語言、C++、PHP、Java、.Net 等編程語言，都需要安裝一個對應的運行環境。

許多熱衷電腦游戲的同學一定很熟悉游戲第一次啟動觸發的 Java 安裝界面，那就證明這個游戲中運用到了 Java 的代碼，如果你沒有 Java 的運行環境，那么它們就無法生效。

1.3 產品表現層

層8：應用（Application）

在這個系統下，應用程序指的不是你在自己電腦手機上安裝的程序。而是安裝在服務器上運行的程序，不管是后端程序還是前端程序。

它們需要使用某些特定的程序語言來編寫，并運行在上面所說的對應環境中。我們所說的后端開發，通常就是開發服務器所運行的程序的程序員。

層9：數據（Data）

這個詞放在這里可能有比較大的歧義，數據實際上就是使用這個程序所產生出來的數據，而不是單指數據庫（數據庫也是環境的一部分）。

比如你打開一個網站注冊了賬號，上傳了頭像，那么這些信息就是使用程序所額外產生的數據，它是項目正常運作的必然產品。

1.4 SaaS 到底是什么

理解上面的9個層級的內容是什么，我們就可以看下面這張圖表了。

SaaS 全程 Software-as-a-Service，翻譯叫 “軟件即服務”，講人話就是 “賣聯網軟件” 的。

前面提的 9 個層級，除了最后一層數據是我們普通人可以負責的，其它每個層級都需要對應的開發和工程師來負責對吧，那么我們普通人還是企業就不能使用網絡軟件服務了嘛？

這肯定是不符合事物發展規律的。

SaaS 的存在，就是讓用戶不用管什么服務器、代碼、中間件這些有的沒的高深玩意，直接讓你在瀏覽器或本地客戶端上直接使用這款聯網軟件，并創建對應的數據信息。

換句話講，只要這個軟件是聯網的，且軟件本身的功能就是服務的核心（劃重點：社區電商類軟件的服務顯然不是軟件功能本身），它就是 SaaS。SaaS 既可以免費，也可以是通過批量出售軟件功能的使用權來賺取收益。

免費情景：

微軟：如果你使用了基于 Web 的電子郵件服務（例如 Outlook、Hotmail 或 Yahoo!Mail），那么你已經使用一種形式的 SaaS。

https://azure.microsoft.com/zh-cn/overview/what-is-saas/

付費情景：

在 B 端的語境下，SaaS 通常就是指制作一個面向商業用戶的聯網軟件，然后批量出售這個軟件的使用權。它并沒有特指這個軟件必須是 CRM、ERP、HRM 還是商用 HMI……

所以明白了嘛，SaaS 只是一個商業形式或技術形式的統稱，它根本沒有具體的設計規范或者學習方法，完全根據業務的實際需求和場景決定。

最后，再問你們一個問題，你們現在負責的項目是 SaaS 嘛？

在 9 層塔中，SaaS 是完全制作好軟件讓用戶直接上手使用的軟件，而 PaaS 和 IaaS 就不一樣。

2.1 PaaS

PaaS 全文 Platform as a Service，是平臺即服務的簡稱。這屬于完全技術化的服務，是非程序員的一般用戶難以參與到的業務類型了。

即服務商提供了基礎的 7 層服務，只要用戶購買了這些使用權，那么就可以直接在這個基礎上編寫或安裝運行的程序進行使用了。

比如全球最大的開源 CMS 博客程序 WordPress，是由 PHP+MySQL 編寫的，如果要創建這樣的網站，就可以直接購買符合程序對應環境的服務器，再進行安裝部署即可。

2.2 IaaS

IaaS 全文 Infrastructure as a Service，就是用戶只購買一個完全空白的虛擬主機，類似你購買了一臺硬盤格式化后完全空白的虛擬電腦。

用戶可以自己選擇安裝什么樣的系統，編寫什么樣的中間件，最后再搭建自己的框架。這適合定自定義要求更高的用戶，完全根據自己的需要 DIY 項目的服務器功能。

2.3 Hosting

Hosting 則是比 IaaS 更進一步的服務，從原本的虛擬服務器升級到了完整的服務器。

也就是說，在一些特定業務環境下（比如特殊的數據安全要求），用戶需要購買完整的服務器硬件使用權，從原本的合租換成整租。

所以，Hosting 就是服務器托管的意思，用戶向一些服務商購買了完整的服務器硬件使用權和聯網功能，然后遠程進行控制和使用。而商家負責硬件層面運維，防止服務器斷電、斷網、損壞、過熱、故障等一系列硬件問題。

2.4 Co-location

九層塔中，我們其實還省略了一個更底層的環節 —— 數據中心。

數據中心是一個物理名詞，在今天指的是大規模的服務器數據設備安置和運行的空間。比如蘋果的云上貴州，就是典型的數據中心。

Co-location 的服務也叫場地出租，就是數據中心的商家，把數據中心的物理空間使用權租用給用戶，用戶自己購買服務器或商家的（不是臨時租用）放進去，再借助數據中心的網絡和其它基礎服務實現服務器的正常運轉。

這個概念大家簡單理解就可以，我就不多做介紹了。

所以，九層塔中包攬了不同層級數量的技術，就可以形成不同的服務，每一級服務有各自的優缺點，是由項目的實際情況決定的。

相信看完前面的介紹大家已經知道，SaaS 等服務是建立在聯網的基礎之上的，也就是說，除了可以獨立運行在你客戶端里的本地軟件，還包含更多需要聯網的軟件，或者干脆運行在遠程服務器主機上的軟件。

這是一個發展的過程……

最早的軟件安裝是我們到軟件店里購買軟盤、光盤，回到家里的電腦安裝，這些軟件往往只在本地運行，是不需要聯網的孤島。

隨著互聯網行業的發展，孤島漸漸被消除，聯網上傳和獲取數據越來越普及，甚至，軟件都不需要再下載和安裝，直接用瀏覽器就可以訪問使用。

這種模式，就催生了軟件的開發維護與服務器、網絡的硬件運行進行了分工，一般的產品開發團隊專注在軟件應用層面的開發工作，而把網絡、遠程服務交給其它商家，并付費購買。

這樣不僅帶來更高的效率，而且降低了各自的成本，實現了多方的共贏。

所以，我們再來理解云服務這個詞就很容易了，云就是網絡，云服務就是基于聯網實現的各種軟硬件服務的總和。

除了遠程的虛擬機、中間件、數據庫外，還有遠程計算、渲染、CND加速、直播分流等等。

這也是為什么云服務會成為互聯網發展的基礎，因為它實在太重要了，幾乎所有互聯網公司都無法脫離云服務帶來的支持。

這也是為什么各個大廠紛紛投入云服務的賽道中，因為這是互聯網的基建和命脈之一，擁有非常廣闊的前景與市場。而在馬太效應強者越強的現實環境下，頭部的廠商擁有更好的機群、技術、人員，可以大幅度降低運作成本，提供更優質但價格更低廉的服務。

雖然云服務在今天不可或缺，價格也越來越有優勢。但是，并不是所有企業都一定要選擇購買外部的云服務，這就是我們要理解的另一個課題 —— 私有化部署。

云服務再怎么便捷，也有一個缺陷，那就是數據是存儲在別的商家、企業的服務器中，有一定的數據安全隱患。

雖然數據安全是云服務的最基本保障，但很多對數據隱私、安全極度重視的企業，是不愿意承擔任何外部風險的。所以他們就會通過自建本地服務器（私有云）的方式，實現從網絡、硬件到軟件全局私有化的部署。

也就是說，服務器機房是自己公司的，網絡是自己遷進機房的，服務器自己買的，環境、虛擬化、數據庫自己搭建的，后端程序也是自己寫的，最后電腦手機上運行的客戶端，是連接這些服務器的。

哦對了，當然這些硬件日常的維護也要由自己公司的運維負責……

這樣的成本高嘛？非常高。但類似國企、銀行、證券、國防、政府機關等機構，對數據的安全性是異乎尋常的執著的，他們是有足夠的動力劃出預算來確保數據的私密與安全，用來運行自己內部的 B 端系統。

這也是為什么這些機構從一開始就拒絕使用 Figma 這種公有云端軟件，尤其是服務器在國外的。

再問下一個問題，私有化部署，就意味著這個環節中所有步驟全是自己搞定嘛？

當然不可能，因為應用這個層面，有時候不是想開發就開發得出來，或者成本實在超出了預算。因為私有化的主要目標是數據安全，但不是應用的工具一定得個性化定制。

比如在即時設計官網的價格頁面，就可以看到 “私有部署” 這個選項。它的實際作用，就是允許客戶在自己的服務器上安裝它，讓內部的員工使用設計軟件時是同步到公司指定的服務器而不是官方的公共服務器中，滿足客戶的數據隱私需求

注：這例子大家討論最多適合理解，非恰飯

所以，了解完上面的概念，你也就大概能明白什么是云服務，什么是私有化。如果需要在工作中碰到更細節的名詞還是概念，可以再進一步做理解。

文章來源：UI中國作者：超人的電話亭
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(2018)

072022-4

echarts設置柱狀圖柱狀圖粗細大小

主要屬性：

 //設置柱狀圖大小
                    barWidth: 20, 
            

                
                    1
                

                
                    2

demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>柱狀圖大小</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>

    <body>
        <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于準備好的dom，初始化echarts實例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定圖表的配置項和數據
            myChart.setOption({
                title: {
                    text: '柱狀圖'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    　 //設置柱狀圖大小
                    barWidth: 20,
                    //設置柱狀圖漸變顏色
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#1268f3" // 0% 處的顏色
                            }, {
                                offset: 0.6,
                                color: "#08a4fa" // 60% 處的顏色
                            }, {
                                offset: 1,
                                color: "#01ccfe" // 100% 處的顏色
                            }], false)
                        }
                    },
                    data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"]
                }]
            });
        </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
                

                
                    51
                

                
                    52
                

                
                    53
                

                
                    54
                

                
                    55
                

                
                    56
                

                
                    57

評論(0) 瀏覽(6543)

072022-4

css 設置tr的邊框

有時候有設置tr邊框的需求，寫下如下css

tr{

border-bottom: 1px solid red;

}

發現不起作用，后來在w3c上查了查，原來只有table，th和td有獨立的邊框，tr并無邊框。

但我想實現每一行都存在下邊框，其他邊框不存在，該怎么辦呢？

有兩種實現方法：

方法1：

table{

border-collapse: collapse;

}

tr{

border-bottom: 1px solid red;

}

解釋，border-collapse: collapse; 將table，th和td的邊框合成單一的邊框，此時在使用tr就可以達到目的。

方法2：

先在table標簽里面設置cellspacing等于0，

<table cellspacing="0">

然后，

td{

border-bottom: 1px solid red;

}

解釋，如何不設置cellspacing等于0，直接設置td的下邊框，則下邊框會不連續，因為cellspacing不為零，單元格于單元格之間存在間隙。

轉自：csdn

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(5821)

252022-1

JavaScript制作貪吃蛇小游戲

目錄

附上源代碼

寫了這么久的代碼

是否你和我一樣感到枯燥乏味了呢？

是否沒有前進的動力了呢？

別忘了當時的你躊躇滿志將前端Web一舉拿下的斗志??！

今天博主要給大家展現一個好玩的游戲

貪吃蛇小游戲！

嘿，你可別小瞧這東西！

制作過程是從無到有

等做完它

你就能從中體會到比玩游戲還快樂的居然是打代碼!

效果展示

原理分析

我們制作前為了代碼更清晰就分成幾個js文檔來編寫。

其中Game.js可以看作是一個媒介的作用；Snake.js是當蛇初始化時在最左邊向右走的狀態；

貪吃蛇在游戲中的運動可以想象成這條蛇是在一張25*25的表格中運動：

如圖所示

Game.js文檔

所以我們在Game.js中添加表格節點：

 


    

        

            

            

        

        

            
                function Game() {
            

        

    

    

        

            

            

        

        

            
                this.row = 25;
            

        

    

    

        

            

            

        

        

            
                this.col = 25;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                Game.prototype.init = function() {
            

        

    

    

        

            

            

        

        

            
                this.dom = document.createElement('table');
            

        

    

    

        

            

            

        

        

            
                // 創建表格--父元素為document（頁面中創建表格） 
            

        

    

    

        

            

            

        

        

            
                // var tr, td; 
            

        

    

    

        

            

            

        

        

            
                for (var i = 0; i < this.row; i++) { //追加行 
            

        

    

    

        

            

            

        

        

            
                var tr = document.createElement('tr');
            

        

    

    

        

            

            

        

        

            
                for (var j = 0; j < this.td; j++) { //追加列 
            

        

    

    

        

            

            

        

        

            
                var td = document.createElement('col');
            

        

    

    

        

            

            

        

        

            
                td.appendChild(tr);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };

Snake.js文檔

Snake.js中當蛇初始化時在最左邊向右走的狀態：

如圖所示

 


    

        

            

            

        

        

            
                function Snake() {
            

        

    

    

        

            

            

        

        

            
                // 蛇的初始化身體 
            

        

    

    

        

            

            

        

        

            
                this.body = [
            

        

    

    

        

            

            

        

        

            
                { 'row': 3, 'col': 5 },
            

        

    

    

        

            

            

        

        

            
                { 'row': 3, 'col': 4 },
            

        

    

    

        

            

            

        

        

            
                { 'row': 3, 'col': 3 },
            

        

    

    

        

            

            

        

        

            
                { 'row': 3, 'col': 2 }
            

        

    

    

        

            

            

        

        

            
                ];
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                Snake.prototype.render = function() {
            

        

    

    

        

            

            

        

        

            
                // 蛇頭的渲染 
            

        

    

    

        

            

            

        

        

            
                game.setColorHead(this.body[0].row, this.body[0].col.'pink');
            

        

    

    

        

            

            

        

        

            
                // 蛇身的渲染 
            

        

    

    

        

            

            

        

        

            
                for (var i = 1; i < this.body.length; i++) {
            

        

    

    

        

            

            

        

        

            
                game.setColor(this.body[i].row, this.body[i].col, 'cyan')
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

當蛇在運動的時候它的原理是“頭增尾刪”。

因為蛇的長度先是不變的，而我們改變的也是改變這個四個格子的顏色，走一格頭部那一格顏色變為粉色，尾巴那一格的顏色變為白色。

接下來讓蛇通過我們按鍵來進行運動：放在一個監聽事件內

 


    

        

            

            

        

        

            
                // 設置鍵盤的事件監聽 
            

        

    

    

        

            

            

        

        

            
                Game.prototype.bindEvent = function() {
            

        

    

    

        

            

            

        

        

            
                var self = this;
            

        

    

    

        

            

            

        

        

            
                document.addEventListener('keydown', function(e) {
            

        

    

    

        

            

            

        

        

            
                // 用ASCII碼值判斷鍵盤方向 
            

        

    

    

        

            

            

        

        

            
                switch (e.keyCode) {
            

        

    

    

        

            

            

        

        

            
                case 37: //左 
            

        

    

    

        

            

            

        

        

            
                if (self.snake.direction == 'R') return; // 先進行判斷，如果當前的方向是向右移動，此時我們不能按左鍵 
            

        

    

    

        

            

            

        

        

            
                self.snake.changeDirection('L');
            

        

    

    

        

            

            

        

        

            
                self.d = 'L';
            

        

    

    

        

            

            

        

        

            
                break;
            

        

    

    

        

            

            

        

        

            
                case 38: //上 
            

        

    

    

        

            

            

        

        

            
                if (self.snake.direction == 'D') return; // 先進行判斷，如果當前的方向是向下移動，此時我們不能按上鍵 
            

        

    

    

        

            

            

        

        

            
                self.snake.changeDirection('U');
            

        

    

    

        

            

            

        

        

            
                self.d = 'U';
            

        

    

    

        

            

            

        

        

            
                break;
            

        

    

    

        

            

            

        

        

            
                case 39: //右 
            

        

    

    

        

            

            

        

        

            
                if (self.snake.direction == 'L') return; // 先進行判斷，如果當前的方向是向左移動，此時我們不能按右鍵 
            

        

    

    

        

            

            

        

        

            
                self.snake.changeDirection('R');
            

        

    

    

        

            

            

        

        

            
                self.d = 'R';
            

        

    

    

        

            

            

        

        

            
                break;
            

        

    

    

        

            

            

        

        

            
                case 40: //下 
            

        

    

    

        

            

            

        

        

            
                if (self.snake.direction == 'U') return; // 先進行判斷，如果當前的方向是向上移動，此時我們不能按下鍵 
            

        

    

    

        

            

            

        

        

            
                self.snake.changeDirection('D');
            

        

    

    

        

            

            

        

        

            
                self.d = 'D';
            

        

    

    

        

            

            

        

        

            
                break;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                }

接下來我們判定蛇是否撞到墻而結束

 


    

        

            

            

        

        

            
                // 死亡的判斷,超出了表格邊緣的部分 
            

        

    

    

        

            

            

        

        

            
                if (this.body[0].col > game.col - 1 || this.body[0].col < 0 || this.body[0].row > game.row - 1 || this.body[0].row < 0) {
            

        

    

    

        

            

            

        

        

            
                alert('撞到墻了哦，一共吃掉了' + game.score + '顆草莓');
            

        

    

    

        

            

            

        

        

            
                this.body.shift();
            

        

    

    

        

            

            

        

        

            
                clearInterval(game.timer);
            

        

    

    

        

            

            

        

        

            
                location.reload();
            

        

    

    

        

            

            

        

        

            
                }

接下來我們判定蛇是否撞到自己而結束

 


    

        

            

            

        

        

            
                // 自己撞到自己的時候會判定死亡 
            

        

    

    

        

            

            

        

        

            
                for (var i = 1; i < this.body.length; i++) {
            

        

    

    

        

            

            

        

        

            
                // 如果當前蛇的頭部和身體的某一個部位的 row 和 col 完全重合的時候 
            

        

    

    

        

            

            

        

        

            
                if (this.body[0].row == this.body[i].row && this.body[0].col == this.body[i].col) {
            

        

    

    

        

            

            

        

        

            
                alert('撞到自己了,吃掉了' + game.score + '顆草莓');
            

        

    

    

        

            

            

        

        

            
                this.body.shift();
            

        

    

    

        

            

            

        

        

            
                clearInterval(game.timer);
            

        

    

    

        

            

            

        

        

            
                location.reload();
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

Food.js文檔

食物food類，用來產生食物

 


    

        

            

            

        

        

            
                function Food(gameSnake) {
            

        

    

    

        

            

            

        

        

            
                // 食物的位置 
            

        

    

    

        

            

            

        

        

            
                this.row = parseInt(Math.random() * gameSnake.row)
            

        

    

    

        

            

            

        

        

            
                this.col = parseInt(Math.random() * gameSnake.col)
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                Food.prototype.render = function() {
            

        

    

    

        

            

            

        

        

            
                game.setHTML(this.row, this.col);
            

        

    

    

        

            

            

        

        

            
                }

食物隨機生成在單元格中，利用do...while來實現

 


    

        

            

            

        

        

            
                function Food(gameSnake) {
            

        

    

    

        

            

            

        

        

            
                var self = this;
            

        

    

    

        

            

            

        

        

            
                // 下面的 do-while 循環語句作用是先創建一個 row 和 col 
            

        

    

    

        

            

            

        

        

            
                然后判斷這個 row 和 col 是否在蛇的身上
            

        

    

    

        

            

            

        

        

            
                //do...while來創建食物 
            

        

    

    

        

            

            

        

        

            
                do {
            

        

    

    

        

            

            

        

        

            
                // 食物的位置 
            

        

    

    

        

            

            

        

        

            
                this.row = parseInt(Math.random() * gameSnake.row)
            

        

    

    

        

            

            

        

        

            
                this.col = parseInt(Math.random() * gameSnake.col)
            

        

    

    

        

            

            

        

        

            
                } while ((function() {
            

        

    

    

        

            

            

        

        

            
                // 遍歷蛇的 row col 然后和 food 新隨機出來的 row col 進行判斷，是否重合 
            

        

    

    

        

            

            

        

        

            
                for (var i = 0; i < gameSnake.snake.body.length; i++) {
            

        

    

    

        

            

            

        

        

            
                if (self.row == gameSnake.snake.body[i].row && self.col == gameSnake.snake.body[i].col) {
            

        

    

    

        

            

            

        

        

            
                return true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                return false;
            

        

    

    

        

            

            

        

        

            
                })());
            

        

    

    

        

            

            

        

        

            
                }

文章來源：csdn 作者：實習期小潘

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(1795)

252022-1

Vue按需引入Echarts，并從V4版本升級到V5版本

一、原本的V4版本按需引入: main.js頁面

import Echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/pie' import 'echarts/lib/chart/bar' import 'echarts/lib/chart/line' Vue.prototype.echarts = Echarts 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

二、升級版本

！??！注意：要先刪除插件，再重新安裝插件，要不然是沒效果的（我就說咋沒效果）

刪除echarts

npm uninstall echarts --save 


    
        1

再重新安裝echarts

npm install echarts --save 


    
        1

三、按需處理

在main.js頁面

參考官方：https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

import * as Echarts from 'echarts/core'; import { BarChart, PieChart, LineChart } from 'echarts/charts'; import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步 import { CanvasRenderer } from 'echarts/renderers'; Echarts.use([BarChart, PieChart, LineChart, TitleComponent, TooltipComponent, GridComponent, CanvasRenderer, LegendComponent]) Vue.prototype.echarts = Echarts 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

四、成功

文章來源：csdn 作者:木木木小羅

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(4122)

242022-1

幾個超火的在線編程網站，別錯過

大家好，我是魚皮，今天給大家推薦幾個最近非常流行的編程網站，相信能夠幫助大家提高編程效率、更好地學習編程。

熱門編程網站推薦

Codepen

演示視頻：https://www.bilibili.com/video/BV1im4y1X7zb/

國外的在線前端編程網站，在這里你可以發現很多國外大神編寫的前端代碼，除了各種網頁布局代碼外，更多的是各式各樣好玩的、炫酷的、新穎的前端動畫和特效。

比如圣誕節快到了，很多小伙伴問我能不能用代碼畫顆圣誕樹。

我是不會，但是在這個網站中，輸入 “Christmas Tree” 搜索，就能看到各種不同風格的圣誕樹網頁啦！

Codepen 好玩的網頁

點擊你看中的網頁，就能進到代碼編輯頁面，在這里，你可以任意修改 HTML、CSS、JavaScript 前端代碼，并且在底部的區域實時瀏覽運行效果，非常地方便！

在線編輯

編輯好網頁后，可以在網頁右下角的菜單中進行全屏瀏覽、收藏、克隆、分享等，還能直接將網頁內嵌到我們自己的項目中，或者下載完整代碼包到本地。

網頁操作

得益于前端技術的發展，這個網站為開發者提供了搜索項目、在線編輯、分享導出的一條龍服務，使得我們能夠以自主練習的方式輕松學習別人優秀的代碼。

下面再分享幾個類似的網站。

CodeSandbox

代碼沙箱，顧名思義，可以幫助你在隔離的環境中運行前端項目。

在這里你可以基于豐富的模板來創建自己的沙箱（項目），比如 React、Vue、Angular、VuePress、Svelte 等常見的前端框架：

創建好沙箱后，你就可以在線編輯代碼、實時查看效果，或者分享沙箱給其他小伙伴啦~

在線編輯

JSFiddle

前端開發的練習場，也可以在線編寫代碼、實時瀏覽效果。相對于 Codepen，個人感覺這個網站的編輯體驗更好：

在線編輯

當你在網上看到了一段不錯的 JS 代碼或者插件，不必再下載到本地了。直接把代碼粘貼到 JSFiddle 中，就能以最快的方式查看運行效果了。現在很多前端組件庫也用到了這種平臺，給開發者所見即所得的體驗。

JSRUN

國內的在線編程網站，除了前端外，甚至支持多達 30 多種編程語言的在線調試和運行！

同 Codepen 一樣，你可以在這里看到很多別人編寫的代碼片段，直接下載。還可以保存和分享你的代碼，建立自己的小代碼合集。

下載代碼

不得不說，在國內，這個網站算是做的相當出色的了，訪問速度和功能體驗都很棒！

Gitpod

這個平臺要比上面提到的網站更高級一些，它是一個強大的在線 IDE（集成編程環境），提供了 VSCode 風格的編輯器，允許你在線編寫代碼完成開發。

在線 IDE

Gitpod 基于容器技術，可以幫助你一鍵編譯、構建、運行任何 GitHub 項目，不止前端！而且每個項目的運行都是互相隔離的，隨用隨創建、用完可隨時回收，非常靈活。

如果你看中了一個 GitHub 項目，又不想在本地去搭建各種環境去查看它的運行效果，那么最好的方式就是使用 Gitpod 來在線構建和執行?，F在也有越來越多的 GitHub 項目接入了 Gitpod，大家只要看到下圖的按鈕，都是可以一鍵部署運行的，大大提高效率！

以上就是本期分享，有幫助的話幫忙點個贊吧，謝謝大家！

文章來源：csdn 作者：程序員魚皮

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

評論(0) 瀏覽(2053)

« 1 ... 9 10 11 12 13 14 15 ... 104 »

分類

日歷

鏈接

個人資料

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

存檔

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