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


Posted in Javascript onJuly 28, 2017

本文介绍了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使用vue-cli快速创建工程

之后一直回车,,并切换到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使用vue-cli快速创建工程

总结

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

参考

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

Javascript 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
Puppet的一些技巧
Sep 17 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
用JS实现简单的登录验证功能
Jul 28 #Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 #Javascript
vue中七牛插件使用的实例代码
Jul 28 #Javascript
Vue.js中的图片引用路径的方式
Jul 28 #Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 #Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 #Javascript
详解React 16 中的异常处理
Jul 28 #Javascript
You might like
基于PHP异步执行的常用方式详解
2013/06/03 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python线程中同步锁详解
2018/04/27 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
大学军训感言600字
2014/02/25 职场文书
药店营业员岗位职责
2015/04/14 职场文书
丧事主持词
2015/07/02 职场文书
暑假生活随笔
2015/08/15 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫