在windows下搭建vueJS开发环境
转自:https://www.cnblogs.com/RexSheng/p/6934413.html
- nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org/mirrors/node/,2019/3/23更新:建议选择v10版本以上,官方最新Vue-Cli4将移除v9的支持

cmd命令行:
node -v //显示node版本 v8.1.2
npm -v //显示npm包管理器版本 5.0.3

- 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm

Cmd命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org


安装vue-cli脚手架构建工具

至此,我们需要的环境及工具已经准备好了。
接下来,我们使用vue-cli来构建项目。
- 首先,我们先选择进入到e我们的工作目录为 E:\个人\VueJS。此目录需先建好,目前是空的,这个工作目录以后会添加各个项目目录。

- 在VueJs目录下,运行命令vue init webpack firstVue。其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。

安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等,此时,我们看到工作目录下已经自动生成了目录firstVue,如下图。

主要用的包都在package.json中,IDE使用的是VSCode,如下图

cd到我们的项目文件夹firstVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)

安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源

安装完依赖包之后,就可以运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。


如果启动过程中出现端口冲突问题,只需要将config目录下的index.js文件中dev端口由8080改为8088


在windows下搭建vueJS开发环境的更多相关文章
- Windows下搭建Git开发环境
Windows下搭建Git开发环境主要有以下三种方法: 1,VS,vs2013和vs2015中已经集成了git插件了 2,msysGit+TortoiseGit 3,msysGit+SourceTre ...
- [转载]在Windows下搭建Android开发环境
http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 在Windows下搭建Android开发环境 | 浏览:30780 | 更 ...
- 【原创】windows下搭建vue开发环境+IIS部署
[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安 ...
- windows下搭建vue开发环境+IIS部署
原创]win10下搭建vue开发环境 https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...
- Windows下搭建PHP开发环境
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- (一)Windows下搭建PHP开发环境及相关注意事项
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- [转]Windows下搭建PHP开发环境
原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要 ...
- Windows下搭建PHP开发环境-WEB服务器
PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...
- windows下搭建vue开发环境+IIS部署 [转]
特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后 ...
随机推荐
- hdu2255 奔小康赚大钱,最大权匹配,KM算法
点击打开链接 最大权匹配 KM算法 算法步骤: 设顶点Xi的顶标为a[i],顶点Yi的顶标为b[i] ⅰ.初始时.a[i]为与Xi相关联的边的最大权值.b[j]=0.保证a[i]+b[j]>=w ...
- 11G新特性 -- archival(long-term)backups
在oracle 10g中,提供了backup ... keep功能来重载配置好的retention策略. 在oracle 11g中,可以重定义backup ... keep命令来创建长期保留的备份,称 ...
- GuavaCache学习笔记二:Java四大引用类型回顾
前言 上一篇已经讲了,如何自己实现一个LRU算法.但是那种只是最基本的实现了LRU的剔除策略,并不能在生产中去使用.因为Guava Cache中使用的是SoftReference去做的value实现, ...
- 6-9-哈夫曼树(HuffmanTree)-树和二叉树-第6章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分 第6章 树和二叉树 - 哈夫曼树(HuffmanTree) ——<数据结构>-严蔚敏.吴伟民版 源码使用说明 链接☛☛☛ <数据结构-C语言版> ...
- Hadoop 2.x 安装常见问题FAQ(一) NodeManager 无法启动问题解决
一.问题描述 在搭建 Hadoop hadoop-2.4.1 集群的最后一步启动集群,在命令窗口并没有报任何错误,但是Slave 节点的 NodeManager进程始终启动不起来.随后查看了后台启动日 ...
- 【iCore1S 双核心板_FPGA】例程十一:Modelsim仿真实验
实验现象: 通过仿真波形,分析输入与输出的关系,可以清晰的看到所添加信号波形的变化与程序所写的一致. 核心代码: module modelsim( input CLK_12M, output FPGA ...
- 关于Python打包运行的一些思路
需求 本地开发python django应用程序,然后放到生产环境运行.使用了tensorflow,手动安装包很麻烦.生产环境不能联网,不能使用 pip freeze. 思路: 使用docker,直接 ...
- Android——Android和SVN::::SVN+delete项目
SVN使用笔记(比较详细) http://www.cnblogs.com/merray/p/4182380.html 删除项目 http://jingyan.baidu.com/article/c74 ...
- Java知多少(37)静态内部类、匿名内部类、成员式内部类和局部内部类
内部类可以是静态(static)的,可以使用 public.protected 和 private 访问控制符,而外部类只能使用 public,或者默认. 成员式内部类 在外部类内部直接定义(不在方法 ...
- mininet下建立拓扑时关于远程控制器的一个小问题
最近重装了系统和mininet后,使用mininet时遇到了一点小问题,一开始忽视了细节,使得自己被这个问题困扰了好一会儿,好在后来还是发现了问题所在,故记录下来. $ sudo mn --topo ...