Vue-cli脚手架创建vue3项目

原创：丶无殇  2023-02-07

如果需要使用vite可以跳转文章末尾

Vue-cli脚手架创建vue3项目

安装vue-cli脚手架

执行：npm install -g @vue/cli

脚手架安装具体内容不在此赘述

创建项目（默认配置）

执行vue create {filename}

{filename}整个替换为你的项目名称，一定要全部小写，否则会报错：

Warning: name can no longer contain capital letters

创建

输入：

1
vue create test01

输出：

1
2
3
4
5
6
Vue CLI v5.0.8

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

使用↑↓按键操作，>指向的为选中的

然后输入：回车

输出：

1
2
3
4
5
Vue CLI v5.0.8
✨  Creating project in ██████████████████████████████\test01.
⚙️  Installing CLI plugins. This might take a while...

[██████............] / idealTree:serve-index: sill fetch manifest unpipe@~1.0.0

然后安装好之后会显示：

1
2
3
4
5
6
7
8
9
10
added 102 packages in 20s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue3test.
👉  Get started with the following commands:

 $ cd test01
 $ npm run serve

至此项目创建完成，这是默认配置的创建，如果需要手动配置，可进行以下操作

创建项目（手动配置）

执行vue create {filename}

{filename}整个替换为你的项目名称，一定要全部小写，否则会报错：

Warning: name can no longer contain capital letters

创建

输入：

1
vue create test02

输出：

1
2
3
4
5
6
Vue CLI v5.0.8

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

使用↑↓按键操作，>指向的为选中的

然后输入：回车

配置功能

回车后会显示功能列表，可以根据项目的需求选择对应的功能：

1
2
3
4
5
6
7
8
9
10
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

此时，可以通过空格(Space)进行选择和取消选择，a全选，i反选，回车(Enter)继续

Router和Vuex一般会用上，如果是单页应用可以不选择

选择完成后回车

版本选择

然后根据项目需求选择Vue.js的版本

1
2
3
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

现在大多是Vue3，所以选择默认的3.x后回车即可

History模式

此处需要选择是否使用路由的历史记录模式，一般选择是，也可根据项目需求来

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

输入Y后回车

格式检测

接下来的是一个代码格式检测的，一般公司会要求这个必须选择

1
2
3
4
5
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

此处选择默认第一个即可，然后选择Lint的其他功能：

  1. 保存时候Lint
  2. Git提交时候

这里建议保存时候检测代码

1
2
3
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

回车后继续

配置方式

选择Babel，ESLint等功能的配置方式：

  1. 在专属配置文件里面
  2. 在package.json
1
2
3
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files
> In package.json

这里博主使用的是package.json，可以选择在专属配置文件里面

另存预设

以上的配置是否保存为一个预设，以后可以直接使用此配置

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

选择Y的话，需要设置一个名称，比如叫setting01

1
2
3
? Save preset as: setting01

🎉  Preset tempset saved in C:\Users\User\.vuerc

然后就开始自动安装了

配置总览

1
2
3
4
5
6
7
8
9
10
11
12
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: setting01

🎉  Preset tempset saved in C:\Users\User\.vuerc

安装完成

安装完成后提示

1
2
3
4
5
🎉  Successfully created project vue3test1.
👉  Get started with the following commands:

 $ cd test02
 $ npm run serve

进入文件夹cd test02后就可以npm run serve然后查看创建的默认项目了

如果需要使用Vite创建，可以使用下面的方法

Vite脚手架创建vue3项目

安装vite

1
npm install vite@latest

创建项目

1
2
3
npm init vite@latest
//或者
npm create vite@latest

流程如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
> npm init vite@latest
√ Project name: ... testvue
√ Package name: ... testvue
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
√ Select a framework: » Vue
√ Select a variant: » JavaScript