Vue3项目的3种创建方式代码示例
使用 vue-cli 创建
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
总结
到此这篇关于Vue3项目的3种创建方式的文章就介绍到这了,更多相关Vue3项目创建方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用live-server快速搭建本地服务器+自动刷新的方法
下面小编就为大家分享一篇使用live-server快速搭建本地服务器+自动刷新的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03详解在vue-cli3.0中自定css、js和图片的打包路径
这篇文章主要介绍了详解在vue-cli3.0中自定css、js和图片的打包路径,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论