使用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 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 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
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python 含参构造函数实例详解
2017/05/25 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
大学生毕业鉴定
2014/01/31 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
青年教师个人总结
2015/02/11 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
催款函范本大全
2015/06/24 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
Python循环之while无限迭代
2022/04/30 Python