使用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 数组运用实现代码
Apr 13 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 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中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php制作简单模版引擎
2016/04/07 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
pandas 对group进行聚合的例子
2019/12/27 Python
简述python Scrapy框架
2020/08/17 Python
Django数据库迁移常见使用方法
2020/11/12 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
幼儿园运动会入场词
2014/02/10 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书