vue移动音乐app开发学习（一）：环境搭建

本系列文章是为了记录学习中的知识点，便于后期本身观看。若是有须要的同窗请登陆慕课网，找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门。

一：使用vue-cli脚手架搭建:

1：为了确保你的node版本在4.*以上，输入 node -v 查看本机node版本，低于4请更新。

2：输入：  npm install -g vue-cli       安装vue-cli脚手架。

3：输入： vue init webpack sell        安装项目模板，这里的sell是你模板文件的名字，可自定义。

4：安装完后会须要你填写一些东西，跟着图片下的内容填就好了

5:输入： cd sell    返回包的根目录

　　　　npm install    安装依赖

　　　　npm run dev   运行

二：相关配置：

一、相关依赖的配置：在package.json中的“dependencies”下，加入如下代码，而后执行npm instal

"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"babel-runtime": "^6.0.0", //转义es语法
"fastclick": "^1.0.6"  //解决移动端的300ms点击延迟

在devDependencies下加入如下代码

"babel-polyfill": "^6.2.0"   //es6 api的如promise的转义 

　　

 

二、eslint规则的修改(可忽略):在eslintrc.js中的rules对象加入如下两行。若是须要忽略其余的规则，请查看eslint官网

'eol-last': 0,  // 不检测文件末尾的空行
'space-before-function-paren':0  // 不检测函数左括号前的空格

三、公共的路径配置：修改webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'src': resolve('src'),
      'common': resolve('src/common'),
　　　　'components': resolve('src/components')
    }
  }

在alias对象下咱们能够定义路径的变量，原理是调用了resolve()这个方法：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

在resolve（）方法中，咱们直接将路径传入方法中，返回一个拼接好的路径