elementui免费教程- UI 之安装使用（npm）

1、安装 node 软件

2、查看安装版本: npm -v

3、配置淘宝镜像:

npm install -g cnpm --registry=

4、安装vue-cli, 命令: cnpm install -g vue-cli 按提示操作,可以直接按确认

5、(这一步我不记得我执行过

_

)然后安装webpack; 命令: npm install -g webpack ;

6.开始自动化构建vue项目,命令: vue init webpack projectName (自定义的项目名称);

最后出现:

可以运行命令,浏览器访问

5、进入都到项目目录,执行命令安装element-ui: npm i element-ui -S

6、安装成功之后,进入项目src目录在中添加(element官网有快速上手):

7、在文件中添加element-ui组件:

8、在运行项目就可以正常显示了,按钮如图。

1:npm 安装

推荐使用 npm 的方式安装,它能更好地和  webpack  打包工具配合使用。

npm i element-ui -S,

2:引入 Element

你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

2.1完整引入

在 中写入以下内容:

import Vue from 'vue'

import App from './'

import ElementUI from 'element-ui';//全局引入

import 'element-ui/lib/theme-chalk/';

= false

//(ElementUI)

(Button)

(Aside)

(Main)

(Container)

new Vue({

render: h => h(App),

}).$mount('#app')

2.2按需引入

借助  babel-plugin-component ,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

在命令行输入

npm install babel-plugin-component -D

然后,将 .babelrc 修改为://等同于 文件

= {

presets: [

'@vue/cli-plugin-babel/preset',

["@babel/preset-env", { "modules": false }]

],

"plugins": [

[

"component",

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]

]

}

2.2.1在配置

import Vue from 'vue'

import App from './'

import {Button,Aside,Main,Container} from 'element-ui';//按需引入 注:Container首字母大写

import 'element-ui/lib/theme-chalk/';

= false

//(ElementUI)

(Button)

(Aside)

(Main)

(Container)

new Vue({

render: h => h(App),

}).$mount('#app')

小菜刚学会element_ui组件使用,如何全局引入库文件太大,开发时浪费资源,希望大神们多指教

一、创建一个vue新项目(cli方式)

|--命令:vue init webpack elementui02

二、通过npm方式安装element-ui

三、项目中引入element

|--两种方式:完整引入和按需引入

|--完整引入:

|--按需引入(借助插件):

|--需要借助babel-plugin-component插件,按照我们需要的组件引入,以达到减小项目的目的。

|--安装:babel-plugin-component

|--修改.babelrc文件:

|--在进行配置:

|--在HelloWorld进行使用:

|--如果引入没有配置的组件:el-dialog

|--完整的组件列表:

|--详见:

/#/zh-CN/component/quickstart

四、全局配置size和zIndex

|--在引入Element时,可以传入一个全局配置对象{size:'small',zIndex:3000}。

|--size:用于改变组件的默认尺寸。

|--zIndex:设置弹窗的出事z-index(默认:2000)。

|--完整引入配置:

|--按需引入配置: