使用 Vue-Cli 3.x 搭建项目框架

背景

最近正在做一个项目，使用 Vue-Cli 3.x 新搭建了一个框架

步骤

使用 Vue-Cli 初始化项目

vue create project-name

image.png

为新项目引入 Element-UI 框架

vue add element

配置项目的 .eslintrc.js 和 vue.config.js

// .eslintrc.js
module.exports = {
  "parser": "babel-eslint",
  "extends": [
    "eslint-config-airbnb-base"
  ],
  "env": {
    "mocha": true
  },
  "globals": {
    "runTestCases": true,
    "reverseCases": true,
    "document": false,
    "require": false,
    "window": false,
    "fetch": false,
    "FormData": false
  },
  "rules": {
    "callback-return": ["warn"],
    "no-underscore-dangle": ["error", {"allow": ["_doc","_id"]}],

    "no-trailing-spaces": ["error", { "ignoreComments": true }],
    "quote-props": "off",
    "class-methods-use-this": "off",
    "no-undef": "off",
    "indent": ["error", 2],
    "comma-dangle": ["error", "never"],
    "max-len": ["error", 120],
    "import/no-unresolved": "off"
  }
}

// vue.config.js
module.exports = {
  devServer: {
    open: true,
    port: 9000
  },

  configureWebpack: {
    resolve: {
      alias: {
        'app': '@/app',
        'common': '@/common',
        'components': '@/components'
      }
    }
  },

  // Vue-Cli works with webpack
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = './src/app/index.html';
        args[0].favicon = './src/app/favicon.ico';
        return args
      })
  }
};

修改文件目录

image.png

最近工作有点忙，等闲下来的时候更新吧。。。