小兔网

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/该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。/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开发必须要搭脚手架么?的知识。速戳>>知识兔学习精品课!