Vue3.0 项目启动(打造企业级音乐App)

简介: Vue3.0 项目启动(打造企业级音乐App)

Vue3.0 发布

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

项目演示

https://www.bilibili.com/video/BV1eG4y1e7AR?t=29.1

vue3.0-music

创建 vue3.0 工程

  1. 打开命令行,定位到你想把项目放到的位置(比如桌面)

  2. de9641102d444a2d821664abccd942e3.png
  3. 创建 vue3.0 项目(vue-music)
  vue create vue-music-next
  1. 选取自定义配置
  2. 6acac2dd2c3f46eda9eb251b5a838400.png
  3. 选择 Router,Vuex,CSS 预处理器,Linter 校正工具
  4. 27648116eb964cea918858d2f85d9fd5.png
  5. 选择 3.x
  6. b0e5f4b1aca843e3979d0112daa21eb5.png
  7. 是否保存刚才的配置(y/n 都可以)
  8. 03264a549a364134b11e55357774f713.png
  9. 选择自己想用的 CSS 框架(此项目选 Sass)
  10. 0bf814085d6c4b0690ba5f89bc2b78ca.png选择适合自己的校正工具(此项目选标准的校正)
  11. c5dbca30a49e47e49e7159926693ab4a.png
  12. 保存的时候运行
  13. 72c82e519ead4cf482c25566fe8505f8.png选择把一些配置放在 package.json 里
  14. 907257246fc94da28994578232739b93.png

  15. 是否用于未来的配置(自行选择)

36c7c5b77e0942d7b5b0d54974be5a44.png

  1. 使用 yarn 还是 npm 安装(随意)

  2. d707b2c6741c41b4ac379512a8ddfd5f.png之后便开始创建工程(耐心等待即可)
  3. 55750f835c5746738280a198c565da97.png
  4. 至此,项目创建完成
  5. 3ddf8ed842244b3db0c56bad7bc8714a.png

声明

你也完全可以把项目部署到 github 等开源网站上,以便之后的管理操作。

操作也很简单,先在 github 上创建项目,之后通过 git clone + ssh 地址,在命令行中执行,然后再按本篇文章的顺序操作即可。

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

相关文章
|
6天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
46 5
|
6天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
82 3
|
6天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
38 6
|
3天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1
|
4天前
|
监控 JavaScript 前端开发
Vue 项目性能优化指南:提升应用速度与效率
Vue 项目性能优化指南:提升应用速度与效率
|
4天前
|
JavaScript Go
VUE3+vite项目中动态引入组件和异步组件
VUE3+vite项目中动态引入组件和异步组件
|
6天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
10 3
|
6天前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
15 1
|
6天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
12 0
|
6天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
8 0