使用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的日期联动实现代码
Feb 24 Javascript
js使用ajax读博客rss示例
May 06 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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下几种删除目录的方法总结
2007/08/19 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
javascript几个易错点记录
2014/11/26 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python os模块学习笔记
2015/06/21 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
python pandas库的安装和创建
2019/01/10 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
Python函数调用追踪实现代码
2020/11/27 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
酒吧员工的岗位职责
2013/11/26 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
安全教育实施方案
2014/03/02 职场文书
寄语是什么意思
2014/04/10 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
法人委托书范本
2014/09/15 职场文书
教师节慰问信
2015/02/15 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫