使用vue-cli+webpack搭建vue开发环境的方法


Posted in Javascript onDecember 22, 2017

在这里我们需要首先下载node,因为我们要用到npm包下载,是基于node的

废话不多说,我们直接进入正题

下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境

git用的是linux命令

不要问为什么,能用就行,你说是不是?

windows系统,下载完git以后我们再桌面右击鼠标会看到git Bash,点开它,然后就打开了git,

git有很多功能,同时git可以往github上push你的文件,github是一个很不错的仓库管理工具哦

好,我们直接开始,打开git之后会显示

使用vue-cli+webpack搭建vue开发环境的方法

然后我们执行npm install webpack

就会自动下载webpack最新版本了

在这里我们直接进入正题,怎么使用vue-cli搭建vue的开发环境

在这里我们需要全局安装vue-cli

在git里执行npm install vue-cli -g  安装vue命令环境

执行vue --verson查看是否安装成功,

显示vue的版本,就是安装成功了

这样就是全局安装了

现在我们再命令行输入vue init webpack-simple<模板名,就是你的项目的名称>,

在这里我们用webpack-simple搭建,因为他没有严格的规范,相对于大多数程序员来说比较好,他与webpack的区别在这里我就不细说了,如果需要的话大家可以在下面留言,我们给大家分享

在这里我的项目名称为myvue

所以我执行vue init webpack-simple myvue

桌面会有一个myvue的文件夹

我们执行cd myvue进入到我们的项目下

使用vue-cli+webpack搭建vue开发环境的方法

会发现文件夹下会有这些文件,这就是vue-cli自动为我们搭建的环境了

我们执行npm install

这时候我们需要等待一小会,npm在为我们下载基于node的一些文件,

使用vue-cli+webpack搭建vue开发环境的方法

然后你会发现多了一个node——modules文件,里面是node的一些模块

然后我们再命令行执行npm run dev

vue自动打开了浏览器,运行了此vue项目

使用vue-cli+webpack搭建vue开发环境的方法

这样,我们使用vue-cli搭建vue的开发环境就算成功了,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木的支持!

Javascript 相关文章推荐
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
Javascript中typeof 用法小结
May 12 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 #Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 #Javascript
Webpack框架核心概念(知识点整理)
Dec 22 #Javascript
详解webpack+express多页站点开发
Dec 22 #Javascript
如何开发出更好的JavaScript模块
Dec 22 #Javascript
详解webpack提取第三方库的正确姿势
Dec 22 #Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 #Javascript
You might like
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
详解JS数值Number类型
2018/02/07 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
《巨人的花园》教学反思
2014/02/12 职场文书
护士感人事迹
2014/05/01 职场文书
单位工作证明范文
2014/09/14 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书