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()方法中,我们直接将路径传入方法中,返回一个拼接好的路径

原文地址:https://www.cnblogs.com/momozjm/p/7123846.html