脚本宝典收集整理的这篇文章主要介绍了

前端框架Vue(11)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

一、前言

  在这个 vue 系列的第一篇文章,我写过是 vue-cli-simple 脚手架的环境搭建。前段时间,也刚好给公司做了一个后台管理系统的产品,用的就是 vue-cli-simple。 一个月的时间将系统从无到上线,组件化、模块化开发的非常快速、可读性、复用性,整理架构清晰,易管理、维护。

  所以,这次利用 vue-cli 完整版来实践一下。那么这个 simple 在哪呢?其实,simple 是 webpack-simple。这个脚手架的 webpack 有更全的功能。

  而且,目录结构有了比较大变化。可自行去 github 克隆仓库到本地比较。我在开发完成后,将 Demo 打包放到了 xshell 上部署,发现只要在config 文件夹中的 index.js 稍稍改动就不会出现空白页 404 的情况。


二、仿网易云音乐

vue-cli-demo github地址传送门

这里写图片描述

这是一张 Demo 的截图,大致模块四个,header、carousel、pages、footer。主要功能,组件(页面间的切换),登录(待做),轮播图组件,公共数据、状态管理。完成这个项目可以体验到:

1、vue-cli 的环境搭建,项目目录。
2、学习组件化、模块化开发。
3、学习 vue 全家桶:vue-router 路由、vuex 状态管理。
4、了解 webpack 的压缩、打包。

三、技术栈

vue.js + vue-router + vuex + ElementUI

四、vue-cli 环境搭建

vue(脚手架) 推荐开发环境,一文中详细的介绍了 simple 的环境搭建,而 vue-cli,只需要改成 vue init webpack <项目名字>,即可。

这里写图片描述


五、目录结构

|——build                             //构建              

|——config                            //配置

|——node_modules                      //npm项目依赖

|——src    
    |——assets                        //静态资源,图片
|    
    |——components——                  //公共组件 
|              |——carousel.vue        //轮播图组件
    |
|              |——footerComponent.vue //底部组件
    |        
|              |——headerComponent.vue //头部组件
    |
|              |——navComponent.vue    //红色部分
    |
|
    |——config——
|              |——env.js             //开发api路径
    |
|              |——fetch.js           //封装的异步请求
    |——data
|
    |——router——                     //路由
|              |——index.js
    |——service                      //项目中全部的异步接口请求文件
|    
    |——store——                      //vuex状态管理
|             |——action.js
    |                        
|             |——index.js
    |
|             |——mutations.js
    |——view——                      //组件页面部分
|            |——findMusicPage——
    |                 |——musicTypeController
|            |
    |                 |——findMusicComponent.vue
|            |——downloadComponent.vue
    |                
|            |——friendComponent.vue    
    |                
|            |——musicManComponent.vue
    |
|            |——myMusicComponent.vue
    |——app.vue                      //主文件
|            
    |——main.js                      //主文件入口
|——static
    
|——test                             //单元测试

|——index.html                        //首页

|——package.json

|——README.md    

六、vue-cli-easy

这是我自己根据 vue-cli 环境,添加了 vue-router, vuex, api接口公共抽象配置,elementUI 的脚手架。你可以直接 clone 到你的 workspace 中,进行依赖的安装(npm install),即可以进行自己的项目开发了。

项目地址传送门:github vue-cli-easy 链接


github 上的 README.md 持续的会完善 ... ...

总结

以上是脚本宝典为你收集整理的

前端框架Vue(11)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目

全部内容,希望文章能够帮你解决

前端框架Vue(11)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过