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

约定不等于承诺〃 2023-09-28 20:07 47阅读 0赞

## 系列文章目录 ##

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Vue3.0 项目启动</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126325618?spm=1001.2014.3001.5501" rel="nofollow">Vue3.0 项目启动（打造企业级音乐App）</a></td> 
  </tr> 
  <tr> 
   <td>Vue3.0项目——打造企业级音乐App（一）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126328303?spm=1001.2014.3001.5501" rel="nofollow">Tab栏、轮播图、歌单列表、滚动组件</a></td> 
  </tr> 
  <tr> 
   <td>Vue3.0项目——打造企业级音乐App（二）</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126342805?spm=1001.2014.3001.5501" rel="nofollow">图片懒加载、v-loading指令的开发和优化</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 文章目录 ####

*  系列文章目录
 *   *  Vue3.0 发布
     *  项目演示
     *  创建 vue3.0 工程
     *  声明

--------------------

### Vue3.0 发布 ###

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

### 项目演示 ###

vue3.0-music

### 创建 vue3.0 工程 ###

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

![在这里插入图片描述][de9641102d444a2d821664abccd942e3.png]

1.  创建 vue3.0 项目（vue-music）

vue create vue-music-next

1.  选取自定义配置

![在这里插入图片描述][6acac2dd2c3f46eda9eb251b5a838400.png]

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

![在这里插入图片描述][27648116eb964cea918858d2f85d9fd5.png]

1.  选择 3.x

![在这里插入图片描述][b0e5f4b1aca843e3979d0112daa21eb5.png]

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

![在这里插入图片描述][03264a549a364134b11e55357774f713.png]

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

![在这里插入图片描述][0bf814085d6c4b0690ba5f89bc2b78ca.png]

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

![在这里插入图片描述][c5dbca30a49e47e49e7159926693ab4a.png]

1.  保存的时候运行

![在这里插入图片描述][72c82e519ead4cf482c25566fe8505f8.png]

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

![在这里插入图片描述][907257246fc94da28994578232739b93.png]

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

![在这里插入图片描述][36c7c5b77e0942d7b5b0d54974be5a44.png]

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

![在这里插入图片描述][d707b2c6741c41b4ac379512a8ddfd5f.png]

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

![在这里插入图片描述][55750f835c5746738280a198c565da97.png]

1.  至此，项目创建完成

![在这里插入图片描述][3ddf8ed842244b3db0c56bad7bc8714a.png]

### 声明 ###

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

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

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

[de9641102d444a2d821664abccd942e3.png]: https://img-blog.csdnimg.cn/de9641102d444a2d821664abccd942e3.png
[6acac2dd2c3f46eda9eb251b5a838400.png]: https://img-blog.csdnimg.cn/6acac2dd2c3f46eda9eb251b5a838400.png
[27648116eb964cea918858d2f85d9fd5.png]: https://img-blog.csdnimg.cn/27648116eb964cea918858d2f85d9fd5.png
[b0e5f4b1aca843e3979d0112daa21eb5.png]: https://img-blog.csdnimg.cn/b0e5f4b1aca843e3979d0112daa21eb5.png
[03264a549a364134b11e55357774f713.png]: https://img-blog.csdnimg.cn/03264a549a364134b11e55357774f713.png
[0bf814085d6c4b0690ba5f89bc2b78ca.png]: https://img-blog.csdnimg.cn/0bf814085d6c4b0690ba5f89bc2b78ca.png
[c5dbca30a49e47e49e7159926693ab4a.png]: https://img-blog.csdnimg.cn/c5dbca30a49e47e49e7159926693ab4a.png
[72c82e519ead4cf482c25566fe8505f8.png]: https://img-blog.csdnimg.cn/72c82e519ead4cf482c25566fe8505f8.png
[907257246fc94da28994578232739b93.png]: https://img-blog.csdnimg.cn/907257246fc94da28994578232739b93.png
[36c7c5b77e0942d7b5b0d54974be5a44.png]: https://img-blog.csdnimg.cn/36c7c5b77e0942d7b5b0d54974be5a44.png
[d707b2c6741c41b4ac379512a8ddfd5f.png]: https://img-blog.csdnimg.cn/d707b2c6741c41b4ac379512a8ddfd5f.png
[55750f835c5746738280a198c565da97.png]: https://img-blog.csdnimg.cn/55750f835c5746738280a198c565da97.png
[3ddf8ed842244b3db0c56bad7bc8714a.png]: https://img-blog.csdnimg.cn/3ddf8ed842244b3db0c56bad7bc8714a.png