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

 更新时间:2024年03月29日 10:54:10   作者:石小石Orz  
使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目,正好记录一下,这篇文章主要给大家介绍了关于Vue3项目的3种创建方式,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

使用 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

总结

到此这篇关于Vue3项目的3种创建方式的文章就介绍到这了,更多相关Vue3项目创建方式内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • vant中field组件label属性两端对齐问题及解决

    vant中field组件label属性两端对齐问题及解决

    这篇文章主要介绍了vant中field组件label属性两端对齐问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue计算属性computed方法内传参方式

    vue计算属性computed方法内传参方式

    这篇文章主要介绍了vue计算属性computed方法内传参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue Element前端应用开发之动态菜单和路由的关联处理

    Vue Element前端应用开发之动态菜单和路由的关联处理

    这篇文章主要介绍了Vue Element前端应用开发之动态菜单和路由的关联处理,对vue感兴趣的同学,可以参考下
    2021-05-05
  • vue el-checkbox实现全选单选方式

    vue el-checkbox实现全选单选方式

    这篇文章主要介绍了vue el-checkbox实现全选单选方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue基础语法之插值表达式详解

    vue基础语法之插值表达式详解

    这篇文章主要为大家详细介绍了vue基础语法之插值表达式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Pinia进阶setup函数式写法封装到企业项目

    Pinia进阶setup函数式写法封装到企业项目

    这篇文章主要为大家介绍了Pinia进阶setup函数式写法封装到企业项目实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 前端设置cookie之vue-cookies使用及说明

    前端设置cookie之vue-cookies使用及说明

    这篇文章主要介绍了前端设置cookie之vue-cookies使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue.nextTick纯干货使用方法详解

    Vue.nextTick纯干货使用方法详解

    这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue?Router中Matcher的初始化流程

    Vue?Router中Matcher的初始化流程

    这篇文章主要介绍了Vue?Router中Matcher的初始化流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3实现全局loading指令的示例详解

    Vue3实现全局loading指令的示例详解

    这篇文章主要介绍了Vue3实现全局loading指令,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06

最新评论

?


http://www.vxiaotou.com