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 相关文章推荐
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
vue实现单选和多选功能
Aug 11 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
vue实现移动端返回顶部
Oct 12 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php的正则处理函数总结分析
2008/06/20 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python的多维空数组赋值方法
2018/04/13 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
美国网上书店:Barnes & Noble
2018/08/15 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
网络技术支持面试题
2013/04/22 面试题
《爱如茉莉》教后反思
2014/04/12 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
施工安全协议书
2016/03/22 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
德劲DE1105机评
2022/04/05 无线电
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang