WIN10下搭建vue开发环境

好记性不如烂笔头。

说明:下面任何命令都是在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。

如果你从GitHub上新下载了一个项目,项目中可能会缺少一个名为node_modules的文件夹,要想让它运行,必须

1.进入项目文件下

2.npm install

3.npm run build

4.npm install npm-cli

5.npm run dev

下次再运行的时候,只需进入项目,再npm run dev即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33466.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bugku——分析(流量分析)题解

目录 1,flag被盗 2,中国菜刀 3,这么多数据包 4,手机热点 5,抓到一只苍蝇 6,日志审计 7,weblogic 8,信息提取(超详细) 9,特殊后门 1&…

CTF 总结04:win11+冰蝎4.0.6安装[更新中]

问题描述 昨天在刷题的时候,发现可能需要下载冰蝎~ win11冰蝎4.0.6,本人安装的时候遇到了一些坑,所以在这里简单说一下~ 冰蝎简介 冰蝎是一个动态二进制加密网站管理客户端,它使用AES加密算法对流量进行加密,难以被…

微软宣布 AI 聊天机器人必应聊天已向所有人开放,使用方法说明

微软宣布 AI 聊天机器人必应聊天已向所有人开放,使用方法说明 先用chrome搜索必应的地址必应搜索,结果如下图所示: 点击了解详细信息,网页会跳转到微软新必应的介绍页面,如下所示: 到这里大家就应该知道怎…

人工智能实战项目(python)+多领域实战练手项目

人工智能实战项目 大家好,我是微学AI,本项目将围绕人工智能实战项目进行展开,紧密贴近生活,实战项目设计多个领域包括:金融、教育、医疗、地理、生物、人文、自然语言处理等;帮助各位读者结合机器学习与深…

chatgpt赋能Python-pythonheader

Python Header:为什么它对SEO很重要? 在网页开发和建立过程中,Python Header是一个非常重要的元素。Python Header是一个HTTP请求的部分,其中包含了对请求的描述,以及执行此请求所需的任何信息。因此,Pyth…

解决:闹钟设置的自定义歌曲响铃时不会播放仅震动【Apple Music】【iOS】

文章目录 1、问题描述2、解决策略3、Q&A4、感受5、Tips 1、问题描述 自带铃声和震动脑瓜子嗡嗡的,幸好有apple music,在闹钟中可以轻松地选择你放入资料库中的任意一首音乐作为铃声。 奇怪的是,闹钟响起,仅震动,没…

微信公众平台登陆小程序后,在 开发-开发者工具 下,找不到 腾讯云

新版的微信公众平台在 “开发”-“开发者工具”下面只有“腾讯位置服务”,并没有大家所说的腾讯云,没法开通腾讯云服务。根据官方所说是把入口隐藏起来了。 我找了好久终于找到怎么开通了: 先去腾讯云官网注册/登录,登录后左上角…

Web端实现定位(使用腾讯地图实现)

1、腾讯地图提供定位服务的API&#xff0c;官方网址&#xff1a; 点击打开链接 2、从腾讯地图API官网注册一个开发秘钥 3、根据官方文档引入js文件 <script type"text/javascript" src"https://3gimg.qq.com/lightmap/components/geolocation/geolocation.…

【腾讯云IM】即时通讯的登录,登出,用户列表,私聊,图片发送

uniapp即时通讯 1&#xff0c;初始化&#xff08;刚开始就紧跟着文档走&#xff09;2&#xff0c;App.vue中项目引入腾讯云&#xff0c;&#xff08;附上账号在其他地方登陆的监听&#xff09;3&#xff0c;登录前必需3.1&#xff0c;获取登录id3.2&#xff0c;生成userSig&…

腾讯云开发者平台

1.应用场景 轻量级代码托管产品, 2.学习/操作 2.1 介绍 官网: coding.net 腾讯云开发者平台是腾讯云与 CODING 共同为开发者打造的云端工具平台&#xff0c;旨在为更多的开发者带去便捷、高效的 开发体验&#xff0c;提供包括需求管理、代码编写、代码管理、代码运行的整套系…

上传图片到腾讯云(海外服务器)com.qcloud5.5.4版本

问题描述&#xff1a;上传图片至腾讯云服务器&#xff0c;存储桶Region一直在国内地址&#xff0c;访问正常的&#xff0c;新启一个项目&#xff0c;存储桶Region迁移到孟买ap-mumbai区域&#xff0c;出现上传不成功 问题原因&#xff1a; <dependency><groupId>…

微信小程序接入腾讯云实时音视频TRTC----基本使用

前言:虽然说的有点乱,我觉得有必要说一下什么是音视频与整体开发需要些什么东西,因为当时我也是不知道这是啥? .我的理解音视频就是类似微信视频通话的东西,以自己的角度来看,我与好友建立视频的步骤简单来讲就是我把我的视频信息推送到微信,微信处理发给我好友,然后我再将好友…

【新知实验室】手把手实现腾讯云音视频应用

腾讯云音视频是什么&#xff1f; 腾讯云音视频&#xff08;TRTC&#xff09;提供一站式视频解决方案&#xff0c;包括点播直播、实时视频通话、短视频等视频服务&#xff0c;广泛应用于在线视频、电商、游戏直播、在线教育等场景。实时音视频基于腾讯21年来在网络与音视频技术上…

TBS腾讯浏览服务的SDK接入

Share Only 版 引入依赖库compile com.jakewharton:butterknife:7.0.1&#xff0c;与项目本身无关&#xff0c;不喜欢findViewById而已&#xff0c;这里有个小坑&#xff0c;最新版本的butterknife结合插件使用可能会导致findViewById或者onClick绑定失败…将shareOnly版本的j…

web端对接语音通话(腾讯云)

实时音视频 实时语音通话(Web) - 场景实践 - 文档中心 - 腾讯云 按照要求注册腾讯云账号&#xff0c;跑通demo 1、集成TRTCCalling组件 // npm方式安装 npm install trtc-js-sdk --save npm install tim-js-sdk --save npm install tsignaling --save npm install trtc-calli…

新知实验室基于腾讯云实时音视频WEB端实验

腾讯实时音视频&#xff08;Tencent Real-Time Communication&#xff0c;TRTC&#xff09;主要用于互动直播和多人音视频。支持低延时直播观看、实时录制、屏幕分享、美颜特效、立体声等能力&#xff0c;还能和直播 CDN 无缝对接&#xff0c;适用于互动连麦、跨房 PK、语音电台…

腾讯云IM-SDK集成(web端)完成IM登录

一脸懵逼的看着腾讯云的文档&#xff0c;完成了所谓的采坑之旅 &#xff08;1&#xff09;很多人估计公司也需要用到聊天&#xff0c;以及音视频的功能&#xff0c;那么作为萌新的我&#xff0c;当然也是一来公司便得知需要用到这个技术&#xff0c;当时我是懵逼的&#xff0c…

[Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC

[Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC 即时通信TIM官网地址 即时通信TIM SDK API文档地址 实时音视频TRTC官网地址 实时音视频TRTC SDK API文档地址 概念与可能造成疑惑的问题 SDK 是什么&#xff1f; Github 地址 腾讯云将底层与后台代码封装混淆之后生成…

腾讯云部署清华大学ChatGLM-6B实战

简介&#xff08;来自官方&#xff09; ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别…

Chat GPT的到来,对普通人来说是福还是祸?

AI机器人的功能可能比我们想象的更大&#xff0c;可以创作也可以模拟人类的语言行为&#xff0c;与人类进行自然的聊天交流。同时已经开始代替人类做一些基础的工作&#xff0c;未来可能代替更多的人类工作。人工智能的出现也值得我们人类自己深思&#xff0c;如果我们的工作被…