第七节 Vue脚手架之安装ElementUI

亮子 2021-06-09 09:22:43 17950 0 0 0

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官方推荐使用 npm 的方式安装,因为它能更好地和 webpack 打包工具配合使用。具体的安装命令如下:

# npm 安装
npm i element-ui -S

# OR
npm install element-ui --save

执行完上述命令后,在package.json文件中,会增加了element-ui的引用,具体内容如下:

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.13.2",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

但是仅仅引入进来,还不能直接使用,还需要在main.js文件中,引入element-ui才能在各个组件中使用,具体代码如下:

// file:main.js
import Vue from 'vue'
//--1
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App.vue'

//--2
Vue.use(ElementUI)

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