Home >Web Front-end >Vue.js >Is scaffolding necessary for Vue development?

Is scaffolding necessary for Vue development?

青灯夜游Original: 2020-11-20 15:52:3714852browse

Vue development does not require scaffolding. Vue projects do not necessarily need to build scaffolding. You can also directly use cdn to introduce vue.js. It is also possible to write static pages without scaffolding; scaffolding is just a pre-configured framework. If you like, you can build a scaffolding manually. The exact same code structure will work.

vue is a progressive front-end framework. Progressive means that you can introduce a series of external resources you need during use. This means that you can build your own framework. If you don't use vue-cli, you can build your own development framework. If you need vuex or vue-router, just install it with npm and import it in the project.

Vue projects do not necessarily need to build scaffolding. You can also directly use cdn to introduce vue.js. It is also possible to write static pages without building scaffolding. Scaffolding is just a pre-configured framework. If you like, you can manually create a scaffold with the same code structure.

If you don’t want to use a framework, you can build the project directly with vue.js, which can be introduced using CND.

Recommend several relatively stable CDNs abroad. I haven’t found any that are better in China. Currently, it is recommended to download them locally.

Staticfile CDN (domestic): https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg: https://unpkg.com/vue/dist/vue.js, will remain consistent with the latest version released by npm.

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

Through CDN, you can start using it by introducing js and css files on the page.

Case 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>

As for the router case: https://github.com/vuejs/vue-router/tree/dev/examples

Extended information:

The full name of CDN is Content Delivery Network, which is content distribution network. CDN is an intelligent virtual network built on the existing network. It relies on edge servers deployed in various places and uses the load balancing, content distribution, scheduling and other functional modules of the central platform to enable users to obtain the content they need nearby and reduce network congestion. Improve user access response speed and hit rate. The key technologies of CDN mainly include content storage and distribution technology.

CDN has the following main functions:

(1) Save backbone network bandwidth and reduce bandwidth requirements;

(2) Provide server-side acceleration to solve the problem of user traffic Large server overload problem;

(3) Service providers can use Web Cache technology to locally cache Web pages and objects that users have accessed, so that access to the same objects does not need to occupy the export bandwidth of the backbone, and improve user The corresponding time requirement for accessing Internet pages;

(4) It can overcome the problem of uneven website distribution and reduce the cost of website construction and maintenance;

(5) Reduce "communication storm" ” impact and improve the stability of network access.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Is scaffolding necessary for Vue development?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Is there a carousel image plugin for vue.js?Next article：Is there a carousel image plugin for vue.js?

See more

Is scaffolding necessary for Vue development?

Related articles