Vue3项目的三种创建方式
使用 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: … ✔ 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 ./... 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
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...