如何搭建Vue开发环境的步骤

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情

  相信很多人在刚开始学习Vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,要是隔断时间想要重新搭建第二次的时候,难免会有一些混乱,所以今天想整理出来;

  :在搭建vue的开发环境之前,一定一定要先下载Node.js,Vue的运行是要依赖于Node的npm的管理工具来实现,Node可以在官网或者中文网里面下载,根据自己的电脑选择是32位还是64位 ,网址:http://nodejs.cn

在这里插入图片描述
  二:下载好Node之后,打开docs管理工具,先看看Node安装成功了没有,输入node -v,回车,会输出Node的版本号,

在这里插入图片描述

  这样就已经是安装成功了,由于在国内使用npm是非常慢的(npm install -g vue-cli),所以在这里我们推荐使用淘宝npm镜像,使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具:npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
  :淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入Vue,出来Vue的信息,说明安装成功;

在这里插入图片描述
  :搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议尽量不要装在C盘,因为Vue下载下来的文件比较大,如果要改盘的话,直接输入G:回车就可以直接改盘;

在这里插入图片描述
  然后我们开始创建新的项目输入命令:vue init webpack my-project 回车,my-project是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,这个我们在项目要用到,所以就输入y 回车;

在这里插入图片描述
  下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的;

在这里插入图片描述
  :文件夹已经下载好了,现在就可以进入文件夹,输入:cd my-project 回车,因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,输入命令:cnpm install

在这里插入图片描述
  :需要安装 Vue 路由模块 vue-router 和网络请求模块 vue-resource的,输入:cnpm install vue-router vue-resource --save

在这里插入图片描述

下面我简单的说明下各个目录都是干嘛的:

在这里插入图片描述
   :已经安装好之后,现在要来测试一下我们下载好的模板能不能正常的运行,在命令行输入: cnpm run dev 回车即可,

在这里插入图片描述
  注意:8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080 就可以打开默认的模板了;

在这里插入图片描述

这样,我们的Vue基础项目已经安装并运行起来了,已经踏入了Vue的大门了,完结!

▼更多相关技术干货,请扫描关注公众号▼

在这里插入图片描述

如何搭建一个vue项目(完整步骤) 查看版本的两种方式 出现版本号则说明安装成功(最新的以官网为准) 这里注意:安装vue-cli对node.js的版本是有要求的 装的两种方式:输入cmd命令 查看安装的版本(显示版本号说明安装成功) 如果你原来有版本或者版本比较低,可以升级... 阅读详情

相关推荐

搭建vue开发环境步骤

有的小伙伴最开始搭建vue之后,再次搭建就发觉有点忘了。这次总结一下流程 搭建vue开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,网址:http://nodejs.cn; 2. 下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号...

YH_ang_eng的博客 1261

vue环境搭建

安装vue-cli,nodejs,cnpm,webpack

地平线 9137

手把手教你用WF100DPZ数字压力传感器搞定I2C/SPI通信(附完整寄存器解析)

本文详细解析了WF100DPZ数字压力传感器的I2C与SPI通信驱动方法,涵盖硬件连接、寄存器配置、数据读取流程及常见问题排查。该传感器内置24位ADC和出厂校准,通过实战代码演示了如何稳定获取高精度压力与温度数据,帮助开发者快速集成到嵌入式项目中。

weixin_28285943的博客 330

vue开发环境搭建

执行 node -v 和 npm -v 可查看node和npm的版本号:在nodejs安装路径下,新建node_global和node_cache两个文件夹 执行如下命令,设置缓存文件路径npm config set cache "自己的\node_cache" 执行如下命令,设置全局依赖包存放路径npm config set prefix "自己的\node_global"进入 C:\Windows\System32 找到cmd.exe,以管理员身份运行打开cmd窗口,执行如下命令:npm install

qq_18238727的博客 1416

Vue笔记-1-环境搭建/入门学习

Vue系列入门教程

の博客 4676

Vue的介绍以及环境搭建

一、前言 Vue单页Web应用 Vue组件化开发 Node.js完成服务器功能 ElementUI有效实现界面 弹性盒子布局与SASS 二、Vue组件 1、全局注册组件 2、局部注册组件 三、Vue环境搭建 1.安装Vue的前置条件是安装node.js 2.安装vue脚手架 3.在visual studio code中新建vue项目 4.vue.js文件源代码的下载 三、Vue程序运行

Lucky的博客 1万+

搭建Vue开发环境步骤

搭建Vue开发环境步骤 Vue算是现在前端工程师都比较常用的框架之一,今天记录一下搭建Vue开发环境步骤,方便日后查看。 1.在搭建vue开发环境之前,一定一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网里面下载,根据自己的电脑配置选择是32位还是64位 网址:http://nodejs.cn 2.下载好node之后,快捷键ctrl+...

qq_42575395的博客 517

搭建vue开发环境步骤,六步完成

搭建vue开发环境步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:http://nodejs.cn;注意是32还是64位;二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号。 三...

b247028086811015的博客 217

Mac下vue开发环境搭建步骤以及新建项目

Mac下vue开发环境搭建步骤以及新建项目 一、Vue环境搭建 cnpm是淘宝对npm的镜像,如果安装速度慢建议可以尝试cnpm 1.安装Node环境 和java需要安装JDK一样,vue也要安装Node环境 查看node.js当前版本 $ node -v 安装方法参考node.js官网 如何安装Node.js 1.直接在官网下载安装包 2.使用homebrew下载 $ brew install node 2.安装npm/更新npm 新版本Node.js已经包含安装

weixin_44099571的博客 840
下一篇: 利用Xshell修改Linux默认SSH端口号等详细配置
时尚小T
博客等级 码龄11年 3粉丝 4原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值