vue使用vue-cli快速创建工程

 更新时间:2017年07月28日 09:37:59   作者:鸭梨山大哎  
这篇文章主要介绍了vue使用vue-cli快速创建工程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下:

vue-cli安装

npm i vue-cli -g
vue init webpack-simple vue-todos

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

-g代表全局安装。

i就是install的缩写。

其中webpack-simple代表模板的名称。vue-todos是你给自己的项目起的名称,这个随便起。

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack-simple 的 vue.js 项目。

之后一直回车,,并切换到vue-todos的目录

接着执行

npm i

之后就可以运行了

npm run dev

这时可以修改上述App.vue的文件。

比如改为

<template>
<div id="app">
 <button v-on:click="counter += 1">增加 1</button>
 <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   counter: 0,
  }
 }
}
</script>

其中export default代表导出。然后在main.js利用import导入

运行的话结果就是

总结

vue-cli就是一个根据模板快速创建工程的工具(命令)啦~。

参考

Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 

JavaScript ES6中export及export default的区别

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue实现数字翻页动画

    vue实现数字翻页动画

    这篇文章主要为大家详细介绍了vue实现数字翻页动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 详解Vue中组件传值的多重实现方式

    详解Vue中组件传值的多重实现方式

    这篇文章主要介绍了详解Vue中组件传值的多重实现方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue-cli2与vue-cli3在一台电脑共存的实现方法

    vue-cli2与vue-cli3在一台电脑共存的实现方法

    这篇文章主要介绍了vue-cli2与vue-cli3在一台电脑共存的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 关于vxe-table复选框翻页选中问题及解决

    关于vxe-table复选框翻页选中问题及解决

    这篇文章主要介绍了关于vxe-table复选框翻页选中问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3 列表界面数据展示详情

    Vue3 列表界面数据展示详情

    这篇文章主要介绍了Vue3 列表界面数据展示,文章主要详介绍的内容就是做的就是把打到页面的数据,带样式,也就是说好看点显示,需要的朋友可以参考一下
    2021-11-11
  • vue中将html字符串转换成html后遇到的问题小结

    vue中将html字符串转换成html后遇到的问题小结

    这篇文章主要介绍了vue中将html字符串转换成html后遇到的问题小结,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue实现websocket客服聊天功能

    vue实现websocket客服聊天功能

    这篇文章主要为大家详细介绍了vue实现websocket客服聊天功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答

    web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答

    这篇文章主要介绍了web面试中常问问题,MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • vue+bpmn.js实现自定义流程图的完整代码

    vue+bpmn.js实现自定义流程图的完整代码

    这篇文章主要介绍了vue+bpmn.js实现自定义流程图的完整代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借价值,需要的朋友参考下吧
    2024-03-03
  • vue中ref和reactive的区别及说明

    vue中ref和reactive的区别及说明

    这篇文章主要介绍了vue中ref和reactive的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08

最新评论