Detailed explanation of partial introduction components with Vue + Elementui

Vue.js’s UI component library, there are multiple items on Git, and I have more users who have IVIEW and ELEMENT. Two component libraries, Components are rich.

iView: a set of high quality UI component libraries based on Vue.js

    Element, a set of development Vue 2.0-based component libraries prepared by designers and product managers, providing a set of design resources to help your site rapidly.
  • The two have advantages and disadvantages, not many comments, according to their own needs, I used Element. Because the company has developed a small background project, consider the component introduced Element component, because the first time introduced with no experience, there is a lot of problems in the Internet, and the personal feeling of the official website does not tell me (maybe I have a little low level), so I have studied the intimate effectiveness. If there is any error, I will point out.

1, Mount Vue-Cli


npm install -g Vue- CLI

2, creating a project ProjectName is your project name
   
NPM INSTALL WebPack ProjectName


3, enter the project catalog

   Cd ProjectName 


4, initialization project installation dependencies

 NPM INSTALL   5, install ELEMENTUI 

NPM INSTALL Element-Ui –Save -dev

6, first determine if the item is STYLE-Loader and Babel-plugin-Component if there is no NPM
   
npm install xxx –save -dev


7, simple crude styling, found. Babelrc removes all the original file content, paste the following code

 {"Presets":[["", {"Modules": false, "targets": {"browsers": ["> 1%", "Last 2 Versions" "NOT IE   
8, in WebPack.Base.conf.js Add to


{Test: /\.css $/, loader: ‘style-loader’},
 9, introduced in mian.js   
Import {Button, Input} from ‘Element-Ui’ Vue.use (Button) Vue.use (Input)


10 , Then you can use buttonAnd INPUT
  <= 8"]}
    }],
    "stage-2"],
  "plugins": [
     "transform-runtime",
     ["component",[
     {
     "libraryName":"element-ui",
     "styleLibraryName":"theme-default" //1.4的老项目用这个,2.0的用theme-chalk,假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了
     }
     ]]
     ],
  "comments":false,   
  "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
  }
 } VUE introduces Elementui error 
Introduced in import ‘element-ui / lib / theme-default / index.css’ in main.js, Unable to start the project, this is changed to the WebPack inside package.json: “beta”

, reinstall, this can start

summary
  The above is the full content of this article. I hope this paper has a certain reference value for everyone's learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud .  
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment