1. Toy模板网首页
  2. > Toy博客

如何搭建一个vue项目

10月前 作者：xiezhr 分类：Toy博客 阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了如何搭建一个vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录
  • 一、nvm 安装与使用
    • 1.1、nvm简介
    • 1.2、nvm下载
    • 1.3、 nvm 安装
  • 二、nodejs安装
    • 2.1 nodejs简介
    • 2.2 nodejs官网
    • 2.3 查看nodejs 所有版本
    • 2.4 选择需要的版本进行安装
    • 2.5 使用指定版本的node
    • 2.6 查看当前node版本
  • 三 、镜像管理工具NRM 安装
    • 3.1 安装NRM
    • 3.2 nrm常用命令
  • 四 、创建vue项目
    • 4.1 安装vue-cli脚手架
    • 4.2 查看脚手架版本
    • 4.3 创建vue项目
      • 4.3.1 图形化界面创建
      • 4.3.2 命令行创建
    • 4.4 vue项目简介
    • 4.5 运行vue项目
  • 五、项目开发工具推荐
  • 六、安装vue调试工具
    • 6.1 调试工具下载地址
    • 6.2 安装调试工具

一、nvm 安装与使用

1.1、nvm简介

nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs

1.2、nvm下载

①github下载
https://github.com/coreybutler/nvm-windows/releases
如何搭建一个vue项目
②百度网盘下载
链接：https://pan.baidu.com/s/18FZuhmw7OCFeLFpQmf7u6w
提取码：lnaf

1.3、 nvm 安装

① 双击nvm-setup.exe可执行文件
如何搭建一个vue项目
② 选择nvm安装路径
如何搭建一个vue项目
③选择nodejs安装路径
如何搭建一个vue项目
④安装
如何搭建一个vue项目
⑤检查是否安装成功

C:\Users\xiezhr>nvm version
1.1.9

④nvm 常用命令

 # 显示可以安装的所有nodejs版本
nvm list available 
 # 安装指定版本的nodejs
nvm install <version> 
# 显示已安装版本列表
nvm list
# 使用指定版本node
nvm use [version]
# 卸载指定版本node
nvm uninstall <version>

二、nodejs安装

2.1 nodejs简介

Node.js is an open-source, cross-platform JavaScript runtime environment.
Node.js是一个开源、跨平台的JavaScript运行时环境。

2.2 nodejs官网

https://nodejs.org/en/

如何搭建一个vue项目

2.3 查看nodejs 所有版本

nvm list available

C:\Users\xiezhr>nvm list available
|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   18.10.0    |   16.17.1    |   0.12.18    |   0.11.16    |
|    18.9.1    |   16.17.0    |   0.12.17    |   0.11.15    |
|    18.9.0    |   16.16.0    |   0.12.16    |   0.11.14    |
|    18.8.0    |   16.15.1    |   0.12.15    |   0.11.13    |
|    18.7.0    |   16.15.0    |   0.12.14    |   0.11.12    |
|    18.6.0    |   16.14.2    |   0.12.13    |   0.11.11    |
|    18.5.0    |   16.14.1    |   0.12.12    |   0.11.10    |
|    18.4.0    |   16.14.0    |   0.12.11    |    0.11.9    |
|    18.3.0    |   16.13.2    |   0.12.10    |    0.11.8    |
|    18.2.0    |   16.13.1    |    0.12.9    |    0.11.7    |
|    18.1.0    |   16.13.0    |    0.12.8    |    0.11.6    |
|    18.0.0    |   14.20.1    |    0.12.7    |    0.11.5    |
|    17.9.1    |   14.20.0    |    0.12.6    |    0.11.4    |
|    17.9.0    |   14.19.3    |    0.12.5    |    0.11.3    |
|    17.8.0    |   14.19.2    |    0.12.4    |    0.11.2    |
|    17.7.2    |   14.19.1    |    0.12.3    |    0.11.1    |
|    17.7.1    |   14.19.0    |    0.12.2    |    0.11.0    |
|    17.7.0    |   14.18.3    |    0.12.1    |    0.9.12    |
|    17.6.0    |   14.18.2    |    0.12.0    |    0.9.11    |
|    17.5.0    |   14.18.1    |   0.10.48    |    0.9.10    |

This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases

2.4 选择需要的版本进行安装

nvm install [version]

# 安装16.17.1版本
C:\Users\xiezhr>nvm install 16.17.1
Downloading node.js version 16.17.1 (64-bit)...
Extracting...
Complete

Installation complete. If you want to use this version, type
nvm use 16.17.1

2.5 使用指定版本的node

C:\WINDOWS\system32>nvm use 16.17.1
Now using node v16.17.1 (64-bit)

注：在执行上面命令中可能会报如下错，只需要将cmd切换到管理员登录即可解决
如何搭建一个vue项目

2.6 查看当前node版本

# 查看node版本
C:\Users\xiezhr>node -v
v16.17.1
# 查看npm版本
C:\Users\xiezhr>npm -v
8.15.0

三 、镜像管理工具NRM 安装

3.1 安装NRM

C:\Users\xiezhr>npm install -g nrm
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 58 packages in 6s
npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.19.2 to update!
npm notice

3.2 nrm常用命令

# 查看镜像列表
nrm ls
# 查看当前使用的镜像
nrm current 
# 添加镜像
nrm add <名称> <远程地址或私服地址>
# 删除镜像
nrm del <名称>
# 切换镜像
nrm use <名称> 
# 测试镜像网络传输速度
nrm test <名称>
# 查看nrm版本号
nrm <-version | -V> 
# 查看nrm相关信息
nrm <-help | -h>
# 打开镜像主页
nrm home <名称> [browser]
# 上传npm包或命令程序
nrm publish [<tarball>|<folder>]

四 、创建vue项目

4.1 安装vue-cli脚手架

#安装最新版本的脚手架
npm install -g @vue/cli   
#卸载脚手架
npm uninstall -g @vue/cli

如何搭建一个vue项目

4.2 查看脚手架版本

# 查看vue脚手架版本，注意V是大写
vue -V

如何搭建一个vue项目

4.3 创建vue项目

4.3.1 图形化界面创建

①命令行输入

C:\Users\xiezhr>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

②浏览器输入http://localhost:8000 后到创建界面
如何搭建一个vue项目
③选择项目路径创建项目
如何搭建一个vue项目
④输入项目名称
如何搭建一个vue项目
⑤选择vue版本
如何搭建一个vue项目
⑥ 创建成功
如何搭建一个vue项目

4.3.2 命令行创建

① 切换到工作空间

cd E:\xiezhrspace\vue-study

如何搭建一个vue项目

② 执行命令创建工程

vue create sec-vue

如何搭建一个vue项目
如何搭建一个vue项目

4.4 vue项目简介

如何搭建一个vue项目

4.5 运行vue项目

cd 命令行切换到vue项目路径下,上面创建了两个vue项目，路径分别为
E:\xiezhrspace\vue-study\first-vue
E:\xiezhrspace\vue-study\sec-vue
然后执行以下命令

npm run serve

如何搭建一个vue项目
浏览器输入http://localhost:8080 ，出现如下界面，那么说明我们已成功搭建了一个vue项目~(●'◡'●)
如何搭建一个vue项目

五、项目开发工具推荐

  • vscode
    下载地址：https://code.visualstudio.com/
  • webstom
    下载地址：https://www.jetbrains.com/webstorm/download/#section=windows
    注册工具（你懂的，哈哈~ 2021.3.1版本实测可用，其他版本的没试过）：
    链接：https://pan.baidu.com/s/1NKv0sJ68On10pKCkUeECZQ
    提取码：e2k5

六、安装vue调试工具

6.1 调试工具下载地址

链接：https://pan.baidu.com/s/1TT5WC-A7SB_m7otMfMZPOw
提取码：n3o0

如何搭建一个vue项目

6.2 安装调试工具

① 点开谷歌浏览器的扩展程序
如何搭建一个vue项目
②选择开发者模式，并将下载好的crx 文件托拽进来即可
如何搭建一个vue项目文章来源地址https://www.toymoban.com/news/detail-445867.html

到了这里，关于如何搭建一个vue项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 如何从0到1搭建一个SpringBoot项目

    如何从0到1搭建一个SpringBoot项目

    SpringBoot是大家使用最多的一个Java框架了，今日就来详细介绍一下如何去创建一个SpringBoot项目 首先要来看你的IDEA版本，如果你的IDEA是【专业版】的，那么你就无需安装任何的插件，直接就可以创建 SpringBoot 的项目了 但如果你的IDEA版本是【社区版】的话，就需要考虑地仔细

    2024年02月03日
    浏览(38)
  • 初级 - 如何搭建一个Java Web项目 - 记录

    初级 - 如何搭建一个Java Web项目 - 记录

    Intellij IDEA 一般可以通过两种方式创建 Spring Boot 项目： 使用 Maven 创建 使用 Spring Initializr 创建 Tips: 标题选项后的 感叹号 ！ 的是重点配置 这里笔者选择的是 2.x 版本的 Spring Boot，不勾选 Download pre-built … 1. 取消download pre-built shared indexes自动下载 Developer Tools 选项 ！ 1. Spring

    2024年02月07日
    浏览(50)
  • mac下安装vue cli脚手架并搭建一个简易项目

    mac下安装vue cli脚手架并搭建一个简易项目

    1、确定本电脑下node和npm版本是否为项目所需版本。 2、下载vue脚手架 3、创建项目 如果有node，打开终端，输入node -v和npm -v , 确保node和npm的版本，(这里可以根据自己的需求去选择，如果对最新版本的内容有要求，也可以选择最新版本)如果没有node，可以点击nodejs官网去下载

    2024年02月15日
    浏览(98)
  • 如何搭建一个简单的springCloudAlibaba项目，并实现基本的使用

    如何搭建一个简单的springCloudAlibaba项目，并实现基本的使用

    微服务是一种软件架构风格，它将一个大型应用程序拆分成一组更小、独立的服务，每个服务都可以独立开发、部署和扩展。每个服务都有自己的业务逻辑和数据库，并且通过轻量级通信机制（如RESTful API）来相互通信。 微服务架构的优点包括 可扩展性：由于每个服务都是独

    2024年01月21日
    浏览(61)
  • 如何使用vue ui创建一个项目？

    如何使用vue ui创建一个项目？

    首先打开cmd 输入vue ui 等待浏览器打开一个窗口，按照下图操作  在\\\"功能页面\\\"中，各个插件代表以下意思： Babel：Babel是一个JavaScript编译器，用于将ES6+代码转换为向后兼容的JavaScript版本，以确保代码在旧版本的浏览器上正常运行。 TypeScript：TypeScript是一种由微软开发的静态

    2024年02月13日
    浏览(52)
  • 从0搭建Vue3组件库(十):如何搭建一个 Cli 脚手架

    从0搭建Vue3组件库(十):如何搭建一个 Cli 脚手架

    本篇文章将实现一个名为 create-easyest 脚手架的开发,只需一个命令 npm init easyest 就可以将整个组件库开发框架拉到本地。 首先,我们在 packages 目录下新建 cli 目录,同执行 pnpm init 进行初始化,然后将包名改为 create-easyest 这里需要知道的是当我们执行 npm init xxx 或者 npm create xxx 的

    2024年02月08日
    浏览(96)

  • 如何开发和搭建一个优质的Web3.0/区块链项目？

    在区块链世界和 加密领域 中 、Web3 绝对算得上是一个耀眼的明星了，现在的风头明显盖过前两位老大哥了。 相信许多人也都想尝试熟悉或者参与区块链，加密领域和 Wed3之中，今天我们就来谈谈如何以软件开发的角度，来搭建一个优质的区块链相关项目。 如何创建一个优质

    2024年01月16日
    浏览(62)
  • webstorm运行Vue项目环境配置(如何从0配置运行一个写好的vue项目)

    webstorm运行Vue项目环境配置(如何从0配置运行一个写好的vue项目)

     1.在Node官网上下载zip安装包。 网址： https://nodejs.org/dist/v16.14.0/ (需要哪个版本就把/v后的版本号改成哪个版本)  2.下载完成后解压至需要的文件夹下。  3.在此文件夹下新建两个文件夹： node_cache：npm缓存路径 node_global：npm全局安装路径 4.配置环境变量 右击我的电脑 - 点击属

    2024年01月16日
    浏览(49)

  • 多个Vue项目如何共用一个node_modules

    多个项目共同用一个项目的node_modules 问题：多个vue项目的node_modules依赖包相同，怎么共用同一个node_modules依赖包？ 1.以管理员身份打开命令窗口cmd 2.输入命令：mklink /d 需要链接的项目地址 引用的源文件项目地址 1.如：源文件项目地址为：D:worksourceFilenode_modules 2.如：需要链

    2024年02月04日
    浏览(49)
  • 如何使用Vue的ui界面创建一个新项目

    如何使用Vue的ui界面创建一个新项目

    第一步： win+r打开命令提示符，然后输入cmd后回车。 第二步： 在命令行输入命令vue ui(中间有空格)后回车，弹出ui界面。 第三步： 点击创建，双击地址栏确定我们要保存框架的地址，回车确定该地址，然后点击下面的   第四步： 完成第三步进入以下界面： 依次输入项目名

    2024年02月05日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包