Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。
中文文档:http://element-cn.eleme.io/#/zh-CN
github地址:https://github.com/ElemeFE/element
1、安装node
前端开发框架和环境都是需要 Node.js ,先安装node.js开发环境;
vue的运行是要依赖于node的npm的管理工具来实现;
下载https://nodejs.org/en/download/,安装完成之后,打开cmd开始输入命令;
2、查看node的版本号
下载好node之后,以管理员身份打开cmd管理工具,输入 node -v ,回车,查看node版本号,出现版本号,则说明安装成功;
3、安装淘宝npm镜像
由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue;
淘宝的cnpm命令管理工具可以代替默认的npm管理工具;
4、安装全局vue-cli脚手架
淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架;
输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令行输入vue,出来vue的信息,则说明安装成功;
5、开始进入主题,初始化一个vue项目
在E盘里面新建一个项目,先用E:的命令,回车键进入E盘;
回车键默认创建项目信息;
出现这样的提示,初始化成功
运行初始化demo,进入项目cd vue3-elementui
输入命令npm run dev;
弹出访问地址,如果没有问题则进行安装elementUI;
准备好好之后,开始引入饿了么elementUI组件。
6、安装 elementUI
快捷键ctrl+c,终止批处理操作吗(Y/N),再输入命令npm i element-ui -S
elementui安装完成,输入命令npm run dev,项目可以正常运行;
7、在components文件夹下面创建test.vue文件,复制一段elementUI官方文档的代码,进行测试
8、在App.vue中引入test.vue
9、打开main.js,加入element-ui的js和css
注意:element-ui的css是需要单独引入的
10、再次运行,组件中的效果如下:
输入命令:npm run dev