使用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 开发者应该注意的9个错误
May 03 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
js中的this的指向问题详解
Aug 29 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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
我的论坛源代码(八)
2006/10/09 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php格式文件打开的四种方法
2018/02/24 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
jQuery的框架介绍
2016/05/11 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
javascript操作cookie
2017/01/17 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
javascript的this关键字详解
2019/05/20 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
vant实现购物车功能
2020/06/29 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
python实现划词翻译
2020/04/23 Python
python简单实现旋转图片的方法
2015/05/30 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
python numpy 按行归一化的实例
2019/01/21 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
全球精选男装和家居用品:Article
2020/04/13 全球购物
学术会议邀请函范文
2014/01/22 职场文书
模范教师事迹材料
2014/02/10 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
社区服务活动报告
2015/02/05 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers