집 > 기사 > 웹 프론트엔드 > Vue 개발에 스캐폴딩이 필요한가요?

Vue 개발에 스캐폴딩이 필요한가요?

青灯夜游원래의: 2020-11-20 15:52:3714809검색

Vue 개발에는 스캐폴딩이 필요하지 않습니다. Vue 프로젝트를 위한 스캐폴딩을 구축할 필요는 없습니다. 또한 vue.js를 도입하기 위해 직접 사용할 수도 있습니다. 스캐폴딩은 단지 사전 구성된 프레임워크일 뿐이므로 구축할 수도 있습니다. 스캐폴딩을 수동으로 수행하면 동일한 코드 구조가 작동합니다.

vue는 진보적인 프런트 엔드 프레임워크입니다. 진보적인 것은 사용 중에 필요한 일련의 외부 리소스를 도입할 수 있다는 것을 의미합니다. 이는 vue-cli를 사용하지 않는 경우 자체 개발 프레임워크를 구축할 수 있다는 의미입니다. vuex 또는 vue-router가 필요한 경우 npm을 사용하여 설치하고 프로젝트에 가져오면 됩니다.

Vue 프로젝트는 반드시 스캐폴딩을 구축할 필요가 없습니다. vue.js를 도입하기 위해 직접 cdn을 사용할 수도 있습니다. 스캐폴딩을 구축하지 않고도 정적 페이지를 작성할 수도 있습니다. 스캐폴딩은 사전 구성된 프레임워크일 뿐이며 원하는 경우 동일한 코드 구조로 스캐폴드를 수동으로 생성할 수 있습니다.

프레임워크를 사용하지 않고 vue.js로 직접 프로젝트를 빌드하고 싶다면 CND를 사용하여 도입할 수 있습니다.

해외에서는 비교적 안정적인 CDN을 여러 개 추천합니다. 중국에서는 더 나은 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>

라우터 사례: https://github.com/vuejs/vue-router/tree/dev/examples

추가 정보:

CDN의 전체 이름 Content Delivery Network 는 콘텐츠 배포 네트워크입니다. CDN은 기존 네트워크를 기반으로 구축된 지능형 가상 네트워크로, 다양한 장소에 배치된 엣지 서버를 기반으로 중앙 플랫폼의 로드 밸런싱, 콘텐츠 배포, 스케줄링 등 기능 모듈을 활용해 사용자가 근처에서 필요한 콘텐츠를 얻을 수 있도록 하고, 네트워크 정체를 줄입니다. 사용자 액세스 응답 속도와 적중률을 향상시킵니다. CDN의 핵심 기술은 주로 콘텐츠 저장 및 배포 기술이다.

CDN의 주요 기능은 다음과 같습니다.

(1) 백본 네트워크 대역폭을 절약하고 대역폭 수요를 줄입니다.

(2) 대규모 사용자 방문으로 인한 서버 과부하 문제를 해결하기 위해 서버 측 가속을 제공합니다. 서비스 제공업체는 웹 캐시 기술을 사용하여 사용자가 액세스한 웹 페이지와 개체를 로컬로 캐시하므로 동일한 개체에 대한 액세스가 백본의 송신 대역폭을 차지하지 않고 사용자가 인터넷 페이지에 액세스하는 데 필요한 시간을 향상시킬 수 있습니다. 4) 극복할 수 있습니다. 웹사이트의 불균일한 배포 문제를 해결할 수 있고 웹사이트 자체의 구축 및 유지 비용을 줄일 수 있습니다.

(5) "통신 폭풍"의 영향을 줄이고 네트워크 액세스의 안정성을 향상시킵니다.

Vue 개발에 스캐폴딩이 필요한가요?

관련 기사