位置: IT常识 - 正文

vue开发环境搭建及配置(windows)(vue环境搭建的几种方法)

编辑:rootadmin
一、安装node.js 参考教程:https://www.runoob.com/nodejs/nodejs-install-setup.html 中文官网:https://nodejs.org/zh-cn/download/ 历史版本:https://nodejs.org/zh-cn/downloa ...

推荐整理分享vue开发环境搭建及配置(windows)(vue环境搭建的几种方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue开发环境配置,vue运行环境搭建详解,vue环境搭建的几种方法,vue开发环境配置,vue开发环境搭建步骤,vue运行环境搭建详解,vue开发环境搭建步骤,vue项目开发环境,内容如对您有帮助,希望把文章链接给更多的朋友!

一、安装node.js

参考教程:https://www.runoob.com/nodejs/nodejs-install-setup.html

中文官网:https://nodejs.org/zh-cn/download/

历史版本:https://nodejs.org/zh-cn/download/releases/

1、首先检查一下电脑是否安装node.js。点击开始-搜索cmd-回车,在命令行输入node -v,回车,如果出现“'node' 不是内部或外部命令,也不是可运行的程序...”时说明没有安装node.js。

2、下载node.js。打开https://nodejs.org/zh-cn/download/,根据你的系统选择相应版本下载。(推荐LTS:长期维护版)

注:如果您的系统是Windows Server 2008或者win7,则不能安装太高版本的node.js,只能支持到v13版本,v14及以上都安装不了。否则会出现以下提示。

经测试,Windows Server 2008或者win7 可以安装v13.14.0。

3、安装node.js。参考教程:https://www.runoob.com/nodejs/nodejs-install-setup.html。双击下载好的安装文件进行安装。其中选择安装路径这一步默认为 "C:\Program Files\nodejs\" ,建议修改为非系统盘。其他按照教程一直点击下一步则可。

4、检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

可以看到环境变量中已经包含了C:\Program Files\nodejs\。由此得知,.msi格式的安装包已经将node.js添加到系统环境变量path中,所以不需要我们再配置环境变量了。

5、检查node是否安装成功。在cmd里执行node -v查看node版本信息或者验证是否安装成功:

由于新版的node.js已经集成了npm,所以安装node的同时也安装好了npm。可以在cmd里执行npm -v查看npm版本信息:

出现以上内容/版本号信息均代表安装成功。注:node自带npm但不是最新版本,需要命令更新:npm install -g npm 。

二、设置nodejs的全局安装路径和缓存路径。

1、在nodejs安装路径下,新建node_global和node_cache两个文件夹。此处node.js安装路径为:D:\Program Files\nodejs。

2、设置缓存文件夹。在cmd命令下执行:

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

3、设置全局模块存放路径。在cmd命令下执行:

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

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

三、基于Node.js安装cnpm(淘宝镜像)。

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

检查是否安装成功:输入 cnpm -v 。

四、安装vue命令行工具,即vue-cli 脚手架。

在cmd命令下执行:

npm install -g vue-clivue开发环境搭建及配置(windows)(vue环境搭建的几种方法)

或者用cnpm:

cnpm install -g vue-cli

进行全局安装。使用淘宝镜像安装环境和依赖包会更快,推荐使用cnpm。

安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

注:如果出现“'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件”的报错,可以参考https://blog.csdn.net/m0_48276047/article/details/113926266解决。

五、创建vue项目。

1、首先在D盘下新建一个文件夹,命名为vue_project,作为要存放vue项目的目录(此处我以C盘示范)。然后使用命令行cd进入到该存放目录输入:

vue init webpack vuedemo

vuedemo 就是你要创建的项目名称,可自定义。命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹。

选项说明:

Project name (vuedemo) 项目名称,可直接回车,使用括号中默认名字(注意这里的名字不能有大写字母,如果有会报错)

Project description (A Vue.js project) 项目描述,也可直接点击回车,使用默认描述

Author () 作者,输入你的名字,确定则回车

Vue build (Use arrow keys) 构建模式,默认选择第一种> Runtime + Compiler: recommended for most users 运行时+编译器:建议大多数用户使用 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere仅限运行时:大约6KB min+gzip,但模板(或任何特定于Vue的HTML)只允许在.Vue文件中使用-其他地方需要呈现函数

Install vue-router? (Y/n) 是否安装引入vue-router 这是官方的路由,大多数情况下都使用建议y

Use ESLint to lint your code? (Y/n) 是否使用ESlint语法,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用,建议y

接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接选第一个回车

Set up unit tests (Y/n) 是否安装单元测试 建议n

Setup e2e tests with Nightwatch? (Y/n) 是否和Nightwatch建立端到端的测试 建议n

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 是否在项目创建之后运行“npm install” 建议选择第三个Yes, use NPM 是的 用npm 建议默认 Yes, use Yarn 是的 用yarn 跟npm没什么大的区别 >No, I will handle that myself 不 我要自行安装 (选择此项之后 后续仍通过npm install 再次安装)

.......回车之后 等待安装

回答完选项后如上图开始构建vue项目。

2、构建完成后,可以看到存放目录下多出了一个项目文件夹vuedemo:

然后cd进入这个文件夹路径下,执行 npm install 安装依赖:

npm install :安装所有的模块,如果是安装具体的哪个模块,在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装(这个文件里面是不允许有任何注释的),每个使用npm管理的项目都有这个文件,是npm操作的入口文件。因为是初始项目,还没有任何模块,所以我用npm install 安装所有的模块。安装完成后,目录中会多出来一个node_modules文件夹,这里放的就是所有依赖的模块。

依赖安装好后,vuedemo文件夹里的目录是这样的:

3、cd进入vuedemo项目文件夹下,执行 npm run dev ,启动项目。

4、在浏览器地址栏输入http://localhost:8080,访问这个vue项目,启动成功后浏览器会默认打开一个“欢迎页面”:

至此,windows下vue开发环境搭建及配置,并创建一个vue项目完成。

本文链接地址:https://www.jiuchutong.com/zhishi/303253.html 转载请保留说明!

上一篇:PHP Composer 虚拟依赖包 - 实现按需载入钉钉对应功能模块的 php sdk(php虚拟主机)

下一篇:忘记了python安装在哪里怎么办(python安装后找不到了)

  • 营业税金及附加计算公式
  • 一般纳税人附加税优惠政策2023
  • 非税收入票据可以手写吗
  • 应付账款里的暂估
  • 小规模计提增值税
  • 劳务费免税发票的政策规定
  • 企业理财收入如何确定
  • 员工收到现金工资怎么写收据
  • 单式记账法可以进行试算平衡吗
  • 科目汇总表的登记方法
  • 每股收益无差别点公式
  • 不随物品一起销售的包装物怎么做账?
  • 未开票收入改为开票收入做账
  • 股东分配红利交什么税
  • 企业购进废旧厂房的分录
  • 购买车间用的材料怎么做分录
  • 应付利息与应付利息区别
  • 税务局返还的代征代扣要交增值税吗
  • 违约金收入计入应纳税所得额吗
  • 企事业承包承租方缴纳的管理费税费
  • 金税盘开的发票显示未报送怎么办
  • 代扣车船税的手续有哪些
  • 付款时收到应收票据会计分录怎么做?
  • 工资先发一半
  • 折旧计算所得税吗
  • 广告公司怎么结转成本
  • 余款退回会计分录
  • 随机赠送是啥意思
  • 购入黄金产品怎么入账
  • thinkphp paginate
  • 股权转让分期付款协议
  • 每季度预缴所得税怎么算
  • 发票联和抵扣联区别
  • thinkphp5执行流程
  • 酒店的原材料和包装
  • 伊斯塔神
  • 弥补以前年度亏损后缴纳所得税
  • 西部大开发的主要政策措施是什么?
  • 结转代销成本
  • 非成品柴油用途
  • 深度测试软件
  • 融资租入的机器设备属于什么科目
  • 固定资产到期后残值怎么处理
  • 工商年报基本养老保险缴费基数
  • python27文件夹
  • 暂估入库成本处理
  • 出租车发票上没有税务局的印章能报销么
  • 个人申请退税要交税吗
  • 承兑汇票大回头是什么意思
  • php mysql教程
  • 收到税局退款
  • 存货跌价准备如何影响利润
  • 公司基建维修承诺书
  • 给客户减免的货款怎么做账
  • 租户押金抵房租
  • 分包工程 税务 账务处理
  • 事业单位可以报考事业单位吗
  • 计提的意义
  • linux如何读
  • mac怎么复制文件路径地址
  • win8调分辨率
  • xp系统插u盘没反应怎么解决
  • win7系统运行速度提升
  • vim编辑器命令大全
  • win8 蓝牙
  • win10能运行的单机游戏
  • 3ds怎么用3ds格式
  • js继承的关键字
  • activity传递数据
  • linux系统下hosts文件详解及配置
  • cocos2dx4.0入门
  • mailto的使用技巧分享
  • jQuery实现表格文本框淡入更改值后淡出效果
  • 数据类型 python
  • 个人总结的几个方面
  • 增值税计税依据含运费吗
  • 烟台税务查询系统网址
  • 大走访 方案
  • 公寓限购是好事吗
  • 上市公司季报有哪些内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设