使用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获取input表单值的代码
Apr 19 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
3种js实现string的substring方法
Nov 09 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php实现数据库的增删改查
2017/02/26 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
php中上传文件的的解决方案
2018/09/25 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python 调用c语言函数的方法
2017/09/29 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python机器学习之KNN分类算法
2018/08/29 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
25岁生日感言
2014/01/13 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
总经理任命书
2014/03/29 职场文书
平安家庭事迹材料
2014/12/20 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
python使用glob检索文件的操作
2021/05/20 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers