VUE项目创建

原创 已于 2025-09-23 10:50:03 修改 · 789 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#windows

于 2025-09-23 10:31:07 首次发布

1.NODE安装


一、安装  下一步一直点

  1. 首先，访问nvm-windows的官方GitHub 仓库，并下载最新版本的安装包。确保选择适合您Windows系统的版本。
  2. 双击下载文件nvm-setup.exe，此时，打开安装窗口如下

下载 nvm-windows​​：访问 nvm-windows 的官方 GitHub 发布页面 (https://github.com/coreybutler/nvm-windows/releases)，下载最新的 nvm-setup.exe安装程序。

安装 nvm-windows

  1. ​​运行安装程序​​：双击下载的 nvm-setup.exe，​​建议以管理员身份运行​​

    。

  2. ​​选择安装路径​​：

    • 为 nvm 本体选择一个​​安装路径​​。​​强烈建议使用一个没有中文和空格的路径​​（例如 D:\nvm），否则后续可能出错

      。

    • 为 nvm 管理的 Node.js 版本选择一个​​安装路径​​（即符号链接目录，例如 D:\Program\nodejs）

      。同样建议路径无空格。

  3. ​​验证安装​​：安装完成后，​​以管理员身份打开一个新的命令提示符 (CMD) 或 PowerShell​​，输入 nvm -v或 nvm version。如果显示出版本号（例如 1.1.12），则表示安装成功

二、使用

  1. 打开命令提示符或PowerShell，并输入nvm version命令来验证安装是否成功。如果成功安装，将显示nvm的版本信息。
  2. 使用nvm list available命令查看已安装的Node.js版本。这将列出您计算机上已安装的所有Node.js版本。
  3. 使用nvm list命令查看已安装的Node.js版本。这将列出您计算机上已安装的所有Node.js版本。
  4. 使用nvm install <version>命令安装特定的Node.js版本。将<version>替换为您要安装的版本号。例如，要安装Node.js 14.0.0，可以运行nvm install 14.0.0。
  5. 使用nvm use <version>命令切换到特定的Node.js版本。将<version>替换为您要切换到的版本号。例如，要切换到Node.js 14.0.0，可以运行nvm use 14.0.0。
  6. 使用nvm uninstall <version>命令卸载已安装的Node.js版本。将<version>替换为您要卸载的版本号。
  7. 其他常用命令包括：
  • nvm current：显示当前正在使用的Node.js版本。
  • nvm alias：列出所有已设置的别名及其对应的Node.js版本。

命令

说明

示例

nvm list available

查看所有可安装的 Node.js 版本

-

nvm install <version>

安装指定版本的 Node.js

nvm install 20.10.0

nvm install --lts

安装最新的 LTS（长期支持）版本

-

nvm use <version>

切换到指定版本的 Node.js

nvm use 18.20.2

nvm ls或 nvm list

查看​​已安装​​的所有 Node.js 版本（当前使用标 *）

-

nvm alias default <version>

设置默认使用的 Node.js 版本

nvm alias default 20.10.0

nvm uninstall <version>

卸载指定版本的 Node.js

nvm uninstall 16.13.0

  • 进行安装 (install)、切换 (use)、卸载 (uninstall) 操作时，​​请务必确保是在管理员权限的命令行窗口中进行​​

    。

  • 不同 Node.js 版本的全局 npm 包是相互独立的，切换版本后可能需要重新安装所需的全局包

🗂️ 项目级版本管理

你还可以为每个项目指定所需的 Node.js 版本：

  1. 在项目根目录创建名为 .nvmrc的文件。

  2. 在文件中写入需要的版本号，例如 20.10.0。

  3. 进入该项目目录后，只需执行 nvm use，nvm 便会自动切换至 .nvmrc文件中指定的版本

2.使用 Vue npm命令创建项目

使用 Vue 和 npm 创建新项目：完整指南

在 Vue.js 生态系统中，使用 Vue CLI 是创建和管理 Vue 项目的最佳实践。下面是详细的步骤指南：

准备工作

  1. ​​安装 Node.js 和 npm​​

    • 访问 Node.js 官网下载并安装最新 LTS 版本

    • 安装完成后验证：

      node -v
npm -v

  2. ​​安装 Vue CLI​​

    npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

创建 Vue 项目

方法一：命令行创建（推荐）

# 创建新项目
vue create my-vue-project

# 进入项目目录
cd my-vue-project

# 启动开发服务器
npm run serve

方法二：图形界面创建

# 启动 Vue UI
vue ui

在浏览器中打开 http://localhost:8000，按照图形界面指引创建项目。

项目创建流程详解

1. 选择预设配置

工具

主要功能

关键优势

 

​​Babel​​

JavaScript 编译和转换

浏览器兼容性、支持最新语法

​​ESLint​​

代码质量和风格检查

提高可维护性、统一团队风格

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features

2. 选择功能特性

? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

3. 选择 Vue 版本

? Choose a version of Vue.js that you want to start the project with 
❯ 3.x 
  2.x

4. 配置路由模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

5. 选择 CSS 预处理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
❯ Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus

6. 选择代码规范

? Pick a linter / formatter config:
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier

7. 选择何时进行代码检查

? Pick additional lint features:
❯◉ Lint on save
 ◯ Lint and fix on commit

8. 配置文件存放方式

? Where do you prefer placing config for Babel, ESLint, etc.? 
❯ In dedicated config files 
  In package.json

9. 保存为预设（可选）

? Save this as a preset for future projects? (y/N)

项目结构说明

创建完成后，项目结构如下：

my-vue-project/
├── node_modules/    # 项目依赖
├── public/          # 静态资源
│   ├── favicon.ico
│   └── index.html   # 主HTML文件
├── src/             # 源代码目录
│   ├── assets/      # 静态资源（图片、字体等）
│   ├── components/  # Vue组件
│   ├── router/      # 路由配置
│   ├── store/       # Vuex状态管理
│   ├── views/       # 页面级组件
│   ├── App.vue      # 根组件
│   └── main.js      # 入口文件
├── .gitignore       # Git忽略配置
├── babel.config.js  # Babel配置
├── package.json     # 项目配置和依赖
└── README.md        # 项目说明

常用 npm 命令

# 启动开发服务器
npm run serve

# 构建生产版本
npm run build

# 运行代码检查和修复
npm run lint

# 安装新依赖
npm install package-name --save

# 安装开发依赖
npm install package-name --save-dev

创建 Vue 3 + Vite 项目（可选）

对于更轻量级的项目，可以使用 Vite：

# 创建 Vue 3 + Vite 项目
npm init vite@latest my-vite-project -- --template vue

# 进入项目目录
cd my-vite-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev

常见问题解决

  1. ​​权限问题​​：

    # 解决全局安装权限问题
sudo npm install -g @vue/cli --unsafe-perm

  2. ​​网络问题​​：

    # 使用淘宝镜像
npm config set registry https://registry.npm.taobao.org

  3. ​​Vue CLI 版本问题​​：

    # 更新 Vue CLI
npm update -g @vue/cli

现在你已经成功创建了一个 Vue 项目！接下来可以开始编写你的 Vue 应用了。

虚行
关注
nvm安装与使用详解(Window11)
做笔记/记录遇到的前端bug
02-11 1万+
图文详解，带你一把搞定nvm安装与使用，帮你安装多个node版本，并实现node版本的快速切换
Windows安装nvm【超详细图解】
专业深耕，技术前沿
03-16 2581
通过以上步骤，您就可以在Windows系统上成功安装并配置nvm了。使用nvm可以方便地管理多个Node.js版本，满足不同项目的需求。
NVM 安装 （Windows版本）
最新发布
qq_20236937的博客
10-24 1128
NVM 安装 （Windows版本）
NVM安装和环境配置教程(2024年11月16日)
热门推荐
i_for的博客
12-18 4万+
NVM下载、安装和配置教程-2023年12月18日
npm构建vue项目
wwydh的博客
05-07 924
npm构建vue项目 环境搭建 我们需要先从node.js官网安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。 安装完成之后，打开命令行工具（Mac打开终端），输入 node -v，如图，如果出现相应的版本号，则说明安装成功。 node -v 那么此时你发现你不仅拥有了node环境而且还有了npm包管理器，岂不快哉！ 安装vue-cli脚手架构建工具 在命令行中运行命令 npm...
npm创建vue项目
qq_41425194的博客
07-01 6066
可通过官网下载：https://nodejs.org/en/创建一个自己的文件夹，在文件夹所创建的位置下，搜索cmd打开终端命令行输入命令：npm install -g @vue/cli1.输入命令 vue create demo01（vue create + 文件名）正在上传…重新上传取消 2.创建途中选择第一个即可3.在编译软件中通过cmd打开项目，系统命令行运行npm输入命令 npm run server...
Vue项目创建及配置
L14173233的博客
08-07 2075
Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM（Model-View-ViewModel）的架构模式。MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。Model（模型）：表示应用程序的数据和业务逻辑。在Vue中，模型通常是一个JavaScript对象。View（视图）：表示用户界面。在Vue中，视图通常是使用HTML模板构建的。ViewModel（视图模型）：充当模型和视图之间的中间层。
Vue项目创建及自定义项目配置详解（Manually select features）看这篇就够了！
xiaolouuuu的博客
11-08 1249
这个配置基于 Airbnb 的 JavaScript 风格指南，是一个非常流行且全面的 ESLint 配置。如果你不熟悉代码风格规则，或者想要遵循业界广泛接受的标准，这是一个不错的选择。：这个配置结合了 ESLint 和 Prettier，Prettier 是一个流行的代码格式化工具，它可以自动格式化代码以符合一定的风格。，可以让你使用最新的 JavaScript 语法，同时确保代码能够在当前和旧版的浏览器中运行。这样做的好处是，所有的依赖和配置都在一个地方，方便查看和管理。
SpringBoot + Vue 项目创建详细步骤
weixin_54851039的博客
08-31 4245
我这里是主要是展示如何创建项目（这里前后端是没有分离的，主要就我一个人练练，放一起好看），实现了简单的前后端交互（查询功能）
vue项目创建（仅供参考哦）
12-18
vue项目创建（仅供参考哦）
Python Django Vue 项目创建过程详解
12-26
1、创建项目 打开pycharm 终端，输入如下，创建项目 # 进入pycharm 项目目录下 ...使用vue-cli在根目录创建一个名称叫【frontend】的Vue.js项目作为项目前端 # 使用vue-cli在根目录创建一个名称叫【we
使用npm建立vue工程
weixin_52548565的博客
11-18 4042
npm 建vue项目
使用npm创建vue项目（超详细）
M1234uy的博客
07-29 1万+
文章目录 一、创建项目环境 创建项目前需要配置vue环境，搭建vue环境参考，若已经搭建好则继续运行 二、创建Vue项目 使用 CMD 进入 创建vue 文件夹 举例：在 E盘 VueProject文件夹里创建项目 cd E:\VueProject e: 创建项目命令 vue init webpack vuedemo01 vue init webpack vuedemo01 --vuedemo01 为文件名 使用 VSCode 打开 vuedemo01 文件夹 点击“终端”，选择新终
01-npm指令创建vue项目
我们的目标是星辰大海！
03-07 296
01-npm指令创建vue项目
Vue npm 项目构建 教程
jrgdspuwij的博客
03-04 471
文章目录1、项目简述2、开发环境2、vue项目搭建2.1、插件以及对应配置文件创建2.1.1、nodejs、npm安装2.1.2、babel 实现 ES62.1.3、webpack 1、项目简述 这几天正在学习Vue全家桶，Vue的体系比较庞大、涉及的内容也比较多，少数几张帖子很难系统的学习Vue，在这里模拟搭建一个Vue的环境，还在学习中，如有不到还请见谅。 2、开发环境 编辑器：vsCode ...
使用npm创建vue项目流程
m0_55905001的博客
03-12 2479
创建vue项目之前的配置nodejs的安装npm的配置yarn的配置 nodejs的安装 nodejs的安装网上都有，但是为了后期vue项目的创建，建议不要下载最新版本的nodejs，nodejs14完全够用了 npm的配置 配置npm全局目录位置 配置npm淘宝镜像 更新npm 下载yarn yarn的配置 配置npm和yarn的环境变量 配置yarn全局目录位置 配置yarn淘宝镜像 使用yarn添加vue包 使用npm添加@vue/cli脚手架的包 然后就可以创建vue项目了： vue create
Vue初学之使用npm搭建Vue环境
小小默：进无止境
01-15 1万+
这里系统是windows，先安装node(新版的Node.js已自带npm)，然后使用npm安装vue，这里没有使用nvm。 【1】node安装 官网地址：https://nodejs.org/en/download/ 下载后傻瓜式安装即可，具体教程可以参考：node.js安装配置 默认会配置node和npm的环境变量： 安装后会自动提示如下，这里可以直接关闭窗口。 我们可以看到环境变量...
如何创建一个vue项目
507834010的博客
09-22 4272
这个命令通常用于启动开发环境。它可能会启动一个带有热重载（Hot Module Replacement, HMR）功能的本地开发服务器，这样当你修改代码时，浏览器会自动刷新，而不需要手动刷新。它可能会包含更详细的日志输出，方便开发者调试。它可能不会进行代码压缩或优化，以便于开发时的快速迭代。这个命令可能是用来启动一个生产环境的服务器。它可能会构建一个优化过的版本，包括代码压缩、代码分割、去除无用代码等。它可能不会包含热重载功能，因为这是开发时的特性。
VUE项目构建与开发流程
CherryBlossom_77的博客
07-07 1099
本文介绍了Vue项目构建与开发流程，主要包括：1)项目构建方式，使用Vue CLI或Vite创建项目；2)开发流程，从需求分析到部署的完整周期；3)通过Todo List案例，演示了Pinia状态管理、API请求封装和组件化开发；4)项目优化与部署方法。同时概述了RESTful、RPC、GraphQL等主流API设计风格的特点和适用场景。内容涵盖Vue项目从开发到上线的关键环节，为前端开发提供实用指导。
使用VSCode创建基础Vue项目教程
通过上述步骤和知识点的介绍，您将能够在VSCode中创建一个最简单的Vue项目，并对项目的开发、构建和优化有一个全面的认识。随着对Vue.js的深入学习和实践，您将能够构建更加复杂和功能丰富的前端应用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值