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.反应：可伸缩性和可维护性May 10, 2025 am 12:24 AM

Vue.js和React在可扩展性和可维护性上的表现各有优势。1)Vue.js易于上手，适合小型项目，CompositionAPI提升了大型项目可维护性。2)React适用于大型复杂项目，Hooks和虚拟DOM提高了性能和可维护性，但学习曲线较陡峭。

vue.js和React的未来：趋势和预测May 09, 2025 am 12:12 AM

Vue.js和React的未来趋势和预测分别是：1)Vue.js将在企业级应用中广泛应用，并在服务端渲染和静态站点生成方面有突破；2)React将在服务器组件和数据获取方面创新，并进一步优化并发模式。

Netflix的前端：深入研究其技术堆栈May 08, 2025 am 12:11 AM

Netflix的前端技术栈主要基于React和Redux。1.React用于构建高性能的单页面应用，通过组件化开发提升代码重用性和维护性。2.Redux用于状态管理，确保状态变化可预测和可追踪。3.工具链包括Webpack、Babel、Jest和Enzyme，确保代码质量和性能。4.性能优化通过代码分割、懒加载和服务端渲染实现，提升用户体验。

vue.js和前端：构建交互式用户界面May 06, 2025 am 12:02 AM

Vue.js是一种渐进式框架，适用于构建交互性强的用户界面。其核心功能包括响应式系统、组件化开发和路由管理。1)响应式系统通过Object.defineProperty或Proxy实现数据监听，自动更新界面。2)组件化开发允许将界面拆分为可复用的模块。3)VueRouter支持单页面应用，提升用户体验。