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

vue是一个渐进式的前端框架,渐进式也就意味着你可以在使用过程中,引入自己需要的一系列外部资源。这也就意味着,你可以自己搭建自己的框架,如果不用vue-cli,你可以自己搭建开发框架,需要vuex、需要vue-router的时候,npm安装,在项目中import就可以了。

如果你不想使用框架,直接用vue.js构建项目,可以用CND的方式引入使用。

通过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:

推荐国外比较稳定的两个 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

Image placeholder
前端答疑
未设置
  69人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

vue脚手架是什么?

vue-cli是什么vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了batterie

全局安装react脚手架在哪装?

全局安装react脚手架在哪装?全局安装react脚手架在任何目录下都可以,因为和当前所在目录没有关系。一、全局安装react脚手架npminstall-gcreate-react-app -g参数表

基于ApiBoot的前后分离演示脚手架诞生了~

知识改变命运,撸码使我快乐,2020继续游走在开源界点赞再看,养成习惯给我来个Star吧,ApiBootAdmin源码仓库:https://gitee.com/minbox-projects/api-

cordova如何打包vue项目?

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿

eclipse如何导入vue项目?

eclipse导入vue项目的方法1、首先,我们需要去导入的项目根目录下看一下,是否包含.project和.classpath文件,我这里是没有这两个文件的。这里要注意显示文件夹下的隐藏文件。2、由于

cmd如何运行vue项目?

1、打开cmd命令窗口使用组合键【win+r】打开运行窗口,输入cmd,进入cmd命令窗口。2、将目录切换到vue项目下3、使用npmrundev命令然后在浏览器中输入网址http://localho

apicloud如何打包vue项目?

apicloud如何打包vue项目?APICloud新建项目后,会生成以下目录结构其中index.html是入口文件,而vue-cli打包生成的文件是在dist目录下├─dist │└─static

怎么打包node项目?

怎么打包node项目?可以使用JXcore打包nodejs项目:JXcore是一个支持多线程的Node.js发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。下载JXcor

如何调试react native项目

如何调试reactnative项目调试reactnative项目有两种方式:1、模拟器调试;2、真机调试。一、模拟器调试我们在Android模拟器上按快捷键Command⌘+M,在iOS模拟器上按快捷

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue与jquery的区别是什么?

vue与jquery的区别是什么?vue和jquey的对比:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DO

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

angular和vue是什么?

Angular是什么?Angular是一个基于TypeScript的开源Web应用程序框架,一个用HTML,CSS和JavaScript/TypeScript构建客户端应用程序的框架。Angular是

echarts和vue的区别是什么?

echarts:ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/

bootstrap和vue的区别是什么?

Bootstrap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,使得Web开发更加快捷

app.vue的作用是什么?

app.vue的作用是什么?app.vue可以当做是网站首页,是一个vue项目的主组件,页面入口文件,所有页面都是在App.vue下进行切换的。是整个项目的关键,app.vue负责构建定义及页面组件归

vue和react是什么?

vue是什么?有什么用?Vue.js是一款流行的JavaScript前端框架,一个用于创建用户界面的开源JavaScript框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图

vue和react的区别是什么?

vue和react的区别1、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用的方式(diff)进行的,如果不优化可能导

vuetify是什么?

vuetify是一个基于vue2.0,为移动而生的组件框架,一个渐进式的UI框架。Vuetify支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式web应用程序)和标准HTML页面。受支