使用vue-cli自定义搭建项目步骤解析（Windows）

最新推荐文章于 2025-07-15 11:13:14 发布

原创

最新推荐文章于 2025-07-15 11:13:14 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli3

本文详细介绍了在Windows环境下，如何从下载安装Node.js到使用vue-cli自定义配置创建Vue项目，包括选择预设选项、Vue版本、路由模式、CSS预处理器等，最后运行项目并验证其成功启动。

使用vue-cli自定义搭建项目步骤解析（Windows）

前言
一、下载安装Node.js
二、创建vue项目
总结

前言

提示：在正式搭建vue脚手架（vue-cli）之前，必须要确保电脑已经安装好了Node.js
Node.js官网

提示：以下内容为本篇文章正文，所演示案例仅供参考

一、下载安装Node.js

1、去Node.js官网下载安装包。

在这里插入图片描述
2、安装步骤是在原有默认的选项下一直点击next即可，安装完成后去CMD命令行打印版本号，如正常显示则安装成功，本机的Node版本为v10.15.0

PS：如果报错（npm/node 不是内部或外部命令…），大多数的情况下是因为环境变量没设置好，如不是就去度娘问问 =。=

最低0.47元/天解锁文章

新学期VIP享超值加赠

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Leiccy

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

基于VueCli自定义创建Vue项目架子

luckypian

07-28

739

安装脚手架前提需要安装node【node安装成功后，自带npm】

使用vue-cli搭建SPA项目

kissship的博客

09-21

502

SPA项目是一种Web应用程序的架构，其主要特点是整个应用程序在加载后，只会加载一次页面（通常是一个HTML文件），之后的用户交互都在这个页面上进行，通过JavaScript动态地更新内容，而不需要每次用户操作都重新加载整个页面。SPA通常使用前端框架（如React、Angular、Vue.js等）来实现，这些框架允许开发人员创建交互性强、用户体验良好的Web应用程序。Vue CLI（Vue Command Line Interface）是一个用于创建、配置和管理Vue.js项目的官方命令行工具。

参与评论您还未登录，请先登录后发表或查看评论

使用vuecli自定义创建项目

shgzzd的博客

11-25

636

使用vuecli自定义创建项目安装前提有node.js环境,npm安装成功创建vue项目 vue create 项目名选择自定义安装,接下来的选择选下图所示出现下图Compiled successfully字样,即表示创建vue项目成功字样,即表示创建vue项目成功 ...

如何从0~1开始搭建一个自定义的vue2项目（也可自定义创建vue3项目）

最新发布

wenbo_zhang的博客

07-15

648

接下来将该项目拉入到vscode中，点击该项目的package.json文件，查看项目的启动命令，然后按住Ctrl+j，打开终端命令行，输入npm run serve。然后就可以根据自己得需要选择自定义自己得vue项目，注意的是鼠标上下键是移动键，空格键（space键）是选项确认键，选择完毕之后，回车键开始。键盘上下键可以进行选项选择，回车键是确认选择，前两个是自动创建默认的vue3或者vue2项目，最后一个是创建一个自定义的vue项目。下一步会让你选择css的使用方式，一般情况选择less。

创建 VUE2 项目

qq_17627195的博客

03-26

2790

创建一个项目 //1. 命令回车 vue create 项目名 //2.选择自定义配置 Manually select features //3.选择你需要的配置（用空格选中） Babel (必选) TypeScript（项目中使用ts开发的话，就勾选） Progressive Web App (PWA) Support (接口缓存，优化项目) Router Vuex CSS Pre-processors (css预处理器，需要) Linter / Formatte

VueCli 自定义创建项目及配置

m0_53951384的博客

11-08

522

1.安装脚手架 (已安装)2.创建项目选项?> Manually select features 选自定义手动选择功能选择vue的版本3.x> 2.x是否使用history模式选择css预处理选择eslint的风格（eslint 代码规范的检验工具，检验代码是否符合规范）比如：const age = 18;=> 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子选择校验的时机（直接回车）选择配置文件的生成方式（直接回车）是否保存预设，下次直接使用？

vue_cli自定义创建项目

轻编程的博客

09-23

831

vue_cli自定义创建项目创建项目 vue create vueant 自定义创建项目选择如图所示，回车进入自定义选择配置安装界面按键盘上下箭头键上下切换，空格键选中自己要安装的项，全部选完之后回车即可 Router (vue的路由插件) Vuex (vue的状态管理插件) css Pre-processors (css预处理插件) Linter (代码检测插件) Unit Testing (单点测试模块) 这里问我们路由是不是采用 history 模式，我们输

vue-cli3项目配置eslint代码规范的完整步骤

10-14

Vue CLI 3 是一个强大的工具，用于快速搭建 Vue.js 项目。在开发过程中，遵循一定的代码规范至关重要，因为它可以提高代码质量，使团队合作更为顺畅。为此，我们需要配置 ESLint，一个广泛使用的代码质量工具，它能...

Vue-CLI 项目在pycharm中配置方法

10-16

Vue-CLI 是一个由 Vue.js 官方团队开发的命令行工具，用于快速搭建 Vue.js 项目。它提供了丰富的预设模板，可以帮助开发者快速初始化一个包含现代化前端构建流程的项目。PyCharm 是一款强大的 Python 开发集成环境，...

使用Vue CLI快速搭建和配置你的Vue项目

weixin_52938153的博客

05-21

694

Vue CLI 是 Vue.js 官方提供的一个标准工具，用于快速搭建和管理 Vue.js 项目。它提供了一个基于 Node.js 的命令行界面，帮助开发者初始化、开发、测试和部署 Vue 项目。按照提示选择需要的特性，如 Babel、Router、Vuex 等。Vue CLI 支持通过插件扩展功能。你可以创建自己的 Vue CLI 插件来扩展功能。创建一个新的 npm 包。在包内创建generator文件夹，并添加index.js文件。

（Window）创建Vue项目步骤一

qinyuhua93的博客

01-29

3968

1，确认已经安装过nodejs和vue-cli vue的脚手架工具。（如果没有安装，需要安装一下，网上找一下安装步骤） 2，用vue-cli 开始创建项目：vue init webpack projectName projectName-表示你的项目名称用安装的vue-cli 脚手架工具命令vue, init一个以webpack 为模板的名为 ** 的Vue项目。终端里面会显示

超详细使用vue cli脚手架自定义创建项目教程

weixin_44012320的博客

06-09

1339

超详细使用vue cli脚手架自定义创建项目教程安装和检查node版本输入 node -v 查看npm版本输入npm -v 使用npm安装脚手架输入 npm install -g @vue/cli 查看vue脚手架是否安装完成输入vue -v 创建一个vue项目，进入到准备放置项目的文件夹中格式 vue create XXX项目名输入 vue create hellw-world 进入到选项 => 1、defalut 默认设置 Manually 自

vue2 路由进阶,VueCli 自定义创建项目

热门推荐

小钟不想敲代码

08-27

3万+

路由进阶,VueCli 自定义创建项目

如何用vue-cli创建项目

qq_37746495的博客

07-06

884

如何创建vue-cli项目

用Vue-CLI搭建项目

qq_52335038的博客

09-28

2459

项目名称：顶楼人员管理简介：博主我酷爱韩剧顶楼，利用所学知识，创建一个顶楼人员管理系统。功能：登录界面、注册界面、首页、普通用户管理页、顶楼用户管理页技术：采用前后端分离技术开发运行。下面开始进入正题：一、环境搭建： 1.创建一个文件夹，并给项目文件夹命名Attic。 2.在终端上运行 npm i -g @vue/cli命令。 3.在终端上运行vue create attic命令，创建Vue项目名称。 4.手动配置一下Vue项目。（谁让博主我这么细...

Vue.$http全局配置

qq_43618136的博客

03-12

1189

全局配置数据接口的根域名 Vue.http.options.root = 'http://vue.studyit.io/' getAllList() { this.$http.get('api/getprodlist').then(result =>{ var result = result.body if (result.status === 0) { ...

vue中给window对象上添加属性的方法

HeXinT的博客

08-26

5078

web页面通讯方法、window.open打开新页面，父子页面通讯的方法最直接的就是获取对方的window对象进行调用父子各自得属性及方法。下面是整理的几种通讯得方法仅供参考。

Vue-cli（基于cli如何创建项目）最详细教程，手把手教学

分享java学习路上的一些笔记，不足之处多多见谅。

06-14

5715

Vue-cli（基于cli如何创建项目）最详细教程，手把手教学

VueCli-自定义创建项目

m0_72560900的博客

01-15

932

选择eslint的风格（eslint 代码规范的检验工具，检验代码是否符合规范）是否保存预设，下次直接使用？=> 不保存，输入 N。是否使用history模式：这里暂时选择hash模式。选择vue的版本：这里选择vue2.x的版本。选择配置文件的生成方式（直接回车）1.安装脚手架 (已安装可以跳过)选择css预处理：选择Less。手动选择功能：如下选择四个。选择校验的时机（直接回车）等待安装，项目初始化完成。

vue-cli3项目搭建与优化全攻略

"vue-cli3 从搭建到优化的详细步骤" ...以上就是使用 vue-cli3 搭建 Vue 项目并进行优化的详细步骤。通过这些步骤，你可以创建一个高效、可维护的 Vue 应用，并在开发过程中享受到 Vue CLI 3 带来的便捷。