Vue3项目的3种创建方式代码示例_Vue.js

使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/

vue-cli4.x是基于webpack4的，vue-cli5.x是基于webpack5的

## 安装或者升级你的@vue/cli
npm install -g @vue/cli

## 创建
vue create vue3_cli           //vue_stduy_cli为自定义文件名

根据我们的需求选择对应的模板

vue cli v5.0.8
? please pick a preset:
> default ([vue 3] babel, eslint)
  default ([vue 2] babel, eslint)
  manually select features

使用crate-vite 创建

官方文档：https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project

crate-vite是vite官方提供的官方脚手架，可以创建vue、react等框架的项目模板。

使用npm

npm create vite@latest

npm create 是 npm init 的别名 npm init vite@latest同样生效

使用 yarn:

yarn create vite

使用 pnpm:

pnpm create vite

根据我们的需求选择对应的模板

ps c:\users\administrator\desktop> npm create vite@latest
√ project name: ... vite-project
? select a framework: » - use arrow-keys. return to submit.
>   vanilla
    vue
    react
    preact
    lit
    svelte
    others

使用 create-vue创建

https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

这是vue官方提供的vue项目构建工具，基于vite

npm init vue@latest

npm create 是 npm init 的别名 npm create vue@latest同样生效

✔ project name: … <your-project-name>
✔ add typescript? … no / yes
✔ add jsx support? … no / yes
✔ add vue router for single page application development? … no / yes
✔ add pinia for state management? … no / yes
✔ add vitest for unit testing? … no / yes
✔ add cypress for both unit and end-to-end testing? … no / yes
✔ add eslint for code quality? … no / yes
✔ add prettier for code formatting? … no / yes

scaffolding project in ./<your-project-name>...
done.

全选yes后的模板目录结构

├─ cypress
├─ public
│ └─ favicon.ico
├─ src
│ ├─ app.vue
│ ├─ assets
│ ├─ components
│ ├─ main.ts
│ ├─ router
│ │ └─ index.ts
│ ├─ stores
│ │ └─ counter.ts
│ └─ views
│ ├─ aboutview.vue
│ └─ homeview.vue
├─ tsconfig.app.json
├─ tsconfig.config.json
├─ tsconfig.json
├─ tsconfig.vitest.json
└─ vite.config.ts
├─ .eslintrc.cjs
├─ .gitignore
├─ .prettierrc.json
├─ cypress.config.ts
├─ env.d.ts
├─ index.html
├─ package.json