脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3项目搭建

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组件中获取全局的点击事件方法

    在Vue组件中获取全局的点击事件方法

    今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 解决父组件跳转子路由后当前导航active样式消失问题

    Vue 解决父组件跳转子路由后当前导航active样式消失问题

    这篇文章主要介绍了Vue 解决父组件跳转子路由后当前导航active样式消失问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • ElementUI实现el-table行列合并的操作步骤

    ElementUI实现el-table行列合并的操作步骤

    在前端开发中,数据展示一直是一个重要的部分,而表格则是数据展示最常见的形式之一,ElementUI 是饿了么前端团队推出的一款基于 Vue 的 UI 组件库,其中的 el-table 组件是一个功能强大且灵活的表格组件,今天我们要详细探讨的是 el-table 的行列合并操作
    2024-08-08
  • vue 实现把路由单独分离出来

    vue 实现把路由单独分离出来

    这篇文章主要介绍了vue 实现把路由单独分离出来，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    这篇文章主要介绍了Vue动态构建混合数据Treeselect选择树及巨树问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • vue实现密码显示隐藏切换功能

    vue实现密码显示隐藏切换功能

    这篇文章主要介绍了vue实现密码显示隐藏切换功能,需要的朋友可以参考下
    2018-02-02
  • 解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

    解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

    这篇文章主要介绍了解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目.文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 关于webpack-dev-server配置代理解决前端开发中的跨域问题

    关于webpack-dev-server配置代理解决前端开发中的跨域问题

    这篇文章主要介绍了关于webpack-dev-server配置代理解决前端开发中的跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • van-dialog弹窗异步关闭功能-校验表单实现

    van-dialog弹窗异步关闭功能-校验表单实现

    有时候我们需要通过弹窗去处理表单数据，在原生微信小程序配合vant组件中有多种方式实现，其中UI美观度最高的就是通过van-dialog嵌套表单实现，这篇文章主要介绍了van-dialog弹窗异步关闭-校验表单,需要的朋友可以参考下
    2023-11-11
  • Vue中比较流行且好用的组件使用示例

    Vue中比较流行且好用的组件使用示例

    这篇文章主要介绍了Vue中比较流行且好用的一些组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-08-08

最新评论