使用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的原型继承详解
Feb 15 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
javascript实现连续赋值
Aug 10 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
基于vue2实现左滑删除功能
Nov 28 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
JavaScript实现电灯开关小案例
Mar 30 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 七大优势分析
2009/06/23 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php四种基础算法代码实例
2013/10/29 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
jquery foreach使用示例
2013/09/12 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
详解JavaScript函数
2015/12/01 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
机器学习10大经典算法详解
2017/12/07 Python
基于python实现简单日历
2018/07/28 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
网络编辑求职信
2014/04/30 职场文书
经验交流材料格式
2014/12/30 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
用Python简陋模拟n阶魔方
2021/04/17 Python
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python