Introduction of element UI in vue

Element UI official website:

To install element UI:

Mode 1 npm:

Execute after entering the project root directory

cnpm  i  element-ui -S

Mode 2: CDN

<! -- import style -- > < link rel = "stylesheet" href = "" >

<! -- import component library -- > < script SRC = "" >

Using vue

npm i -g vue-cli

mkdir my-project &&

cd my-project

vue init webpack

npm i && npm i element-ui

Introducing element into vue

Complete introduction

Write the following in main.js:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'


new Vue({
  el: '#app',
  render: h => h(App)

Problems found in introduction

Then error is reported during operation:

ERROR Failed to compile with 1 errors 09:10:39

This dependency was not found:

element-ui/lib/theme-default/index.css in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue

To install it, you can run: npm install –save element-ui/lib/theme-default/index.css

It's too hard for a novice who has just started vue. Fortunately, a solution has been found. It turns out that the ElementUI in this version, index.css, is no longer in theme default, but in theme chalk

 import 'element-ui/lib/theme-default/index.css'
  • 1

Change to

 import 'element-ui/lib/theme-chalk/index.css'
  • 1


Format detection error of vue

Close eslint

This is just the way to close the Vue cli scaffold. In fact, it is very simple to comment out the eslint rules in the build/webpack.base.conf.js configuration file.

Configure test files

configuration parameter

rules: {
    "Rule name": [Regular value, Rule configuration]

Regular values:

"off" or 0 / / close rule
 "warn" or 1 / / as a warning in open rules (does not affect exit code)
"Error" or 2 / / treat the rule as an error (1 when the exit code is triggered)

List of common rules

"no-alert": 0,//Do not use alert confirm prompt
"no-array-constructor": 2,//Array constructor prohibited
"no-bitwise": 0,//Bitwise operators are prohibited
"no-caller": 1,//Prohibit using arguments.caller or
"no-catch-shadow": 2,//Prevent catch clause parameters from having the same name as external scope variables
"no-class-assign": 2,//Prohibit assigning to class
"no-cond-assign": 2,//Prohibit using assignment statements in conditional expressions
"no-console": 2,//Do not use console
"no-const-assign": 2,//Variables declared by const cannot be modified
"no-constant-condition": 2,//Disable constant expression if(true) if(1) in condition
"no-continue": 0,//Do not use continue
"no-control-regex": 2,//Prohibit the use of control characters in regular expressions
"no-debugger": 2,//Disable debugger
"no-delete-var": 2,//You cannot use the delete operator on a var declared variable
"no-div-regex": 1,//Cannot use regular expression / = foo that looks like Division/
"no-dupe-keys": 2,//Key repetition {a:1,a:1} is not allowed when creating object literals
"no-dupe-args": 2,//Function arguments cannot be repeated
"no-duplicate-case": 2,//case labels in switch cannot be duplicate
"no-else-return": 2,//If there is return in the if statement, you cannot follow the else statement
"no-empty": 2,//Content in block statement cannot be empty
"no-empty-character-class": 2,//[] content in regular expression cannot be empty
"no-empty-label": 2,//Do not use empty label
"no-eq-null": 2,//The = = or! = operator is prohibited for null
"no-eval": 1,//No eval
"no-ex-assign": 2,//Forbid the assignment of exception parameter in catch statement
"no-extend-native": 2,//Disable extending native objects
"no-extra-bind": 2,//Disable unnecessary function binding
"no-extra-boolean-cast": 2,//Disable unnecessary bool conversion
"no-extra-parens": 2,//Do not allow unnecessary brackets
"no-extra-semi": 2,//No extra colons
"no-fallthrough": 1,//Disable switch penetration
"no-floating-decimal": 2,//It is forbidden to omit 0.53 in floating-point numbers
"no-func-assign": 2,//Prohibit duplicate function declaration
"no-implicit-coercion": 1,//Disable implicit conversion
"no-implied-eval": 2,//Do not use implicit eval
"no-inline-comments": 0,//Prohibit in line remarks
"no-inner-declarations": [2, "functions"],//Prohibit the use of declarations (variables or functions) in block statements
"no-invalid-regexp": 2,//Suppress invalid regular expressions
"no-invalid-this": 2,//Invalid this is forbidden. It can only be used in constructors, classes, and object literals
"no-irregular-whitespace": 2,//Can't have irregular spaces
"no-iterator": 2,//Disable use of the iterator property
"no-label-var": 2,//The label name cannot be the same as the variable name declared by var
"no-labels": 2,//Prohibited label declaration
"no-lone-blocks": 2,//Suppress unnecessary nested blocks
"no-lonely-if": 2,//Disable if statement in else statement
"no-loop-func": 1,//Prohibit the use of functions in loops (if no reference to external variables does not form closures)
"no-mixed-requires": [0, false],//Declaration type cannot be mixed when declaring
"no-mixed-spaces-and-tabs": [2, false],//Do not mix tab s and spaces
"linebreak-style": [0, "windows"],//Line changing style
"no-multi-spaces": 1,//Can't use extra space
"no-multi-str": 2,//String cannot wrap with
"no-multiple-empty-lines": [1, {"max": 2}],//No more than 2 blank lines
"no-native-reassign": 2,//Cannot override native object
"no-negated-in-lhs": 2,//The left side of the in operator cannot have!
"no-nested-ternary": 0,//Do not use nested binomial operations
"no-new": 1,//Do not assign after using new to construct an instance
"no-new-func": 1,//Do not use new Function
"no-new-object": 2,//Do not use new Object()
"no-new-require": 2,//Do not use new require
"no-new-wrappers": 2,//Do not use new to create a wrapper instance, new String new Boolean new Number
"no-obj-calls": 2,//You cannot call built-in global objects, such as Math() JSON()
"no-octal": 2,//Octal numbers are not allowed
"no-octal-escape": 2,//Octal escape sequence prohibited
"no-param-reassign": 2,//Do not reassign parameters
"no-path-concat": 0,//You cannot use dirname or filename for path splicing in node
"no-plusplus": 0,//Do not use + +--
"no-process-env": 0,//Disable process.env
"no-process-exit": 0,//Disable process.exit()
"no-proto": 2,//Disable use of proto attribute
"no-redeclare": 2,//Do not declare variables repeatedly
"no-regex-spaces": 2,//Prohibit multiple spaces / foo bar in regular expression literals/
"no-restricted-modules": 0,//If the specified module is disabled, an error will be reported
"no-return-assign": 1,//The return statement cannot have an assignment expression
"no-script-url": 0,//Disable javascript:void(0)
"no-self-compare": 2,//Can't compare themselves
"no-sequences": 0,//Comma operator prohibited
"no-shadow": 2,//A variable in an external scope cannot have the same name as a variable or parameter in the scope it contains
"no-shadow-restricted-names": 2,//The restriction identifier specified in strict mode cannot be used as the variable name when declaring
"no-spaced-func": 2,//There can be no space between function name and () when a function is called
"no-sparse-arrays": 2,//Disallow sparse array, [1,, 2]
"no-sync": 0,//nodejs disable synchronization method
"no-ternary": 0,//Disallow the use of binocular operators
"no-trailing-spaces": 1,//No spaces after the end of a line
"no-this-before-super": 0,//this or super cannot be used until super() is called
"no-throw-literal": 2,//Do not throw literal error throw“error";
"no-undef": 1,//Cannot have undefined variables
"no-undef-init": 2,//Variable initialization cannot be assigned to undefined directly
"no-undefined": 2,//Cannot use undefined
"no-unexpected-multiline": 2,//Avoid multiline expressions
"no-underscore-dangle": 1,//Identifier cannot begin or end with
"no-unneeded-ternary": 2,//Unnecessary nesting of VaR isyes = answer = = = 1? True: false;
"no-unreachable": 2,//Can't have code that can't be executed
"no-unused-expressions": 2,//Disable useless expressions
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//Cannot have variables or parameters that are not used after declaration
"no-use-before-define": 2,//Cannot be used before it is defined
"no-useless-call": 2,//Do not call or apply unnecessarily
"no-void": 2,//Disable void operator
"no-var": 0,//Disable var and replace with let and const
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//No warning remarks
"no-with": 2,//Disable with

"array-bracket-spacing": [2, "never"],//Allow extra space in non empty array
"arrow-parens": 0,//Arrow functions are enclosed in parentheses
"arrow-spacing": 0,//=>Parentheses before / after
"accessor-pairs": 0,//Using getter/setter in objects
"block-scoped-var": 0,//Using var in block statements
"brace-style": [1, "1tbs"],//Brace style
"callback-return": 1,//Avoid calling callbacks more than once
"camelcase": 2,//Mandatory hump naming
"comma-dangle": [2, "never"],//The end of an object literal measure cannot have a comma
"comma-spacing": 0,//Space before and after comma
"comma-style": [2, "last"],//Comma style, at the beginning or the end of a line
"complexity": [0, 11],//Cycle complexity
"computed-property-spacing": [0, "never"],//Whether to allow the calculated key name or not
"consistent-return": 0,//Allow to omit after return
"consistent-this": [2, "that"],//this alias
"constructor-super": 0,//Non derived classes cannot call super, derived classes must call super
"curly": [2, "all"],//You must use {} in if() {}
"default-case": 2,//switch statement must have default at the end
"dot-location": 0,//The position of the object accessor, at the beginning or the end of the line when wrapping
"dot-notation": [0, { "allowKeywords": true }],//Avoid unnecessary square brackets
"eol-last": 0,//File ends with a single line break
"eqeqeq": 2,//Must use full class
"func-names": 0,//Function expression must have a name
"func-style": [0, "declaration"],//Function style, only function declaration / function expression can be used
"generator-star-spacing": 0,//Space before and after generator function *
"guard-for-in": 0,//for in loop to be filtered with if statement
"handle-callback-err": 0,//nodejs processing error
"id-length": 0,//Variable name length
"indent": [2, 4],//Indent style
"init-declarations": 0,//Initial value must be assigned when declaring
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//Spaces before and after colons in object literals
"lines-around-comment": 0,//Comments before / after line
"max-depth": [0, 4],//Nested block depth
"max-len": [0, 80, 4],//Maximum string length
"max-nested-callbacks": [0, 2],//Callback nesting depth
"max-params": [0, 3],//A function can have at most three arguments
"max-statements": [0, 10],//There are at most a few declarations in a function
"new-cap": 2,//The function name must be called in new mode in upper case and in lower case without new mode in the first line
"new-parens": 2,//new must be parenthesized
"newline-after-var": 2,//Need a blank line after variable declaration
"object-curly-spacing": [0, "never"],//Allow unnecessary spaces in braces
"object-shorthand": 0,//Forced object literal abbreviation syntax
"one-var": 1,//declaration of continuity
"operator-assignment": [0, "always"],//Assignment operator + = - = what's
"operator-linebreak": [2, "after"],//Is the operator at the end of a line or at the beginning of a line when wrapping
"padded-blocks": 0,//Whether the first and last line of a block statement should be empty
"prefer-const": 0,//Preferred const
"prefer-spread": 0,//Preferred expansion operation
"prefer-reflect": 0,//Preferred method of reflection
"quotes": [1, "single"],//Quote type ` ` '' '
"quote-props":[2, "always"],//Whether attribute names in object literals force double quotes
"radix": 2,//parseInt must specify a second parameter
"id-match": 0,//Naming detection
"require-yield": 0,//Generator function must have yield
"semi": [2, "always"],//Statement force semicolon to end
"semi-spacing": [0, {"before": false, "after": true}],//Space before and after semicolon
"sort-vars": 0,//Sort on variable declaration
"space-after-keywords": [0, "always"],//Do you want to leave a space after the keyword
"space-before-blocks": [0, "always"],//Do you want a space in front of the block {that does not start with a new line
"space-before-function-paren": [0, "always"],//Do you want spaces before parentheses when defining functions
"space-in-parens": [0, "never"],//Do you want spaces in parentheses
"space-infix-ops": 0,//Do you want spaces around infix operators
"space-return-throw-case": 2,//return throw case. Do you want a space after it
"space-unary-ops": [0, { "words": true, "nonwords": false }],//Do you want spaces before / after unary operators
"spaced-comment": 0,//Should there be any spaces or something in the annotation style
"strict": 2,//Use strict mode
"use-isnan": 2,//NaN is prohibited for comparison, only isNaN()
"valid-jsdoc": 0,//jsdoc rules
"valid-typeof": 2,//Legal typeof value must be used
"vars-on-top": 2,//var must be at the top of the scope
"wrap-iife": [2, "inside"],//Bracket style for immediate function expression execution
"wrap-regex": 0,//Regular expression literals enclosed in parentheses
"yoda": [2, "never"]//Prohibited Yoda conditions

Tags: Vue npm Webpack Attribute

Posted on Tue, 07 Apr 2020 10:30:35 -0700 by ubaldc36