vue开发必须要搭脚手架么？

互联网 20-11-20

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)降低“通信风暴”的影响，提高网络访问的稳定性。