vue開發不是必須要搭鷹架的。 vue專案不一定要搭建鷹架,也可直接用cdn引入vue.js的形式,寫的靜態頁面不搭建腳手架也是可以的;腳手架只不過是預先配置好的一個框架,你要是喜歡,手動搞一個腳手架一模一樣的程式碼結構都行。
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:'add', amount:5}) }, reduce_act({commit}) { commit({type:'reduce'}) } }, modules: { } }); const app = new Vue({ el: '#app', store: VuexStore, template: '#tpl', components: { tip: { computed: { ...Vuex.mapState(['count','num1','num2']), // ...Vuex.mapGetters(['he'])代替了$store.getters.he ...Vuex.mapGetters(['he']), }, template: '<div>{{count}}-{{num1}}-{{num2}}={{he}}</div>' } }, methods: { // ...Vuex.mapMutations(['add'])代替了$store.commit('add') // ...Vuex.mapMutations(['add','reduce']), ...Vuex.mapActions(['add_act', 'reduce_act']), jia() { // this.$store.commit({type:'add',amount:100}) // this.$store.dispatch('add_act'); this.add_act(); // this.add({amount:100}); }, jian() { // this.$store.commit('reduce'); // this.$store.dispatch('reduce_act'); 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)降低「通訊風暴」的影響,提高網路存取的穩定性。
相關推薦:
更多程式相關知識,請造訪:程式設計教學! !
以上是vue開發必須要搭鷹架麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!