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

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

  相信很多人在刚开始学习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的大门了,完结!

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

在这里插入图片描述



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/176305.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午10:15
下一篇 2026年3月26日 下午10:16


相关推荐

  • java代码质量检查工具_jvm问题排查

    java代码质量检查工具_jvm问题排查wJa是一款结合DAST、SAST、IAST的综合性应用程序安全分析工具,支持对javaweb程序的安全性进行分析,含有反编译,代码审计,调试jar包,代理追踪等用于分析软件安全的功能。

    2025年11月3日
    5
  • 小波变换原理_小波变换的缺点

    小波变换原理_小波变换的缺点https://www.cnblogs.com/warmbeast/p/7809286.html从傅里叶变换到小波变换,并不是一个完全抽象的东西,可以讲得很形象。小波变换有着明确的物理意义,如果我们从它的提出时所面对的问题看起,可以整理出非常清晰的思路。下面就按照傅里叶–>短时傅里叶变换–>小波变换的顺序,讲一下为什么会出现小波这个东西、小波究竟是怎样的思路。傅里叶变换关于傅…

    2025年6月21日
    4
  • vue 将后台数据时间戳转换成日期格式

    vue 将后台数据时间戳转换成日期格式前言 不同组件多次复用的话 建议在 src 下新建一个 common 文件夹 创建 date js 文件 方便多次复用组件中使用 template div p date formatDate p p date formatDate2 p p date formatDate3 p div template

    2026年3月26日
    1
  • centos7.0 web服务器搭建「建议收藏」

    centos7.0 web服务器搭建「建议收藏」centos7.0web服务器搭建前言按照先易后难排序,在vmware虚拟机环境下模拟,统一防火墙为Firewall,统一在xshell下操作终端实现搭建.(强烈建议新手安装选择带gui服务器这样终端操作可以复制,分析文件,熟系操作之后可以最小安装(如果没有桌面,用xshell连接操作终端比较方便),我就是进过这样的坑)关于搭建分为三步,第一步配置网络(非虚拟机…

    2022年5月28日
    45
  • 快速为已有项目集成后台管理系统

    快速为已有项目集成后台管理系统添加 5 张表 管理员表 sp admin API 日志表 sp apilog 项目配置表 sp cfg 角色表 sp role 角色权限表 sp role permission 系统角色表 droptableife role CREATETABLE sp role id bigint 20 NOTNULLAUTO INCREMENTCOM 角色 id 主键 自增 name varchar 20 NOTNULLCOMME

    2026年3月19日
    1
  • 嵌入式linux kermit,嵌入式开发常用串口工具kermit使用笔记

    嵌入式linux kermit,嵌入式开发常用串口工具kermit使用笔记配置使用 kermit 一直没成功过 今天心血来潮 在 Gentoo 机器上下载安装了 kermit 折腾了半小时才从串口看到开发板启动信息 kermit 很高深的样子 以后就使用它了 1 下载安装 kermit version8 0 211 eixkermit emerge avkermit2 查看安装文件 starby ls l usr bin kermit rwxr xr

    2026年3月18日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号