您好,登录后才能下订单哦!
小编给大家分享一下vue开发是不是必须要搭脚手架,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
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开发是不是必须要搭脚手架”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。