eslint

都说 Vue2 简单上手容易，的确，看了官方文档确实觉得上手很快，除了 ES6 语法和 webpack 的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改 dom 的锤子不能用了， vue 只用关心数据本身，不用再频繁繁琐的操作 dom ，注册事件、监听事件、取消事件。。。。（确实很烦）。 vue 的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能的，当用 vue-cli 构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握 ES6 ，而 vue 的全家桶( vue-cli , vue-router , vue-resource , vuex )还是都要上的。 vue.js 有著名的全家桶系列，包含了 vue-router ， vuex ， vue-resource ，再加上构建工具 vue-cli ，就是一个完整的 vue 项目的核心构成。 vue-cli 这个构建工具大大降低了 webpack 的使用难度，支持热更新，有 webpack-dev-server 的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就ok。 1.安装vue-cli ① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入： npm install webpack -g 或者（ npm

做项目的时候，我把eslint设置为了false，可想而知提交会产生的冲突 让我一个一个解决肯定不可能的，eslint的rule很多 在vue的配置文件.eslintrc.js中配置以下选项 这样只需要右键格式化以下文件夹，大部分eslint规则报错就会被干掉了 module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 'plugin:vue/essential', // https://github.com/standard/standard/blob/master/docs/RULES-en.md 'standard' ], // required to lint *.vue files plugins: [ 'html' ], // add

由于eslint-config-vue已经被废弃，于是总结了一下eslint-plugin-vue-libs的eslint config配置，如下： module.exports = { extends: ['plugin:vue/essential'], plugins: ['vue-libs'], parserOptions: { parser: require.resolve('babel-eslint'), ecmaVersion: 2017, sourceType: 'module' }, env: { es6: true, node: true }, globals: { document: false, navigator: false, window: false }, rules: { // 0 禁用此规则 1 不符合规则即给出警告 2 不符合规则即报错 'accessor-pairs': 2,// 在对象中使用getter/setter 'arrow-spacing': [2, { 'before': true, 'after': true }],// 箭头函数前后括号 'block-spacing': [2, 'always'],// 块级作用域缩进 https://eslint.org/docs/rules/block-spacing#rule

一 修改build下的webpack.base.conf.js文件 注释掉下面代码 const createLintingRule = () => ({ // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // formatter: require('eslint-friendly-formatter'), // emitWarning: !config.dev.showEslintErrorsInOverlay // } }) 二 重启项目 1 关闭项目 2 npm run dev 启动项目 来源： oschina 链接： https://my.oschina.net/u/4318023/blog/4691694

vue 打包配置路径输出解决静态资源相对路径问题 方法一： config/index.js build: { assetsPublicPath: './', ...... } 方法二： webpack.prod.conf.js output: { publicPath: './' } vue 背景图片的引用路径问题 build utils.js if(options.extract){ return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) } } 不使用Vue修改语法正则，需要在webpack.base.conf.js中把以下代码注释 module: { rules: [ // { // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // formatter: require('eslint-friendly