vue-cli 基本安装配置(个人习惯)

生成vue-cli项目

// 全局安装vue-cli
npm install -g vue-cli

// 初始化vue-cli脚手架项目
vue init webpack

根据个人习惯安装依赖

css：stylus

devDependencies:中添加
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",

ajax：axios

dependencies：
    "axios"："^0.16.0"

阻止移动端点击300ms延迟：fastclick

dependencies：
    "fastclick"："^1.0.6"

防止在webapp中出现下拉阴影：better-scroll

dependencies：
    "better-scroll": "^1.8.4",

将页面生成图片

dependencies：
    "html2canvas": "^1.0.0-alpha.10",

vuex状态管理

dependencies：
    "vuex": "^2.3.1",

图片懒加载

dependencies：
       "vue-lazyload": "^1.0.3",

插件的基本使用方法

`css:stylus的基本使用`

需要在style标签中添加  `scoped lang="stylus" rel="stylesheet/stylus"`
scoped  表示在编译的时候 会在class后生成随机的数字防止重名

`axios的基本使用`

在src目录下面添加API文件夹  将需要请求的接口统一放到api文件夹下面
`结合promise`异步的将请求获取到的数据返回到相对应的组件中、

`fastclick的基本使用`

在main.js中  import fastclick from 'fastclick'
fastclick.attach(document.body)

`better-scroll的基本使用`

功能相对比较强大 见github组件
'上下惯性滚动'  '上拉下拉刷新'  '轮播图'  '通信录'

`html2canvas 将页面生成图片的插件`

自行文档

`vue-lazyload 图片懒加载`

在main.js中 导入 import vueLazyload from 'vue-lazyload'
     Vue.use(vueLazyload, {              // 设置图片懒加载
        loading: require('@/common/image/default.png')
     })

eslint 基本配置

'rules': {
    'arrow-parens': 0,  // 箭头函数参数使用圆括号

    'generator-star-spacing': 0,

    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,   // 生产环境的禁止使用 否则开发环境可以使用

    'eol-last': 0,  // 禁止文件尾行出现空行 文件以单一的换行符结束

    'space-before-function-paren': 0  // 在function 括号之前出现0个空格
  }

生成vue-cli项目
根据个人习惯安装依赖
插件的基本使用方法
eslint 基本配置