Upgrade vuE-CLI2 to vue-cli3

Uninstall vUE -cli old version
npm uninstall vue-cli -g
Install the new version
npm install -g @vue/cli
# check version
npm vue -V
Copy the code

Create a project

vue create newproject
Copy the code

Next is the children to do multiple choice questions

  • Select Automatic Configuration

  • Select the initialization dependency package you want to introduce. Git-bash (expressionless) : git-bash (expressionless) : git-bash (expressionless) You can also create it using vscode’s terminal.

  • Whether to use the history mode for routing. No.

  • Pre-compiled CSS syntax to choose, because I’m using elementUI, sass

  • Code style specification for the project, personal habit, I used ESlint + Prettier

  • Automatically detects code compliance when saved or formats code when submitted

  • I choose to save the configuration file in package.json

  • Do you want to save all of the Settings above? The next time you create a project, you will default to these options. No.

The directory structure

. │. Gitignore <! -- git ignores configuration files --> │ babel.config.js <! --> package lock.json <! Json <! --> │ package.json <! --> readme.md <! --> readme.md <! --> │ ├─ Node_modules <! ├─ Public <! Favicon. ico <! Favicon. ico <! Favicon. ico <! --> │ ├ ─ index. HTML <! -- Set some meta headers for the project to be used to mount vUE nodes. -- > │ └ ─ SRC <! Store project source code and resource files that need to be referenced. -- > │ App. Vue <! --> root component --> │ main.js <! │ ├ ─ router.js <! --> 0 files --> 0 files --> 0 files <! --> │ ├─ Assets <! │ ├─ Components <! PNG │ ├─ Components <! ├ ─ garbage <! -- page --> about.vue home.vueCopy the code

Simply integrate vue-admin-template into the project

After the above steps, congratulations, your vuecli3 project has been preliminarily built ~~ Spread flowers ~~ Vue-admin-template is redundant for me, so I selectively integrated the places I used into the project, I will not explain in detail oh, Pick up the integration of a little difficult places to talk about. Put the project git address, if you need it, you can clone it to see the integration effect.

  • A responsive background management system based on Vuecli3 and vuE-admin-Template transformation

Create your own ESlint configuration file

The problem with the code style specification can be modified according to your own habits or the code specification developed jointly by the company. Delete the eslintConfig configuration information in package.json and create the.eslintrc.js file in the root directory to customize the code specification. Here’s my usual spec configuration:

module.exports = {
  root: true.parserOptions: {
    parser: 'babel-eslint'.sourceType: 'module'
  },
  env: {
    browser: true.node: true.es6: true,},extends: ['plugin:vue/recommended'.'eslint:recommended'].// add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10."multiline": {
        "max": 1."allowFirstLine": false}}]."vue/singleline-html-element-content-newline": "off"."vue/multiline-html-element-content-newline":"off"."vue/name-property-casing": ["error"."PascalCase"]."vue/no-v-html": "off".'accessor-pairs': 2.'arrow-spacing': [2, {
      'before': true.'after': true}].'block-spacing': [2.'always'].'brace-style': [2.'1tbs', {
      'allowSingleLine': true}].'camelcase': [0, {
      'properties': 'always'}].'comma-dangle': [2.'never'].'comma-spacing': [2, {
      'before': false.'after': true}].'comma-style': [2.'last'].'constructor-super': 2.'curly': [2.'multi-line'].'dot-location': [2.'property'].'eol-last': 2.'eqeqeq': ["error"."always", {"null": "ignore"}].'generator-star-spacing': [2, {
      'before': true.'after': true}].'handle-callback-err': [2.'^(err|error)$'].'indent': [2.2, {
      'SwitchCase': 1}].'jsx-quotes': [2.'prefer-single'].'key-spacing': [2, {
      'beforeColon': false.'afterColon': true}].'keyword-spacing': [2, {
      'before': true.'after': true}].'new-cap': [2, {
      'newIsCap': true.'capIsNew': false}].'new-parens': 2.'no-array-constructor': 2.'no-caller': 2.'no-console': 'off'.'no-class-assign': 2.'no-cond-assign': 2.'no-const-assign': 2.'no-control-regex': 0.'no-delete-var': 2.'no-dupe-args': 2.'no-dupe-class-members': 2.'no-dupe-keys': 2.'no-duplicate-case': 2.'no-empty-character-class': 2.'no-empty-pattern': 2.'no-eval': 2.'no-ex-assign': 2.'no-extend-native': 2.'no-extra-bind': 2.'no-extra-boolean-cast': 2.'no-extra-parens': [2.'functions'].'no-fallthrough': 2.'no-floating-decimal': 2.'no-func-assign': 2.'no-implied-eval': 2.'no-inner-declarations': [2.'functions'].'no-invalid-regexp': 2.'no-irregular-whitespace': 2.'no-iterator': 2.'no-label-var': 2.'no-labels': [2, {
      'allowLoop': false.'allowSwitch': false}].'no-lone-blocks': 2.'no-mixed-spaces-and-tabs': 2.'no-multi-spaces': 2.'no-multi-str': 2.'no-multiple-empty-lines': [2, {
      'max': 1}].'no-native-reassign': 2.'no-negated-in-lhs': 2.'no-new-object': 2.'no-new-require': 2.'no-new-symbol': 2.'no-new-wrappers': 2.'no-obj-calls': 2.'no-octal': 2.'no-octal-escape': 2.'no-path-concat': 2.'no-proto': 2.'no-redeclare': 2.'no-regex-spaces': 2.'no-return-assign': [2.'except-parens'].'no-self-assign': 2.'no-self-compare': 2.'no-sequences': 2.'no-shadow-restricted-names': 2.'no-spaced-func': 2.'no-sparse-arrays': 2.'no-this-before-super': 2.'no-throw-literal': 2.'no-trailing-spaces': 2.'no-undef': 2.'no-undef-init': 2.'no-unexpected-multiline': 2.'no-unmodified-loop-condition': 2.'no-unneeded-ternary': [2, {
      'defaultAssignment': false}].'no-unreachable': 2.'no-unsafe-finally': 2.'no-unused-vars': [2, {
      'vars': 'all'.'args': 'none'}].'no-useless-call': 2.'no-useless-computed-key': 2.'no-useless-constructor': 2.'no-useless-escape': 0.'no-whitespace-before-property': 2.'no-with': 2.'one-var': [2, {
      'initialized': 'never'}].'operator-linebreak': [2.'after', {
      'overrides': {
        '? ': 'before'.':': 'before'}}].'padded-blocks': [2.'never'].'quotes': [2.'single', {
      'avoidEscape': true.'allowTemplateLiterals': true}].'semi': [2.'never'].'semi-spacing': [2, {
      'before': false.'after': true}].'space-before-blocks': [2.'always'].'space-before-function-paren': [2.'never'].'space-in-parens': [2.'never'].'space-infix-ops': 2.'space-unary-ops': [2, {
      'words': true.'nonwords': false}].'spaced-comment': [2.'always', {
      'markers': ['global'.'globals'.'eslint'.'eslint-disable'.'*package'.'! '.', ']}],'template-curly-spacing': [2.'never'].'use-isnan': 2.'valid-typeof': 2.'wrap-iife': [2.'any'].'yield-star-spacing': [2.'both'].'yoda': [2.'never'].'prefer-const': 2.'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0.'object-curly-spacing': [2.'always', {
      objectsInObjects: false}].'array-bracket-spacing': [2.'never']}}Copy the code

Use SVG in your project

Importing the ICONS folder into the project:

Introducing SVG components

Configure something in the configuration file so that your project can use SVG.

Create vue.config.js in the root directory:

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  assetsDir: 'assets'.// Static resources folder
  devServer: {
    port: 9533 / / the port number
  },
  chainWebpack: config= > {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'}}})Copy the code

Copy items from vue-admin-template selectively to your project as needed

Importing dependencies in the entry file
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import 'element-ui/lib/theme-chalk/index.css'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import '@/styles/index.scss' // global css
import 'element-ui/lib/theme-chalk/index.css'
import '@/icons' // icon

Vue.config.productionTip = false
Vue.use(ElementUI, {
  locale
})

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code