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 运行

二：相关配置：

1、相关依赖的配置：在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的转义

2、eslint规则的修改(可忽略):在eslintrc.js中的rules对象加入以下两行。如果需要忽略其他的规则，请查看eslint官网

'eol-last': 0,  // 不检测文件末尾的空行

'space-before-function-paren':0  // 不检测函数左括号前的空格

3、公共的路径配置：修改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（）方法中，我们直接将路径传入方法中，返回一个拼接好的路径

巴特西

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

最新文章

热门文章