Vue移动端音乐APP学习【一】:项目前期准备

检查环境

在搭建之前检查一下vue-cli的版本vue --version)和node是否安装(node --version)

使用vue-cli脚手架搭建

输入命令:vue create music

选择Manually select features并配置,具体选择如下:

Vue移动端音乐APP学习【一】:项目前期准备

相关依赖包的配置

在package.json中的“dependencies”下:(使用命令安装以下依赖包: npm 依赖包名 --save

Vue移动端音乐APP学习【一】:项目前期准备

fastclick:用于解决移动端的300ms点击延迟

babel-runtime:转义es语法

在"devDependencies"下:(使用命令安装以下依赖包: npm 依赖包名 --save-dev

Vue移动端音乐APP学习【一】:项目前期准备

项目目录

Vue移动端音乐APP学习【一】:项目前期准备

图标字体、公共样式等准备

  • 在common文件下创建fonts文件夹,放入图标字体的相关文件

Vue移动端音乐APP学习【一】:项目前期准备

  • 在common文件下创建styles文件夹,用于存放公共样式,放入图标字体样式并修改其路径

Vue移动端音乐APP学习【一】:项目前期准备

  • 还有一些公共样式(可点击下载):variable.scss(颜色定义和字体定义规范)、mixin.scss(一些全局方法)和base.scss(设置全局的背景和字体颜色)

 

Vue移动端音乐APP学习【一】:项目前期准备

上一篇:JS call() apply() bund() 原理实现


下一篇:安卓开发环境搭建