vue cli3创建项目?

2021/10/22 6:11:17

编程Tag： vue 创建路由项目 cli3 选择回车

本文主要是介绍vue cli3创建项目?，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

说明：

写作主要的目的是记录自己做过的东西，好记性不如烂笔头，因此做手记录。在帮助自己的同时也希望可以帮助到有需要的人。好了，废话少讲，跟着我直入主题吧！

前提：

安装了 npm 、node.js 、vue cli3 环境。

步骤如下：

1、命令行输入：

vue create 项目名

2、选择 default 创建项目的话一直回车就可以创建好项目。此处我选择的是手动配置项目：Manually select features。

在这里插入图片描述

3、手动配置需要进行如下配置，* 代表选中该配置。

space 选择

a 全选

i 反选
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mBx1tk5H-1634829397982)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021221432154.png)]$

4、此处按照项目需要自行选择：
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXUByVdx-1634829397985)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021214010272.png)]$
选项说明如下：

选项	说明
Babel	转码
TypeScript	TypeScript
Progressive Web App (PWA) Support	支持渐进式Web应用程序（PWA）
Router	路由
Vuex	Vuex
CSS Pre-processors	css预处理
Linter / Formatter	代码风格检查和格式化
Unit Testing	单元测试
E2E Testing	E2E测试

5、选择 vue 项目版本，此处可自行选择，我选的是 vue3 的版本。
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-McqiM2Sd-1634829397992)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021222623786.png)]$
6、路由是否选择history路由模式,这里输入 n ,默认模式即可,然后回车。
在这里插入图片描述

7、选择CSS预处理器（自行根据需要选择），这里选择 Less
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oi6DkXQd-1634829397996)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021214722675.png)]$

8、自动代码格式检测，选择 ESLint + Standard config 标准版的
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PpCc1S2n-1634829397997)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021214810717.png)]$

9、选择 Lint on save。保存时检测
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HFa6H3rz-1634829397999)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021225558714.png)]$

10、配置文件保存位置：我选的是保存在 package.json 文件中
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BU7cZJzT-1634829398001)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021225432927.png)]$

11、是否保存项目创建配置，选择 y
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dON50JAl-1634829398003)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021230153780.png)]$

12、下一步直接回车就创建好项目了。如下图跑起来就好
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9O8MhkDo-1634829398005)(C:\Users\HZS\AppData\Roaming\Typora\typora-user-images\image-20211021230614843.png)]$

这篇关于vue cli3创建项目?的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

vue cli3创建项目?

说明：

前提：

步骤如下：

相关编程文章