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

特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:

详细的安装步骤如下:

一、安装node.js

说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具。

node.js的官方地址为:https://nodejs.org/en/download/,如下图所示:

根据自己电脑的具体配置,选择你要下载的安装包,作者选择的是windows 64bit。

下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)。

二、设置global和cache路径

说明:设置路径能够把通过npm安装的模块集中在一起,便于管理。

1、在nodejs的安装目录下,新建node_global和node_cache两个文件夹,作者的安装目录为“D:\Program Files\nodejs\”

2、设置global和cache

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

设置成功后,后续用命令npm install XXX -g安装以后模块就在D:\Program Files\nodejs\node_global\node_modules里

三、安装cnpm

说明:由于许多npm包都是在国外,我们这里用到淘宝的镜像服务器,来对我们依赖的module进行安装,因此首先安装“中国的npm”——cnpm

参考网址如下:http://npm.taobao.org/

安装命令为:

npm install -g cnpm --registry=https://registry.npm.taobao.org

四、设置环境变量(非常重要)

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径

1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。

2、点击环境变量弹出下列对话框:

3、修改用户变量PATH:

选中PATH,点击编辑,在已有的变量后面,加入英文的";",然后把“D:\Program Files\nodejs\node_global”加到后面

4、新增系统变量NODE_PATH:

在下面的系统变量中点击新建,弹出下框,把变量值设置成“D:\Program Files\nodejs\node_global\node_modules”

四、用cnpm安装vue

cnpm install vue -g

五、安装vue命令行工具

cnpm install vue-cli -g

六、创建工程

1、用cd命令来到你将要新建工程的目录,如“C:\Users\Administrator\Desktop\birdhelper>”

创建一个基于 webpack 模板的新项目,工程名为birdhelper。

1、vue init webpack mytest,具体步骤如下图所示:

2、初始化完成后的目录结构如下:

3、定位到mytest的工程目录下

cd mytest

4、安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules

cnpm install

5、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

cnpm run dev

6、有时我们的服务器并不一定是node,也许是IIS,这样我们就需要把工程构建出来,与IIS集成。

构建该项目的命令如下

cnpm run build

将dist文件夹拷贝出来,放到IIS的发布目录,在浏览器中输入IIS设置的本机ip和端口进行访问即可。Good Luck, guys!

至此,我们已经在win10下搭建成功了vue,并能和iis服务器进行集成。为.net框架开发web应用带来了棒棒的vue。

时间: 2024-10-27 05:45:33

windows下搭建vue开发环境+IIS部署的相关文章

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

[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装

windows下搭建vue开发环境实践

Vue.js是一套构建用户界面的 “渐进式框架”.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.2016年,Vue同Angular.React形成三足鼎立的局面.为了提升自己的知识面,今天实践操作一下Vue的环境搭建. 一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js.官方地址为:https://n

Windows下搭建PHP开发环境,整合Apache+PHP+MySQL(举例软件为32位)

原文来自:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html 在原作者的基础上,只是做了详细的解释.避免走弯路.(注:红色字体为本人加的) 一.准备工作-下载所需软件 Apache  httpd-2.2.22-win32-x86-openssl-0.9.8t.msi PHP       php-5.3.10-Win32-VC9-x86.zip MySQL   mysql-5.5.20-win32.msi 二.安装软件 安装A

Windows下搭建PHP开发环境

Windows下搭建PHP开发环境 一.准备工作-所需软件 ·   Apache  \php\httpd-2.2.25-win32-x86-no_ssl.msi ·   PHP \php\php-5.3.1-Win32-VC6-x86.zip ·   Oracle client 10g\php\client 二.安装软件 安装Apache: 双击安装,与安装其他Windows软件没有什么区别,在填Server Infomation时,并没有特殊规定,只要输入的信息符合格式即可. 安装完成之后,在

Cocos2d-x 3.1.1 在Windows下搭建Android开发环境

Cocos2d-x 3.1.1 在Windows下搭建Android开发环境 本篇博客来给大家介绍如何在Windows下搭建Cocos2d-x Android开发环境,笔者前面写了几篇博客都是针对如何对Android项目进行交叉编译的,对应了Cocos2d-x 2.2.3版本和Cocos2d-x 3.0版本,其实3.0版本跟3.1.1是一样的,只是笔者介绍如何不适用命令行对Cocos2d-x Android项目进行交叉编译,而直接在Eclipse进行交叉编译. 前面几篇博客,如果有需要比较差别的

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

原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发环境,需要哪个模块自己安装就行了,或者那个软件需要升级,直接升级那个软件就行了,并不影响其他软件,非常方便. 一.准备工作-下载所需软件 Apache  httpd-2.

Windows下搭建IOS开发环境(一)

我们都知道开发iPhone等ios平台的移动应用时需要使用Mac本,但是Mac本都比较昂贵,所以我们可以采用Windows7上利用VMWare安装Mac操作系统的方法来模拟ios开发环境,达到降低成本的目的. 1.相关配置 操作系统:windows7旗舰版 Work station:VMWare10 Mac操作操作系统:OS X 10.8 2.相关资源下载地址 (1)VMWare10的资源比较多,可以到网上自己下载 http://www.xp510.com/xiazai/ossoft/deskt

WINDOWS下搭建Android开发环境:

推荐链接: 1. http://www.cnblogs.com/skynet/archive/2010/04/12/1709892.html. (个人推荐,这位大神写的相当棒!) 一. 名词解释 JDK,Java开发环境.下载地址:http://www.oracle.com Eclipse,IBM公司开发的一款开源IDE.http://www.eclipse.org Android SDK,Android 开发工具,包含开发Android程序所需类库.源码.文档.案例等资源.http://www

在Windows下搭建Android开发环境

随着移动互联网的迅速发展,前端的概念已发生很大的变化,已不仅仅局限在网页端.而Android系统作为智能机市场的老大,作为前端开发工程师,非常有必要了解和学习.但面对众多学习资料,站在前端开发工程师的角色,怎样挑选出合适的路进行快速学习,而不必浪费大量时间去摸索,该系列文章希望能帮助到小伙伴们. 文章会挑选几个实际的例子,贯穿在整个系列中,涉及到Java.Android.程序设计等多方面知识,力求让大家快速掌握.俗话说,工欲善其事,必先利其器,系列的第一篇就从Window系统下Android的环