vue開發必須要搭鷹架麼？-Vue.js-PHP中文網

首頁

web前端

Vue.js

vue開發必須要搭鷹架麼？

青灯夜游

Nov 20, 2020 pm 03:52 PM

vue鷹架

vue開發不是必須要搭鷹架的。 vue專案不一定要搭建鷹架，也可直接用cdn引入vue.js的形式，寫的靜態頁面不搭建腳手架也是可以的；腳手架只不過是預先配置好的一個框架，你要是喜歡，手動搞一個腳手架一模一樣的程式碼結構都行。

vue開發必須要搭鷹架麼？

vue是一個漸進式的前端框架，漸進式也意味著你可以在使用過程中，引入你需要的一系列外部資源。這也意味著，你可以自己搭建自己的框架，如果不用vue-cli，你可以自己搭建開發框架，需要vuex、需要vue-router的時候，npm安裝，在專案中import就可以了。

vue專案不一定要搭建鷹架，也可以直接用cdn引入vue.js的形式，寫好的靜態頁面不搭建鷹架也是可以的。鷹架只不過是預先配置好的一個框架，你要是喜歡，手動搞一個腳手架一模一樣的程式碼結構都行啊。

如果你不想使用框架，直接用vue.js建立項目，可以用CND的方式引入使用。

推薦國外比較穩定的幾個 CDN，國內還沒發現哪一家比較好，目前還是建議下載到本地。

Staticfile CDN（國內） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和npm 發布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

#透過CDN方式，在頁面上引入js 和css 檔案即可開始使用。

案例1：vuex

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
</head>
<div id="app"></div>
<body>
    <script type="text/Template" id="tpl">
        <div>
            <tip></tip>
            <input type="button" value="+" @click="jia" />
            <input type="button" value="-" @click="jian" />
        </div>
    </script>
    <script>
        const VuexStore = new Vuex.Store({
            state: {
                count: 0,
                num1: 1,
                num2: 2
            },
            mutations: {
                add(state, arg) {
                    state.count += arg.amount;
                },
                reduce(state) {
                    state.count --;
                }
            },
            getters: {
                he(state,getters) {
                    return state.count + state.num1 + state.num2
                },
                add5(state) {
                    return state.count + 0
                }
            },
            actions: {
                add_act({commit}) {
                    commit({type:&#39;add&#39;, amount:5})
                },
                reduce_act({commit}) {
                    commit({type:&#39;reduce&#39;})
                }
            },
            modules: {

            }
        });
        const app = new Vue({
            el: &#39;#app&#39;,
            store: VuexStore,
            template: &#39;#tpl&#39;,
            components: {
                tip: {
                    computed: {
                        ...Vuex.mapState([&#39;count&#39;,&#39;num1&#39;,&#39;num2&#39;]),
                        // ...Vuex.mapGetters([&#39;he&#39;])代替了$store.getters.he
                        ...Vuex.mapGetters([&#39;he&#39;]),
                    },
                    template: &#39;<div>{{count}}-{{num1}}-{{num2}}={{he}}</div>&#39;
                }
            },
            methods: {
                // ...Vuex.mapMutations([&#39;add&#39;])代替了$store.commit(&#39;add&#39;)
//                ...Vuex.mapMutations([&#39;add&#39;,&#39;reduce&#39;]),
                ...Vuex.mapActions([&#39;add_act&#39;, &#39;reduce_act&#39;]),
                jia() {
//                    this.$store.commit({type:&#39;add&#39;,amount:100})
//                    this.$store.dispatch(&#39;add_act&#39;);
                        this.add_act();
//                    this.add({amount:100});
                },
                jian() {
//                    this.$store.commit(&#39;reduce&#39;);
//                    this.$store.dispatch(&#39;reduce_act&#39;);
                        this.reduce_act();
//                    this.reduce();
                }
            }
        })
    </script>
</body>
</html>

至於router案例：https://github.com/vuejs/vue-router/tree/dev/examples

擴充資料：

CDN的全名為Content Delivery Network，也就是內容傳遞網路。 CDN是建立在現有網路基礎上的智慧虛擬網絡，依靠部署在各地的邊緣伺服器，透過中心平台的負載平衡、內容分發、調度等功能模組，使用戶就近獲取所需內容，降低網路擁塞，提高用戶存取響應速度和命中率。 CDN的關鍵技術主要有內容儲存和分發技術。

CDN具有以下主要功能：

(1)節省骨幹網路頻寬，減少頻寬需求；

(2)提供伺服器端加速，解決由於使用者存取量大造成的伺服器過載問題；

(3)服務商能使用Web Cache技術在本地快取使用者造訪過的Web頁面和對象，實現相同對象的存取無須佔用主幹的出口頻寬，並提高用戶存取因特網頁面的相應時間的需求；

(4)能克服網站分佈不均的問題，並且能降低網站自身建設和維護成本；

(5)降低「通訊風暴」的影響，提高網路存取的穩定性。

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020最新的5個vue.js影片教學精選

更多程式相關知識，請造訪：程式設計教學！！

以上是vue開發必須要搭鷹架麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

vue.js vs.反應：社區，生態系統和支持Apr 27, 2025 am 12:24 AM

Vue.js和React各有優勢，選擇應基於項目需求和團隊技術棧。 1.Vue.js社區友好，提供豐富學習資源，生態系統包括VueRouter等官方工具，支持由官方團隊和社區提供。 2.React社區偏向企業應用，生態系統強大，支持由Facebook及其社區提供，更新頻繁。

React和Netflix：探索關係Apr 26, 2025 am 12:11 AM

Netflix使用React來提升用戶體驗。 1)React的組件化特性幫助Netflix將復雜UI拆分成可管理模塊。 2)虛擬DOM優化了UI更新，提高了性能。 3)結合Redux和GraphQL，Netflix高效管理應用狀態和數據流動。

vue.js vs.後端框架：澄清區別Apr 25, 2025 am 12:05 AM

Vue.js是前端框架，後端框架用於處理服務器端邏輯。 1)Vue.js專注於構建用戶界面，通過組件化和響應式數據綁定簡化開發。 2)後端框架如Express、Django處理HTTP請求、數據庫操作和業務邏輯，運行在服務器上。

vue.js和前端堆棧：了解連接Apr 24, 2025 am 12:19 AM

Vue.js與前端技術棧緊密集成，提升開發效率和用戶體驗。 1)構建工具：與Webpack、Rollup集成，實現模塊化開發。 2)狀態管理：與Vuex集成，管理複雜應用狀態。 3)路由：與VueRouter集成，實現單頁面應用路由。 4)CSS預處理器：支持Sass、Less，提升樣式開發效率。

Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AM

Netflix選擇React來構建其用戶界面，因為React的組件化設計和虛擬DOM機制能夠高效處理複雜界面和頻繁更新。 1）組件化設計讓Netflix將界面分解成可管理的小組件，提高了開發效率和代碼可維護性。 2）虛擬DOM機制通過最小化DOM操作，確保了Netflix用戶界面的流暢性和高性能。

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被開發者喜愛因為它易於上手且功能強大。 1)其響應式數據綁定係統自動更新視圖。 2)組件系統提高了代碼的可重用性和可維護性。 3)計算屬性和偵聽器增強了代碼的可讀性和性能。 4)使用VueDevtools和檢查控制台錯誤是常見的調試技巧。 5)性能優化包括使用key屬性、計算屬性和keep-alive組件。 6)最佳實踐包括清晰的組件命名、使用單文件組件和合理使用生命週期鉤子。