项目简介

该项目使用vue仿写QQ音乐，心目中涉及vue常用技术，移动端屏幕适配、移动端事件处理、路由、通信、状态管理、数据传输、跨域、数据接口爬取、打包、优化

环境配置

1、node版本要求:8.x 2、全局安装vue-cli 全局安装vue脚手架在命令行执行：

npm install vue-cli -g

如果npm安装较慢，可以切换淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

初始化QQ音乐项目

1. 在桌面右键git bash here打开git命令行
2. 初始化项目：

vue init webpack music

• init：表示用vue-cli来初始化项目
• webpack：表示模板名称，用于后期编译打包
• music：项目名称 输入命令回车后，会询问几个简单设置选项

<<<<<<< HEAD

配置utils

在build/utils.js文件内： 在cssLoaders里面添加px2remLoader方法用于将px转换为rem

const px2remLoader = { 
    loader: 'px2rem-loader', 
    options: { 
      'remUnit':75,'baseDpr':2    // 设计稿width为750，因此这里是75
    } 
  }

接下来将px2remLoader方法添加到generateLoaders的loaders数组内

const loaders = [cssLoader, px2remLoader]

使用方法

以上几个步骤配置完毕以后，重启服务，然后组件中写尺寸单位就可以直接写px，具体值直接按照设计稿来做就ok

=======

• Project name？因为之前设置了项目名称为music，所以可以直接回车
• Project description？项目描述，可选
• Author？作者，如果你有配置git的作者，他会默认读取。
• Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。这里选Y
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。 接下来会安装项目基础模板，直到光标正常显示

3. 切换到项目主目录

cd music

3. 安装项目依赖

cnpm install

4. 项目预览/启动项目服务

npm run dev

项目目录介绍

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- vue-loader.config.js         // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

解决移动端屏幕适配

详细步骤见个人博客

安装项目需要的插件

stylus

stylus为css预处理

npm install stylus --save
npm install stylus-loader --save

项目辅助：vscode插件安装

• eslint 用于检查代码语法错误
• vue 语法高亮
• language-styl stylus语法高亮

f52c0778b64b92f6208ae043bcab0dceb2309f13