转自:https://www.cnblogs.com/RexSheng/p/6934413.html

  1. nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org/mirrors/node/,2019/3/23更新:建议选择v10版本以上,官方最新Vue-Cli4将移除v9的支持
  2. cmd命令行:

    node -v //显示node版本 v8.1.2

    npm -v  //显示npm包管理器版本 5.0.3

  3. 由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm
  4. Cmd命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org

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

  6. 至此,我们需要的环境及工具已经准备好了。

    接下来,我们使用vue-cli来构建项目。

  7. 首先,我们先选择进入到e我们的工作目录为 E:\个人\VueJS。此目录需先建好,目前是空的,这个工作目录以后会添加各个项目目录。
  8. 在VueJs目录下,运行命令vue init webpack firstVue。其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。
  9. 安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等,此时,我们看到工作目录下已经自动生成了目录firstVue,如下图。

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

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

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

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

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

在windows下搭建vueJS开发环境的更多相关文章

  1. Windows下搭建Git开发环境

    Windows下搭建Git开发环境主要有以下三种方法: 1,VS,vs2013和vs2015中已经集成了git插件了 2,msysGit+TortoiseGit 3,msysGit+SourceTre ...

  2. [转载]在Windows下搭建Android开发环境

    http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 在Windows下搭建Android开发环境 | 浏览:30780 | 更 ...

  3. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  4. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  5. Windows下搭建PHP开发环境

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  6. (一)Windows下搭建PHP开发环境及相关注意事项

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  7. [转]Windows下搭建PHP开发环境

    原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要 ...

  8. Windows下搭建PHP开发环境-WEB服务器

    PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发 ...

  9. windows下搭建vue开发环境+IIS部署 [转]

    特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后 ...

随机推荐

  1. 在Centos6或者7上安装Kafka最新版

    一.官网 http://kafka.apache.org/downloads.html 二.Kafka简介 Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.K ...

  2. shell相关知识点

    一.shell shell中如何支持多线程 shell中如何操作数据库 shell编程中的控制 判断语句 cut sed awk sort exec xargs shell中常用表达 shell处理字 ...

  3. :app:compileDebugJavaWithJavac

    org.gradle.initialization.ReportedException: org.gradle.internal.exceptions.LocationAwareException: ...

  4. 基于ubuntu搭建 WordPress 个人博客

    系统要求:Ubuntu 16.04.1 LTS 64 位操作系统 准备 LAMP 环境:(LAMP 是 Linux.Apache.MySQL 和 PHP 的缩写,是 Wordpress 系统依赖的基础 ...

  5. aaronyang的百度地图API之LBS云[把数据丰富显示1/3]

    中国的IT 需要无私分享和贡献的人,一起努力 本篇博客来自地址:http://www.cnblogs.com/AaronYang/p/3673933.html,请支持原创,未经允许不许转载 一.第一步 ...

  6. 译:2. RabbitMQ Java Client 之 Work Queues (工作队列)

    在上篇揭开RabbitMQ的神秘面纱一文中,我们编写了程序来发送和接收来自命名队列的消息. 本篇我们将创建一个工作队列,工作队列背后的假设是每个任务都交付给一个工作者 本篇是译文,英文原文请移步:ht ...

  7. vue项目eslint环境配置与vscode配置eslint

    eslint基础环境搭建 全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...

  8. 【GMT43智能液晶模块】例程八:ADC实验——电源监控

    实验原理: STM32内部集成三个12位ADC,GMT43的所有电源经过电阻分压接 入到ADC的输入通道内,输入电流经过高端电流检测芯片ZXCT1009F输入 到ADC的输入通道内,从而实现电源监控功 ...

  9. uboot i2c 操作函数记录

    I2C 在 u-boot 上面,有直接操作 I2C 的函数 // drivers/i2c/i2c_core.c // 设置在哪个 I2C bus 上工作 276 int i2c_set_bus_num ...

  10. 小技巧 - CSS中:hover调试

    在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果 ...