小白级教程:不同构建工具创建vue3项目

⚠️注意

vue3项目的创建可使用以下两种不同的构建方式创建：

基于vue cli 创建（俗称脚手架）

基于vite 创建（新的前端构建工具）

一. 基于vue cli构建工具搭建vue3_js项目

1.1 建立放置项目的文件夹，并将文件夹在vscode编辑器或电脑终端中打开。在终端，输入，回车⬇️

vue create vue3_test_cli  //vue3_test_cli是项目名称

返回Please pick a preset: 意思是【请选择一个预设:】，此时使用键盘上下方向键切换，回车键确定，空格键选择与取消选择。

小白级教程:不同构建工具创建vue3项目此处选择【Default (Vue 3) ([Vue 3] babel, eslint) 】会直接创建vue3的基础配置项目（前两个基础配置不包含vue-router,vuex等）

选择【Manually select features】进入手动配置模式

1.2 自定义选择项目所需的功能，键盘上下方向键切换，空格键选择与取消选择，最后回车键确定.

Please pick a preset: Manually select features // 请选择一个预设:手动选择功能

Check the features needed for your project: // 检查项目所需的功能:

◉ Choose Vue version // 自定义Vue版本

◉ Babel // 可将将 es6 转成 es5

◯ TypeScript // 是否使用ts语言

◯ Progressive Web App (PWA) Support // 渐进式Web应用程序（PWA）支持

◉ Router // Vue Router 路由

◉ Vuex // Vuex状态管理模式

◉ CSS Pre-processors // CSS预处理器

◉ Linter / Formatter // 格式化程序

◯ Unit Testing // 单元测试

◯ E2E Testing // 端到端

选项常规如下方式选择，完成后回车。

小白级教程:不同构建工具创建vue3项目

1.3 选择vue3版本，回车

小白级教程:不同构建工具创建vue3项目

1.4 是否使用 Class 风格装饰器/是否使用此样式的组件命名语法？（建议Y）,回车

小白级教程:不同构建工具创建vue3项目

1.5 Babel 和 TS 是否一起使用，用于现代模式、自动检测的 polyfills 和转译 JSX，（建议Y），回车

小白级教程:不同构建工具创建vue3项目

1.6 选择路由模式，n使用默认的 hash 模式,（建议n），回车

小白级教程:不同构建工具创建vue3项目

1.7 选择CSS 预处理器，node-sass 是自动编译实时生效，dart-sass 保存后才会编译生效，可根据自己喜好上下选择，回车

1.8 提示选择eslint 校验规则。（建议选择默认配置第一个），即完成后回车即可。

小白级教程:不同构建工具创建vue3项目

1.9 提示什么时间进行代码校验。Lint on save 保存时检查， Lint and fix on commit 提交时检查，（建议选择第一个），即完成后回车即可。

1.10 提示如何存放配置，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中，（建议选择第二个配置），即存放到 package.json 文件中，完成后回车即可。

1.11 提示是保存本次配置。(建议选择 N)，即不保存，否则以后创建项目修改不配置不太方便，完成后回车即可。

小白级教程:不同构建工具创建vue3项目

至此，项目配置完成等待结果。

小白级教程:不同构建工具创建vue3项目

二. 基于vite构建工具搭建vue3_ts项目

前置条件：使用vue3需要具备：vue版本4.5.0以上,node版本16以上（vue –version可查看版本）

2.1 建立放置项目的文件夹，并将文件夹在vscode编辑器或电脑终端中打开。在终端，输入，回车⬇️

npm create vue@latest  //固定命令

2.2 输入项目名称，回车（名称中不得出现中文/特殊字符，建议英文大小写）

小白级教程:不同构建工具创建vue3项目

2.3 询问是否使用ts语法，根据自己需求选择，回车，这里演示选择是

小白级教程:不同构建工具创建vue3项目

2.4 询问是否需要 JSX 支持 (建议N)

小白级教程:不同构建工具创建vue3项目

2.5 询问是否需要配置路由环境（建议Y）

小白级教程:不同构建工具创建vue3项目

2.6 询问是否添加Pinia状态管理器（建议Y）

小白级教程:不同构建工具创建vue3项目

2.7 询问是否添加单元测试（根据自身项目需求选择，这里选择N）

小白级教程:不同构建工具创建vue3项目

2.8 询问是否需要一个端到端的测试（建议N）

小白级教程:不同构建工具创建vue3项目

2.9 是否需要安装ESLint的语法检查（根据自身项目需求选择，这里选择N）

小白级教程:不同构建工具创建vue3项目

2.10 至此，vue3+vite+ts 工程创建完成，根据提示分别输入以下命令，启动项目。

不得不说，创建过程真的很快👍

cd vue3_test_vite_ts      //定位到项目文件夹 
npm install               //下载项目依赖
npm run dev               //启动项目

小白级教程:不同构建工具创建vue3项目

至此，项目配置完成。

感谢观看👍 （持续更新补充中…）

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/0606e71220.html

小白级教程:不同构建工具创建vue3项目

一. 基于vue cli构建工具 搭建vue3_js项目

1.1 建立放置项目的文件夹，并将文件夹在vscode编辑器或电脑终端中打开。在终端，输入，回车⬇️

1.2 自定义选择项目所需的功能，键盘上下方向键切换，空格键选择与取消选择，最后回车键确定.

选项常规如下方式选择，完成后回车。

1.3 选择vue3版本，回车

1.4 是否使用 Class 风格装饰器/是否使用此样式的组件命名语法？（建议Y）,回车

1.5 Babel 和 TS 是否一起使用，用于现代模式、自动检测的 polyfills 和转译 JSX，（建议Y），回车

1.6 选择路由模式，n使用默认的 hash 模式,（建议n），回车

1.7 选择CSS 预处理器，node-sass 是自动编译实时生效，dart-sass 保存后才会编译生效，可根据自己喜好上下选择，回车

1.8 提示选择eslint 校验规则。（建议选择默认配置第一个），即完成后回车即可。

1.9 提示什么时间进行代码校验。Lint on save 保存时检查， Lint and fix on commit 提交时检查，（建议选择第一个），即完成后回车即可。

1.10 提示如何存放配置，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中，（建议选择第二个配置），即存放到 package.json 文件中，完成后回车即可。

1.11 提示是保存本次配置。(建议选择 N)，即不保存，否则以后创建项目修改不配置不太方便，完成后回车即可。

二. 基于vite构建工具 搭建vue3_ts项目

2.1 建立放置项目的文件夹，并将文件夹在vscode编辑器或电脑终端中打开。在终端，输入，回车⬇️

2.2 输入项目名称，回车（名称中不得出现中文/特殊字符，建议英文大小写）

2.3 询问是否使用ts语法，根据自己需求选择，回车，这里演示选择是

2.4 询问是否需要 JSX 支持 (建议N)

2.5 询问是否需要配置路由环境（建议Y）

2.6 询问是否添加Pinia状态管理器（建议Y）

2.7 询问是否添加单元测试（根据自身项目需求选择，这里选择N）

2.8 询问是否需要一个端到端的测试（建议N）

2.9 是否需要安装ESLint的语法检查（根据自身项目需求选择，这里选择N）

2.10 至此，vue3+vite+ts 工程创建完成，根据提示分别输入以下命令，启动项目。

相关推荐

一. 基于vue cli构建工具搭建vue3_js项目

二. 基于vite构建工具搭建vue3_ts项目