使用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 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
深入剖析Node.js cluster模块
May 23 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
收音机指标测试方法及仪器
2021/03/01 无线电
PHP可变函数的使用详解
2013/06/14 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
js几个验证函数代码
2010/03/25 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
使用K.function()调试keras操作
2020/06/17 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
北大自主招生自荐信
2013/10/19 职场文书
经典的班主任推荐信
2013/10/28 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
小学运动会开幕词
2015/01/28 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
详解Vue router路由
2021/11/20 Vue.js
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL