vue3入门08 - 使用脚手架创建vue3项目

星河boy
6,413 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前言

我们之前都是不用脚手架来完成我们的项目的，并且学习了compositionApi的基本用法。 那么接下来我们要通过脚手架创建vue3项目，来继续深入学习vue3相关的知识。

创建vue3项目的方式

目前创建vue3的项目方式比较多：

  • vue-cli创建vue3项目
  • vite创建vue3项目
  • create-vue创建vue3项目

那么接下来我们分别介绍下这三种创建方式。

vue-cli创建vue3项目

  • vue-cli是基于webpack来创建项目
  • 通过npx安装vue-cli
    • 通过npx安装的好处是临时使用一些库，每次都会使用最新版本，不会将库安装在本地，节省资源
    • 缺点是每次都要临时下载
  • 我们后面不会使用这种创建方式，所以临时使用一下就可以了
npx @vue/cli create project-demo
  • 这里的@vue/cli是脚手架库，npx下载之后相当于命令前缀
  • 此段命令相当于vue create project-demo
  • 执行成功之后，会让我们选择默认vue2或者vue3的模版或者自定义模版

image.png

  • 我们选择自定义模版
    • 这里可以选择我们是否要配置一些插件

image.png

  • 选择完插件，会让我们选择是使用vue3还是vue2，我们这里当然选择vue3啦

image.png 然后会让你选择是否使用class形式的组件 是否使用babel处理ts，jsx之类的 image.png 我们都直接跳过就行了，后面就可以运行创建项目了。 image.png

vite创建vue3项目

  • 通过vite官网的介绍，我们可以通过vite创建各种各样的项目（后面会讲），我们这里直接执行创建就好了。
  • 我这里使用pnpm创建项目，大家可以选择其他包管理器进行项目创建。
pnpm create vite
  • 首先需要先输入项目名称
  • 然后选择框架语言，到这里你会发现，我们可以基于vite创建多种语言的项目
  • 我们选择vue
    • 这里的vue是vue3，使用vite创建项目就没有vue2
    • 如果想基于vite创建vue2项目，可以查找相关的社区模版

image.png

  • 然后会询问是创建vue3+js还是vue3+ts的项目，我们可以先选择vue3+js的项目

image.png

  • 选择完以后我们的项目就创建好了。

image.png

create-vue创建vue3项目

  • 最后一种也是我最推荐大家使用的一种，这个库也是官方进行维护的，所以使用起来无烦恼，yyds。
  • 执行方式也是比较简单的，我们可以基于vite创建vue3或者vue2的项目
npm init vue@3
npm init vue@2

询问是否需要安装，填y image.png

  • 依次填写和选择下列选项
✔ Project name: … vue3-train  项目名称
✔ Add TypeScript? …  Yes  是否使用ts
✔ Add JSX Support? …  Yes 是否需要支持jsx
✔ Add Vue Router for Single Page Application development? …  No 是否使用vue-router
✔ Add Pinia for state management? …  Yes 是否使用pinia
✔ Add Vitest for Unit Testing? … No 是否使用vitest测试
✔ Add Cypress for both Unit and End-to-End testing? … No 是否使用cypress测试
✔ Add ESLint for code quality? …  Yes 是否使用eslint
✔ Add Prettier for code formatting? …  Yes 是否使用prettier
  • 选择完以后就创建成功了

image.png

avatar
文章
阅读
粉丝