Vue3项目搭建的详细过程记录
更新时间：2022年10月28日 09:56:20 作者：欢dog
使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
一、前言
在2020年的9月19日，万众期待的Vue3终于发布了正式版，命名为“One Piece”。
它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。
二、搭建准备
在开发前，你需要确定你的脚手架(vue-cli)的版本在3.x以上
如果版本不能达到要求，则重新安装vue-cli
npm install -g @vue/cli
三、搭建项目
1. 进入想要存放Vue3项目的目录，运行 然后Y：
vue create vue3-project //可以将vue3-project换成任何你想取的项目名
2. 出现的三个选项：
这边我们选择第三个自定义项目的配置
- 默认安装Vue3
- 默认安装Vue3
- 自定义安装
3.选择项目开发需要用到的配置：
- Babel：js编译器，可将代码转换为向后兼容
- TypeScript：简称ts，较js更为规范的编程语言
- Progressive Web App (PWA) Support：PWA是一个结合了最好的web和app经验的渐进式网络应用程序
- Router：vue路由
- Vuex：组件间传值，详情可看Vuex
- CSS Pre-processors:css预处理
- Linter / Formatter：代码风格化/格式化检查
- Unit Testing：单元测试是指对软件中的最小可测试单元进行检查和验证
- E2E Testing：E2E测试是一种功能测试。与单元测试不同，不会将应用程序分解为更小的部分以进行测试 - 而是测试整个应用程序。
4.选择Vue版本
5.是否选择class风格组件
6.选择ts处理工具和css预处理器
7.是否使用router的history模式
8.选择css预处理语言
9.选择lint的检查规范
- 只使用EsLint官网推荐规范
- 使用EsLint官网推荐规范+Airbnb的规范
- 使用EsLint官网推荐规范+Standard的规范（通用规范）
- 使用EsLint官网推荐规范+Prettier的规范（比较漂亮的规范）
10.Eslint检查时机
- 保存时检查
- 提交时检查
11.配置文件的选择
12.配置是否形成预设
13.搭建完成
四、启动项目
进入到项目中
cd ./vue3-project
运行
npm run serve
总结
到此这篇关于Vue3项目搭建的文章就介绍到这了,更多相关Vue3项目搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,分步骤介绍了安装和使用vue-router的方法,感兴趣的朋友跟随小编一起看看吧2023-08-08
本篇文章主要介绍了webstorm和.vue中es6语法报错的解决方法，小编总结了webstorm和.vue中出现的es6语法报错，避免大家采坑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要为大家详细介绍了vue组件实现弹出框点击显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
vue出现Uncaught SyntaxError:Unexpected token问题及解决
这篇文章主要介绍了vue出现Uncaught SyntaxError:Unexpected token问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了关于dev-tool安装方法(手动安装版),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
Element-Plus el-col、el-row快速布局及使用方法
这篇文章主要介绍了Element-Plus el-col、el-row快速布局及使用方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题
这篇文章主要介绍了vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
element-plus按需引入后ElMessage与ElLoading在页面中的使用
这篇文章主要介绍了element-plus按需引入后ElMessage与ElLoading在页面中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue jsx 使用指南及vue.js 使用jsx语法的方法
这篇文章主要介绍了vue jsx 使用指南及vue.js 使用jsx语法的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
这篇文章主要为大家详细介绍了Vue+Element ui实现树形控件右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论