• 技术文章 >web前端 >Vue.js

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

    青灯夜游青灯夜游2020-11-20 15:52:37原创1301

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

    相关推荐:

    2020年前端vue面试题大汇总(附答案)

    vue教程推荐:2020最新的5个vue.js视频教程精选

    更多编程相关知识,请访问:编程教学!!

    以上就是vue开发必须要搭脚手架么?的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:vue 脚手架
    上一篇:vue.js有轮播图插件吗? 下一篇:怎么查看vue.js的版本信息?
    第14期线上培训班

    相关文章推荐

    • 5个好用的Vue.js库推荐• vue.js如何声明全局变量• vue计算属性和watch的区别有哪些?• vue框架和react框架的区别是什么• 基于vue移动端UI框架有哪些?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网