VUE-CLI4：使用VUE脚手架创建项目

最新推荐文章于 2024-07-08 16:10:00 发布

算云烟

最新推荐文章于 2024-07-08 16:10:00 发布

阅读量1.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/109776111

版权

Vue-CLI4是官方推荐的项目构建工具，包括CLI、CLI服务和CLI插件。通过全局安装和使用命令，可以创建并配置Vue项目。在手动选择功能时，可以选择Vue版本、CSS预处理器、代码格式化和校验时机等。项目创建完成后，通过`npm run serve`启动。更多使用详情可参考相关教程。

摘要由CSDN通过智能技术生成

一、概述

VUE-CLI是VUE官方推出的用来构建VUE项目的脚手架配置工具
基于vue.js，用于自动生成vue.js+webpack的项目模板
它有以下三个组件
- CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）
- CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供如：serve、build 和 inspect 命令）
- CLI 插件：给Vue 项目提供可选功能的 npm 包（如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试等）

二、安装

1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

// -g 参数表示全局安装，此时则会安装模块到nodejs目录下
// 不加-g表示局部安装，比如在当前项目文件夹下安装
npm uninstall vue-cli -g

2、安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

算云烟

关注关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用Vue脚手架创建Vue项目

m0_70955866的博客

11-04

442

5. 检查你是否安装vue/cli,只需要在命令行运行vue指令,如果不报错,则说明安装成功。Vue脚手架隐藏了所有的webpack相关的配置,若想查看具体的webpack配置,请执行。在弹出的选项中,选择你需要安装的配置项: 通过上下键进行切换,通过空格键进行是否选中。在弹出的选择中,表示是否是使用history方式创建路由:默认,选择y。参考:资料/vue.js环境搭建.docx。vue create 项目名。

002_vue-cli4（vue脚手架）创建项目

整理的学习记录

02-27

141

vscode终端： vue create vue_001(输出该命令后回车) Please pick a preset:(下方向键选着Manually select features选项后回车) Manually select features Check the features needed for your project:(同上，这行是问题，下面对应问题的选项) Babel Router Vuex CSS Pre-processors Linter / Formatter

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

使用脚手架搭建vue项目

最新发布

m0_65520060的博客

07-08

879

下面这个是对创建vue项目的方式进行选择，下面主要讲解下面三种方式Default ([Vue 3] babel, eslint) 创建vue3项目（默认配置）Default ([Vue 2] babel, eslint) 创建vue2项目（默认配置）Manually select features 自定义的方式搭建vue项目（重点）下面呢主要对如何自定义配置vue项目来进行讲解（通过上下箭头进行选择，Enter键确定那种搭建模式）

【VUE】vue-cli4脚手架创建项目

weixin_42410658的博客

03-11

2662

安装node npm cnpm、全局安装vue、@vue/cli 注意：关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。执行vue init webpack project-name创建项目，参数选择如下...

Vue-cli 4.x脚手架搭建项目

马旭辉博客

05-09

808

一、升级本地环境卸载旧的 vue-clinpm uninstall -g vue-cli 重新安装npm install -g @vue/cli 查看版本二、搭建项目创建项目命令： vue create <项目名称> default 是使用默认配置 Manually select features 是自定义配置 simplepreset 是指简单预设，也可以说是一个模板配置也可以自定义一些模板配置，比如我之前自己设置的一个 testPreset 这里我们选择自定义：

脚手架创建Vue项目

Luka

06-24

747

在命令中输入以下命令创建Vue项目

vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目

05-11

如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件安装到您的项目中： cd my-vue-app vue add i18n :hammer: 注入的命令 vue-cli-service i18n:report （实验性）报告缺少的区域设置消息键和

vue-cli3:vue-cli3脚手架 vue+typescript+vue-property-decorator+vue-class-component+axios

04-08

创建项目时，你可以使用`vue create`命令，例如： ```bash vue create my-vue-project ``` 为了在项目中引入TypeScript，我们可以在创建项目时选择包含TypeScript的预设，或者在项目创建后手动添加。在项目中启用...

vue-cli-plugin-qiankun:适用于微前端千库应用程序的vue-cli3插件

05-05

* vue-cli-plugin-qiankun* An Vue-cli3 Plugin for micro-frontend qiankun application 结合 qiankun 快速生成微前端应用的脚手架插件 Features qiankun 接入，子应用打包配置接入修改 qiankun 官网 demo 中 vue ...

vue-cli3项目升级到vue-cli4 的方法总结

10-15

主要介绍了vue-cli3项目升级到vue-cli4 的方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue-CLI 4.x 自动部署项目至服务器

04-01

使用 scp2+cross-env 自动化上传部署 scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。而ssh2就是一个使用nodejs对于SSH2的模拟实现。scp，是secure copy的缩写, scp是Linux系统下基于SSH登陆进行安全的远程文件拷贝命令。这里我们就用这个功能，在Vue编译构建成功之后，将项目推送至测试/生产环境，以方便测试，提高效率。

Vue脚手架创建项目的方式

qq_37543356的博客

10-30

563

脚手架版本：@vue/cli 4.5.8 1. 命令行 vue create 项目名 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0DAEXPDf-1604050808749)(https://gitee.com/nfLJ/Pic/raw/master/blog/20201030170547.png)] 官方给出了3个创建选择，分别是Vue2默认、Vue3默认和自定义我们选择自定义，即 Manually select features [外链图片转存失败,源站可能.

脚手架vue-cli创建Vue项目手把手教学

H524268015wsw的博客

11-18

4286

Default是默认选择（vue2,vue3）,Manually select features 是自己手动选择，可以选择你需要的。通常都是自己手动选择,键盘上下键选择，enter确定。用vue -V检查版本，如果出现“vue” 不是内部或外部命令，也不是可运行的程序或批处理文件，就说明你电脑没有安装vue。像这种要选择yes还是no的一般情况下都是选择no，可以避免下次写特殊项目不好配置。再然后也是一些选项，按照翻译选择自己需要的，我这里选的倒数第二个。选择自己需要的以后，按下回车再次选择自己需要的。

vue-cli4

weixin_50365835的博客

02-02

1019

基本使用安装卸载其他脚手架: npm uninstall vue-cli -g 强力清除缓存 : npm cache clean --force 查阅全局安装目录: npm root -g 往前退两层删除npm-cache目录 npm install -g @vue/cli 创建项目 vue create <project-name> 开发环境启动 npm run serve 生产环境启动 npm run build 配置创建vue.config.js文件该文件是一个可选的配置

使用vue-cli脚手架工具创建vue项目

阳光下的冷静的博客

11-27

1314

vue-cli 脚手架安装： 1) 确保node环境：安装vue-cli需要在node环境下安装，所以首先确保自己安装了node，检查自己电脑是否安装了node ,可以在命令行工具内执行： node -v，如下图，如果出现相应的版本号信息，说明安装了node 如果出现类似：xxx不是内部命令，说明电脑没有安装node ,需要在官网下载与你电脑对应的版本的node,进行安装。node的下载...

2024最新：关于基于vue-cli脚手架创建vue项目（图文版）

m0_69097184的博客

09-21

577

它确保各种构建工具与合理的默认值一起顺利运行，因此您可以专注于编写应用程序，而不是花费数天时间争论配置。同时，它仍然提供了调整每个工具配置的灵活性，而无需弹出。TypeScript 是一个 JavaScript 的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript 在浏览器运行。代码风格检查和格式化（如：ESLint）【建议选择】vue-router（Vue 路由）【建议选择】。vuex（Vue 的状态管理模式）。E2E（端到端）测试。概述（来源于官方文档）

vue-cli4脚手架安装和项目创建

席海斌的博客

09-06

519

1、安装node.js 检测是否安装，cmd命令，可查看版本号。如未安装，先自行安装。 node -v 2、安装npm 检测是否安装，cmd命令，可查看版本号。 npm：包/组件安装操作命令。 nmp -v 3、安装vue-cli4 查看安装版本，cmd命令。注意这里-V是大写。 vue -V 如果已经安装过vue-cli2或者3，需先进行卸载。卸载命令，(cmd任意位置)。如果npm没卸载成功，可使用cnpm尝试。卸载后使用vue -V验证。 //卸载cli2 npm

vue/cli4的安装与使用