001_Vue音乐播放器（搭建项目目录）

在此默认你已掌握中级的html+css+JavaScript 知识，并且对 vue 有实际使用经验（看完大部分官方文档，了解基础语法，写过小demo），有使用过webpack和npm，能够通过vue-cli搭建初始化目录。

这个项目是 源自 慕课网 的教学视频 ，在其基础上使用我自己的理解来实现的音乐播放器，使用的 技术栈有vue全家桶（vue+vue-router+vuex+axios）以及一些第三方ui库，默认你已经搭好了node环境，建议使用vsCode编辑器开发（插件众多）。

现在，

开始这个项目

Go~

使用vue-cli 初始化 一个vue项目 

vue init webpack my_music_player

在此我是没有选择esLint做代码检测的（太麻烦==），但建议加上

 在项目中有使用到less 进行样式编写，因此安装less插件

cnpm install less less-loader --save-dev

接下来找到bulid目录下的webpack.base.conf.js并打开，找到module下的rules写下，加入对less文件的解析。

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}

在搭建好的vue项目的src文件夹上加上自己开发需要的文件夹common，用于存放自己的一些文件资源

style文件夹用于存放less样式文件，base.less表示公用基础样式，在App.vue中使用@import 方式引入

其中的一个小坑 == ，忘记加个分号，报错了==，去掉分号就行了。

在base.less文件中引入 variable.less （专门存放变量的样式文件，用于规定整个项目的公用样式变量，如background-color,color,font-size等）

以后有需要将样式抽离到公共文件中的再拉进来，这里只做演示。

建议将所有less文件使用一个index.less文件进行引入，然后导入根组件App.vue中