cl0940-full Network Scarce VUE 2.0 advanced combat independent development of exclusive music WebApp

cl0940-full Network Scarce VUE 2.0 advanced combat independent development of exclusive music WebApp

Learning to be early, drip records, learning is progress!

Essay background: In a lot of times, many of the early friends will ask me: I am from other languages transferred to the development of the program, there are some basic information to learn from us, your frame feel too big, I hope to have a gradual tutorial or video to learn just fine. For learning difficulties do not know how to improve themselves can be added: 1225462853 to communicate to get help, access to learning materials.

cl0940-full Network Scarce VUE 2.0 advanced combat independent development of exclusive music WebApp

: Http://pan.baidu.com/s/1jI05TPW

Based on the Vue Family Barrel (2.x), the mobile music WebApp, a native mobile music App, is complete, fully functional, beautiful UI, and interactive.

Learn the components that can be used directly at work

13 x

Basic components

1.confirm: Confirm dialog box component

2.listview: Address List component

3.loading: Load-state component

4.no-result: No result display component

5.progress-bar: Progress bar Component

6.progress-circle: Circular progress bar Assembly

7.scroll: Mobile-side scrolling component

8.search-box: Search Box component

9.search-list: Search List Component

10.slider: Carousel Diagram Component

11.switches: Switch Switch component

12.top-tip: Top Message Prompt component

Song-list: Song list component

15 x

Business components

1.add-song: Add song to List component

2.disc: Song list Detail Page component

3.m-header: Page Header component

4.music-list: Song list page component

5.player: Player Kernel component

6.playlist: Playlist component

7.rank: Leaderboard Page Component

9.search: Search Page Component

8.recommend: Recommended page Components

10.singer: Singer Page component

11.singer-detail: Singer Detail Page component

12.suggest: Search Hint List component

13.tab: Top navigation bar Component

14.top-list: Leaderboard Detail Page Component

15.user-center: User Center Page component

Technology stack

Front-end

Vue: The MVVM framework used to build the user interface. Its core is the response of data binding and group system components

Vue-router: A routing system for single-page applications that uses the lazy Loading routes technology to optimize performance for asynchronous loading before the project goes live

Vuex:vue centralized state management, which is handy when multiple components share certain states

Vue-lazyload: Third-party images lazy loading library, optimize page loading speed

Better-scroll:iscroll's optimized version makes the mobile-side swipe experience smoother

Sass (SCSS): CSS precompiled processor

Es6:ecmascript New generation of syntax, modular, deconstructed assignment, Promise, Class and other methods are very useful

"Back End"

node. JS: Use Express to start a local test server

JSONP: Service-side communication. Crawl QQ Music (mobile) data

Axios: Service-side communication. Capture QQ Music (PC-side) data in conjunction with node. JS Proxy back-end requests

"Automated builds and other tools"

Vue-cli:vue Scaffolding tool for quick initialization of project code

Eslint: Code style Checker, specification code writing

Vconsole: Mobile debugging tool, output log on the mobile side

Harvest

Summed up a set of Vue generic components that can be reused in other projects, 15+, a business component

Summed up a set of commonly used SCSS Mixin library

Summed up a set of common JS tool function library

Realize the convenience of component and modular development

Realize the convenience of encapsulating objects into classes (ES6 Class) and initializing class instances using factory methods

Learn to use JS to write transition effects and animation effects to create a good user interaction experience

Todo

Song data all from QQ music, interface changes may have to modify JSONP and Axios code

Because the project has a few application-level states (around 10), the action, mutation, and getters are not split into separate files. But this architecture is not easy to maintain

Implementation Details

Main Page: Player kernel page, featured page, playlist details page, singer page, singer detail page, ranking page, search page, add song page, personal Center page, and more.

Core page: Player kernel page

Component Tree

cl0940-full Network Scarce VUE 2.0 advanced combat independent development of exclusive music WebApp