使用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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
ext实现完整的登录代码
Aug 08 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
javascript函数特点实例分析
May 14 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue-router懒加载的3种方式汇总
Feb 28 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连接access数据库方法
2013/11/11 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
nginx下安装php7+php5
2016/07/31 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
javascript常用方法汇总
2014/12/02 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python实现的knn算法示例
2018/06/14 Python
python 类之间的参数传递方式
2019/12/20 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
做一个有道德的人演讲稿
2014/05/14 职场文书
会计演讲稿范文
2014/05/23 职场文书
课外小组活动总结
2014/08/27 职场文书
网站出售协议书范文
2014/10/10 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
委托书英文
2015/01/28 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android