Vue3项目创建的详细过程

简介: 本文手把手教大家创建vue3项目

准备工作

检查node版本

输入node -v 检查你电脑安装的node版本,要保证在10以上
在这里插入图片描述

安装脚手架 Vue Cli

安装或者升级指令:

npm install -g @vue/cli

Or

yarn global add @vue/cli

要保证自己的脚手架版本在 4.5.0 以上
安装成功成功后输入指令检查版本

vue --version

创建项目

输入指令创建项目

vue create my-project

注: 下面我使用命令行完成项目创建的步骤,喜欢可视化界面的也可以输入 vue ui 打开可视化面板完成项目的创建,一下安装步骤一致:

安装步骤

  1. 输入上面创建项目的指令后,进入到选择页面:
    上面的是我保存的预设,这里我们选择最后一项,进行自定义设置(空格进行选择,回车进入下一步)
    在这里插入图片描述
  2. 下一步,我们可以看到提供了一系列的支持选项,我们可以选择自己需要的:
    在这里插入图片描述
    我这里项目需要 Typescript,所以除默认选择外就选择了第三个,然后回车下一步

  3. 这里询问要使用 vue 的哪一个版本,我们选择3.x就行了
    在这里插入图片描述

  4. 这里是问你,需不需要 class-style 的组件来支持ts,由于 vue3 重写之后,不用 class 也会写的很舒服,也不需要额外的配置,所以我这里选择 N
    在这里插入图片描述
    5.这里是问你,是否需要结合 Babel 和 ts 一块使用,babel会自动帮你添加 polifill 和转换 JSX,我这里不需要,所以选择n
    在这里插入图片描述
    6.然后是问你关于 eslint 的一些配置,这里默认就行,不用添加额外的规则
    在这里插入图片描述
  5. 下面是问你 Lint 的特性,是在默认保存时进行 Lint 还是在 commit 的时候他帮你 Lint,这里就选择默认
    在这里插入图片描述
  6. 询问是将配置文件放在单独文件还是 package.json 文件里,这里选择单独文件
    在这里插入图片描述
  7. 询问是否要保存为预设,方便以后一键安装,这里看自己需求,我选择n
    在这里插入图片描述

    安装完成

    最后回车,显示如下界面,就说明我们已经安装成功啦
    npm run serve 运行项目

在这里插入图片描述

相关文章
|
3月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持,重构前端开发范式。性能优化与生态协同并进,兼顾易用性与工程化,引领Web开发迈向高效、可维护的新纪元。(238字)
703 139
|
3月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能,但仍需遵循最佳实践。合理使用 v-if、key、computed,避免深度监听,利用懒加载与虚拟列表,结合打包优化,方可充分发挥其性能优势。(239字)
352 1
|
8月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
1138 5
|
4月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
541 11
|
3月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
414 0
|
5月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
602 1
|
10月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
576 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
347 0
|
6月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
165 0
|
8月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
801 17