preface

In the following period of time, I will imitate netease Cloud Music and use Vue to develop a netease cloud music project on mobile terminals. Before we can do this project, we need to do some preparatory work.

1. Access to netease Cloud API

Since this project is based on netease Cloud Music and all the data are obtained from netease Cloud, it is necessary for us to get the API of netease Cloud first

1. Install the Node environment

Before obtaining the API of netease Cloud, we must set up the Node environment first. Please refer to these two articles for the introduction of Node.js and setting up the Node environment.

  • 01-NodeJS Core Basics -Node Introduction
  • 02-NodeJS Core Foundation-Node environment setup

2. Download the netease cloud API to the local PC

Access the GitHub interface of netease Cloud API, download the entire project to the local PC, and decompress it.

3. Enter CMD in the decompressed file directory to go to the terminal window.

4. Enter CMDnpm installCommand to download dependencies

5. Enter CMDnpm app.jsCommand deployment server

When you see Server Running, the entire server is already deployed

6. Enter localhost:3000 in the address box of the browser

Or enter 127.0.0.1:3000 to enter this interface, it means that we have deployed the netease cloud server locally, and we can get the netease cloud API

2. Initial configuration

1. Create a Vue project

Use vuE-CLI to create a Vue. For more details about vue-CLI to create a Vue project, please go to 15-VUe-CLI4 Basic Use

  • Enter the command vue create music on the command line

  • Select manual creation mode

  • Select related configuration items

  • Whether to use router– select yes (y)

  • Which CSS preprocessor to choose – choose the first one

  • Which code specification to choose – choose the third (standard specification)

  • Choose when to conduct code rule checking — both

  • Select how to store the configuration – select the first one (in a separate file)

  • Save current configuration – Select No (n)

  • Press Enter and wait for the project to be created. If the following information is displayed, the project is successfully created

2. Delete default files

A project created in vue-CLI generates a lot of files by default that are not relevant to our project, such as favicon.ico, logo.png, hellodworld.vue… We can delete these files

Then we delete the extra code in the index.js file in the Router folder and the deleted file looks like this

3. Initialize the code in HTML

index.html

<! <meta name="renderer" content="webkit"> <! -- To get IE to run the latest render mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <! </title> <meta name="keywords" content="Netease Cloud Music, music, player, netease, download, play, DJ, free, star, Select, Playlist, Identify Music, Collect, Share music, interactive music, high sound quality, 320K, music social, official website, mobile site, music.163.com">
<meta name="description" content="Netease Cloud Music is a music product focused on discovery and sharing, relying on professional musicians, DJ, friends recommendation and social networking functions, to create a brand new music life for users."> <! -- Apple-touch-icon: this is an Apple private property that specifies the icon for saving web pages to the home screen --> <link rel="apple-touch-icon"  href="./apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.png">
<link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.png"> <! -- Web shortcut icon --> <link rel="icon" href="./favicon.ico">
Copy the code

You also need to put the ICONS used by the above code in the public directory

4. Adapt the mobile terminal with REM + viewport zoom

<head>
    ...
    <script>
      letScale = 1.0 / window.devicepixelRatio;let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no"> `; document.write(text); Document. The documentElement. Style. FontSize = window. InnerWidth / 7.5 +"px";
      document.documentElement.setAttribute('data-dpr', window.devicePixelRatio + ' ');
    </script>
</head>
Copy the code

Note:

  • If a string template is used in an HTML file and a variable is used in the string template, the HTML-plugin cannot handle it and will report an error
  • If we want to solve this problem, we need to use another loader,html-loader
  • Install HTML – loader
npm install --save-dev html-loader
Copy the code
  • Configure HTML – loader

    Create a new one under the project directory (music)vue.config.jsfile
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(html)$/,
          exclude: /node_modules/,
          use: {
            loader: 'html-loader',
            options: {
              minimize: true}}}]}}Copy the code

5. Automatically convert PX to REM with postCSS-PxtoREM

  • Install postcss – pxtorem
npm i -D postcss-pxtorem
Copy the code
  • Configuration postcss – pxtorem

    Create a new one under the project directorypostcss.config.jsfile
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {rootValue: 100, // propList: [The '*']}}}Copy the code
  • Rule out styles that don’t need to be converted to REM tips: Just change the style px to uppercase PX. For example:
The font - size: 15 px; --> font: 15Px;Copy the code

6. Achieve compatibility of CSS3/ES678 syntax with Webpack

The compatibility of CSS3/ES678 syntax has been implemented in the Vue- CLI creation project. If you need to specify which browsers are compatible, you can configure it in the.browserslistrc file in the project directory. For example: I need to be compatible with IE8 and later, Firefox 3.5 and later…

Ie >= 8 Firefox >= 3.5 Chrome >= 35 Opera >= 11.5Copy the code

7. Use FastClick to solve the mobile terminal click event delay problem of 100~300ms

  • Install fastclick
npm install fastclick
Copy the code
  • Initialize fastClick main.js
import fastclick from 'fastclick'

fastclick.attach(document.body)
Copy the code

8. Initialize default global styles

  • Create a CSS directory in the Assets directory
  • Place the prepared files in the CSS directory

  • Import base.scss in main.js
import './assets/css/base.scss'
Copy the code

Note: In mobile development, we generally do not need to have the font size change with the screen size. Since we use viewport scaling to adapt to mobile, we cannot directly set the font size, otherwise the font size will change with the screen size. Set the font size according to the pixel ratio. For example, if the screen is twice as large, make the font size twice mixin.scss

@mixin font_dpr($font-size){
  font-size: $font-size;
  [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size: $font-size * 3;}
}
Copy the code

9. Version control

  • Locate VCS in the toolbar and select Enable Version Control

  • Select Git in the window that pops up

  • Select the submit button in the upper right corner

  • Select all commit description information: Initialize the project

  • Create the Develop Branch by clicking Git: Master in the lower right corner and selecting New Branch

  • Create a branch to write business code. For now, create the Home branch to write the home page code

Don’t get lost with brother Jiang in front of learning: @ know sowing fishing education