vue初探

vue官网,element-ui
首次创建vue工程，修改了少量代码，居然报这样的错误，把我吓一跳，这还是我了解的js语法吗，就是python也没有那么严格吧。恕我是新手，不了解规矩。

调研之后，原来还有eslint，于是执行命令

npm install -g eslint

使用vue init webpack my-project创建的vue工程是有.eslintrc.js文件的，所以你不需要再执行eslint --init,下面是刚创建vue工程的默认配置

现在根据我自己的需要配置如下,按照EsLint Rules中的Best Practices
，配置自己的项目。在配置过程中，如果遇到了一些问题，可以参考从0到1配置eslint,我目前的配置如下

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    node: true
  },
  extends: [
    'plugin:vue/essential', 
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  rules: {
        'generator-star-spacing': 'off',
        "no-debugger": process.env.NODE_ENV === 'production' ? 2 : 0,
        // 强制在 function的左括号之前使用一致的空格
        "space-before-function-paren":['error', 'never'],
    // 不要求操作符周围有空格
    "space-infix-ops":'off',
    // 忽略空格
    "key-spacing":'off',
    // 新行允许有空格
    "space-before-blocks":"off",
    // 逗号前后的空格
    "comma-spacing":"off",
    // 允许多个空格
    "no-multi-spaces":"off",
    // 允许关键字空格
    "keyword-spacing":"off",
    // 文件末尾取消强制换行 
    "eol-last":"off",
    // 缩进风格
    "indent":"off"
  }
}

编辑器我采用的vscode，安装插件vscode-element-helper、vetur
接着我对比vue的官方文档，发现我的代码是这样的

<template>
  <el-input v-model="isearch" placeholder="请输入您需要爬取的网址" prefix-icon ="el-icon-search" @keyup.enter.native="doSearch"></el-input>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    doSearch() {
      console.log('查找了')
    }
  }
}
</script>

官网并没有介绍export default是什么东东，故而单纯学vue没啥用，原来还有一个叫ES2015的写法。说明与比较：new Vue() 和 export default {}，这个跟我之前写requirejs有些类似。
有时候新建一个工程，会出现下面的错误

这个时候需要注意

自行npm install
最有效的办法是：npm config set registry http://registry.npm.taobao.org
可以通过npm config list查看是否配置ok

猜你喜欢