vue/cli命令行和图形化界面两种方式创建vue3项目

迷南。 2022-10-29 06:29 44阅读 0赞

使用vue/cli创建

npm install -g @vue/cli

然后输入vue --version

版本需要在4.5.4以上，

创建vue3项目

sudo vue create vue3-basic

会出现三个选项，特别要注意你的选项中有没有vue3的版本，如果没有说明vue/cli版本过旧，需要更新

❯ Default (\[Vue 2\] babel, eslint)  ** vue2的模版**

Default (Vue 3 Preview) (\[Vue 3\] babel, eslint) **vue3的模版**

**Manually select features  由于我们要添加typescript的支持，在上面两个默认的模版中，他是没有ts的支持的，所以我们要选择第三项 Manually select features ，也就是手动选择一些特性，然后按回车继续；**

我们会发现它提供一系列可插拔的支持，囊括各种各样的功能，它充分体现了渐进式的特点；

## 按上下键选择，按空格为选中选项和取消选项，选好了以后点击回车； ##

? Check the features needed for your project:   
 ◉ Choose Vue version  
 ◉ Babel  
❯◉ TypeScript  
 ◯ Progressive Web App (PWA) Support  
 ◯ Router  
 ◯ Vuex  
 ◯ CSS Pre-processors  
 ◉ Linter / Formatter  
 ◯ Unit Testing  
 ◯ E2E Testing

## 进行下一步：选择使用vue的版本 ##

? Choose a version of Vue.js that you want to start the project with   
  2.x   
❯ 3.x (Preview)  我们选择vue3版本

## 选择是否支持类类型的组件？ ##

? **Use class-style component syntax?** (y/N) 由于vue3已经进行了重写，可以不用class，我们这里选项no(n);

? **Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?** (Y/n) 是否要**Babel**和typescript结合使用，这个**Babel**会自动添加**polyfills**还有转换**JSX, 由于我们的组件写法并没有用到JSX,所以我们这里选择no(n);**

## 接下来是询问ESLint的配置，不用添加这些额外的规则了 ##

? **Pick a linter / formatter config:** (Use arrow keys)

❯ ESLint with error prevention only 我们 这里选择第一项默认的就好

ESLint + Airbnb config

ESLint + Standard config

ESLint + Prettier

TSLint (deprecated)

## 接下来是询问Lint的特性  ##

? **Pick additional lint features:** (Press **<space>** to select, **<a>** to toggle all, **<i**

**>** to invert selection)

❯◉ Lint on save 是在默认保存的时候 Lint,我们选择第一项

◯ Lint and fix on commit 在提交的时候帮你fix

##  接下来是询问将配置文件放在单独文件里面还是package.json文件里面 ##

? **Where do you prefer placing config for Babel, ESLint, etc.?** (Use arrow keys)

❯ In dedicated config files 我们选择放在单独的文件里面

In package.json

是否要将这个项目保存下来，方便你将来的项目一键安装？

? **Save this as a preset for future projects?** (y/N) 我们选择n

## 询问使用哪一种包依赖管理器？ ##

? **Pick the package manager to use when installing dependencies:** (Use arrow keys)

❯ Use Yarn

Use NPM 我们选择npm

如果显示如下界面，就说明安装成功了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

——————————————————————————————————————————————————————————————————————————————————

如果大家喜欢UI界面，也可以使用图形界面创建，输入vue ui,这时候它会打开一个localhost:8000的网址；

vue ui

点击创建，选择你要创建的位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

然后点击在此创建新项目，

输入你的项目名称，然后点击下一步

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2][]

我们选择手动，点击下一步

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3][]

选择配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20221024/fdaf0ff7b7294afe808a6603faf969a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: /images/20221024/07aace57d0d8482ebdb1bdadcd2490b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 2]: /images/20221024/a678d89ac7ee49bd947512f381d26453.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 3]: /images/20221024/53608fd3e0184b4f9fc921be60295886.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 4]: /images/20221024/50f56e6ddb1a4645a6adc51a34fc2569.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 5]: /images/20221024/4e1936027a784ffe8e46db159d39c8c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 6]: /images/20221024/9f9c9d0ff8b949a8ac7883e018c770c9.png