Element UI学习记录

先有后优07

已于 2022-03-25 20:44:27 修改

阅读量276

点赞数

文章标签： elementui vue.js

于 2022-03-23 13:43:43 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42750982/article/details/123683639

版权

假设已经安装好node.js和npm包管理器，如果没有安装可自行查阅node.js安装详细步骤教程

我们可以使用cnpm install -g @vue/cli或yarn global add @vue/cli来安装新版本的脚手架。安装完成之后，我们可以vue --version或vue -V命令来查看我们安装的版本。
新版脚手架安装完成之后，我们要检查一下webpack是否已经安装，如果没有安装，我们要使用cnpm install webpack -g命令来安装webpack。
在电脑合适的位置创建文件夹用来存放你的vue工程，比如我在D盘创建了一个vueProjects的文件夹。然后在该路径下打开命令行窗口:
输入vue create 项目名称命令来创建我们的项目，比如这里我要创建一个名为vue-test的项目。输入vue create vue-test命令之后，窗口会提示我们是否要安装一些默认组件，我们这里不需要默认安装，选择第三个【Manually select features】，可以进行自定义选择要安装的组件，通过空格键选择或者取消要安装的组件，然后回车继续下面的选项，比如这里我只安装了Router组件：

点击回车，后面还有几项选择，可以参考我的选择一步步来：出现下面的黄框提示，说明所有的项目文件下载完毕：然后输入npm run serve命令启动我们的项目，在浏览器中输入本地地址http://localhost:8080/，就可以看到我们用vue-cli创建的项目了。

Element UI:一套为传统桌面准备的基于Vue.js的前端组件库，这里附上element ui官网地址；
安装环境，需要安装Node.js环境，可自行查阅资料，这里不做赘述，安装Vue.js脚手架等工具（参照一安装Vue脚手架并使用脚手架创建项目）即可；
在上面依靠vue-cli脚手架创建好的vue-test项目（或者用idea、webstorm等工具创建,在项目终端输入：vue create 项目名称命令即可）目录下，或者在任何vue项目的目录下，推荐使用npm安装Element UI，它能更好地和webpack打包工具配合使用，命令如下：
```
npm i element-ui -S
```
安装完成后，在package.json文件中就可以看到以下依赖：
在项目中测试（使用），在main.js加入以下内容来引入Element UI：
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI)
```
项目中的展示如下：

修改HomeView.vue中<div></div>的内容为:
```
    <el-row>
      <el-button type="success" plain>成功按钮</el-button>
    </el-row>
```
可以参照官网给出的组件一一尝试最后，运行看看效果，即可看到测试的button按钮。