Vue3.0 项目启动（打造企业级音乐App）

已于 2022-08-31 17:15:36 修改
阅读量3.9k 收藏 81
点赞数 53
分类专栏： Vue3 项目实战（音乐APP） 文章标签： vue.js 前端 javascript
于 2022-08-14 09:01:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45902692/article/details/126325618
版权

系列文章目录

内容参考链接
Vue3.0 项目启动Vue3.0 项目启动（打造企业级音乐App）
Vue3.0项目——打造企业级音乐App（一）Tab栏、轮播图、歌单列表、滚动组件
Vue3.0项目——打造企业级音乐App（二）图片懒加载、v-loading指令的开发和优化

文章目录

Vue3.0 发布

2020年09月18日，vue3.0 版本正式发布。这意味着在未来两到三年时间，vue 的主流版本将由 2.x => 3.x。所以，学习开发 vue3.0 的项目是必要的，也是必须的。接下来，开启我们的 vue3.0 时代吧！

项目演示

vue3.0-music

创建 vue3.0 工程

  1. 打开命令行，定位到你想把项目放到的位置（比如桌面）

在这里插入图片描述

  1. 创建 vue3.0 项目（vue-music）
	vue create vue-music-next
  1. 选取自定义配置

在这里插入图片描述

  1. 选择 Router，Vuex，CSS 预处理器，Linter 校正工具

在这里插入图片描述

  1. 选择 3.x

在这里插入图片描述

  1. 是否保存刚才的配置（y/n 都可以）

在这里插入图片描述

  1. 选择自己想用的 CSS 框架（此项目选 Sass）

在这里插入图片描述

  1. 选择适合自己的校正工具（此项目选标准的校正）

在这里插入图片描述

  1. 保存的时候运行

在这里插入图片描述

  1. 选择把一些配置放在 package.json 里

在这里插入图片描述

  1. 是否用于未来的配置（自行选择）

在这里插入图片描述

  1. 使用 yarn 还是 npm 安装（随意）

在这里插入图片描述

  1. 之后便开始创建工程（耐心等待即可）

在这里插入图片描述

  1. 至此，项目创建完成

在这里插入图片描述

声明

你也完全可以把项目部署到 github 等开源网站上，以便之后的管理操作。
操作也很简单，先在 github 上创建项目，之后通过 git clone + ssh 地址，在命令行中执行，然后再按本篇文章的顺序操作即可。

不积跬步无以至千里，不积小流无以成江海

点个关注不迷路，持续更新中…

前端杂货铺
关注
  • 53
    点赞
  • 踩
  • 81
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 89
    评论
专栏目录
【05Vue3 起步】Vue3 起步：创建项目、编写组件和运行应用
燃正科技
06-08 5500
到这里，你已经成功入门 Vue3，并编写了一个简单的应用程序。接下来，你可以继续学习 Vue3 的文档和教程，深入了解 Vue3 的更多功能和用法。根据提示选择默认配置或手动配置项目。你还可以使用预设模板，如 TypeScript 或 Vue Router。现在我们已经创建了一个 Vue3 项目，接下来我们将编写第一个 Vue 组件。现在我们已经编写了一个 Vue 组件，接下来我们将在应用程序中使用它。现在我们已经完成了组件的编写和使用，接下来我们将运行应用程序。首先，我们将创建一个新的 Vue3 项目。
Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程
老司机的后备箱
08-19 615
主题 | Element Plus/* 只需要重写你需要的即可 */);// 如果只是按需导入，则可以忽略以下内容。// 如果你想导入所有样式:【必需】注意：一定要在element-plus的index.css后面引入，否则自定义样式文件不会生效。// 引入Element Plus// 引入自定义样式文件。
vue3.0源码的启动
最新发布
qq_44149644的博客
07-01 319
pnpm (pnpm)：作为npm的替代品，pnpm通过共享依赖和按需安装，极大地提高了依赖安装的速度和磁盘空间的使用效率。如果你是在 Vue 3.x 中遇到问题，确保项目中安装了正确的 Vue 版本。如果你的项目是基于 Vite 的，确保同时安装了 @vitejs/plugin-vue，因为Vite默认依赖于Vue。–sourcemap 等效于 -s，在这里不等效于-sourcemap（会产出vue.global.prod.js是 Vue 3 的一个全局、生产环境的构建版本）这个是3.0源码的地址。
vue3.0 启动
Xiaqiyule的博客
11-05 610
vue3.0 配置-启动配置 ** 配置 1.安装 vue-cli3 npm install -g @vue/cli OR yarn global add @vue/cli 2.创建项目 vue create my-project OR vue ui 3.在项目中安装 composition-api 体验 vue3 新特性 npm install @vue/composition-api --save OR yarn add @vu*e/composition-api 4.在使用任何 @vue/compo
安装启动vue，简洁（3.0版）
qq_42800468的博客
06-19 213
首先需要安装Node.js，可以在Node.js官网下载对应版本的安装文件，并进行安装。安装成功后，可以在命令行中输入node -v来检查是否安装成功。Vue CLI是一个命令行工具，可以方便地创建和管理Vue.js项目。完成Vue CLI的安装后，可以使用vue create命令来创建Vue.js项目。然后打开浏览器，在地址栏中输入http://localhost:8080，即可查看Vue.js项目。其中，my-project可以替换为你自己的项目名称。创建Vue.js项目。运行Vue.js项目。
如何启动一个vue3的项目
L念安dd的博客
01-16 2596
关于如何启动一个vue3的项目的还算保姆级文档
Vue3.0 + typescript 高仿网易云音乐 WebApp
weixin_39822244的博客
01-31 1055
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布，让我心动不已，于是尝试用 vue3 实现一个完整的项目，整个项目全部使用了 composition api, 相比较 options 方式，逻辑更加清晰，使用也更加灵活。 先贴上地址，喜欢的可以 star 一波 源码地址 : https://github.com/bianyingchun/vue3-music 这里还有 react hooks 版本 项目介绍 本项目是使用 vue-cli 4.5 搭建的项目
vue3-element-plus-im vue3.0 element-plus vue-cli vue-route.zip
03-03
Vue3 Element Plus IM 是一个基于 Vue.js 3.0、Element Plus UI 框架以及 Vue Router 的前端项目模板。这个压缩包包含了构建一个高效、响应式的 Web 应用所需要的核心组件和工具。以下是关于这些关键技术点的详细...
Vue3.0项目实战课-朝夕后台管理界面结构设计
Vue3.0的响应式系统经过了重写，使得其性能得到提升，同时还提供了更好的Tree-Shaking支持，以减少项目的体积。Vue3.0还采用了Proxy来替代Object.defineProperty，以提供更直观的响应式数据操作方式。 ## 1.2 朝夕...
vite+vue3+ts从0到1搭建企业级项目
Allen-
08-29 633
vite+vue3+ts搭建一个企业级项目
Vue3.0 项目打包，启动
早日成为鹏总
03-25 5496
1.打包 1.使用 vue ui打包（选择任务-选择build-选择运行） 2.使用命令打包（vite build），本项目使用vite进行打包 2.生成打包文件 1.项目中会出现一个dist文件 3.新建承载服务器 1. 进入D盘，安装express-generator生成器 执行 npm install express-generator -g 进行安装 2. 创建一个express项目 执行 express expressDemo （expres...
Vue3项目启动教程
qq_42190530的博客
06-06 473
计算机毕设指导、Java
vue3.0+vue-cli工程项目搭建运行
总结前端开发中遇到的问题，分享前端知识
02-16 554
使用vue-cli搭建: ## 查看@vue/cli版本，确保@vue/cli在4.5.0以上 vue --version ## 安装或者升级@vue/cli npm install -g @vue/cli ## 创建 vue create vue3-demo ## 启动 cd vue3-demo npm run serve
Vue3.0项目——打造企业级音乐App（一）Tab栏、轮播图、歌单列表、滚动组件
HuoZhiyan 的博客
08-14 2613
Vue3.0项目——打造企业级音乐App（一）Tab栏实现、轮播图实现、歌单列表实现、滚动组件的封装
Vue3 开启
m0_62962469的博客
10-24 2160
重写虚拟DOM的实现和Tree-shaking(移除JavaScript上下文中未引用的代码的行为的一个术语)1.使用vue-cli创建(保证vue-cli版本在4.5.0以上)移除keyCode支持作为v-on的修饰符。开发环境中，无需打包代码，可快速的冷启动。真正的按需编译，不再等待整个应用编译完成。vue3更好的支持TypeScript。watch与watchEffect。provide与inject。ref与reactive。新一代的前端构建工具。2.使用vite创建。
vue3 用vue-cli和vite启动项目
树上骑个猴的博客
09-06 7735
1.用vue-cli启动项目 2.用vite启动项目
如何启动一个vue3项目？
ajaxsync
10-08 553
创建vue3项目的方式，有多种：使用create-vue，Vue 官方的项目脚手架工具使用Create Preset，可参考使用vueCLI，可参考，不再赘述使用Vite，可参考，不再赘述。
vue创建项目步骤（3.0以上）
qq_34136709的博客
04-25 1660
vue创建项目步骤（3.0以上） 首先我们要看一下我们本地的vue版本，如果是低版本的话按照以下版本升级（没装的话建议安装一下npm和node.js可自行百度） 新打开的窗口如下，滑到最下面 这里的安装也就是升级版本会自动覆盖原来的低版本 安装完成后我们检查一下版本 vue --version 下面我们来创建自己的vue项目 进入到我们想要把项目放在的文件夹中，用cmd命令进行打开 按回...
vue 3.0 企业级项目实战
06-07
Vue 3.0 是一款流行的前端框架，其带来的许多新特性和性能优化使得在企业级项目中使用变得更加可行。 在企业级项目中，通常需要处理大量的数据和复杂的逻辑结构。Vue 3.0 中新增的 Composition API 可以更好地组织和管理代码，使得大型项目更加可维护和易于扩展。同时，Vue 3.0 还支持 TypeScript，能够提供更好的类型检查和编程体验，减少开发过程中的错误。 在企业级项目中，性能也是一个重要的考虑因素。Vue 3.0 中引入的静态编译和虚拟 DOM 改进了渲染表现，能够更加高效地处理大规模的数据和组件。同时，Vue 3.0 还引入了 Tree-Shaking 和代码分割等技术，能够提升网站的加载速度和性能。 在企业级项目中，通常需要与后端数据接口进行交互，Vue 3.0 也提供了一系列的工具和库，可以方便地与后端进行通信。例如，Vue 3.0 框架自带的 Axios 插件可以轻松地发送 HTTP 请求，而 Vue Router 可以处理不同页面之间的导航和跳转。 总之，Vue 3.0 在企业级项目中具有广泛的应用前景。它的适配性和高效性使得大型组件库和单页面应用程序能够更好地应对现代互联网的挑战，提高项目的效率和稳定性。
评论 89
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值