使用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 相关文章推荐
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
通过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
php懒人函数 自动添加数据
2011/06/28 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
Ionic快速安装教程
2016/06/03 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python实现发送邮件功能
2017/07/22 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python 私有化操作实例分析
2019/11/21 Python
python中的错误如何查看
2020/07/08 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
毕业生简单求职信
2013/11/19 职场文书
保险内勤岗位职责
2014/04/05 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书