使用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 相关文章推荐
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 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的魔术常量__METHOD__简介
2014/07/08 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
srcElement表格样式
2006/09/03 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
js返回顶部实例分享
2016/12/21 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python http接口自动化脚本详解
2018/01/02 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
高一物理教学反思
2014/01/24 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
给领导的检讨书
2014/02/16 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
小班评语大全
2014/05/04 职场文书
中秋晚会策划方案
2014/06/12 职场文书
公司股份合作协议书
2014/12/07 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers