在开发的过程之中, 我们也经常会使用到很多组件库; vue 常用 ui 组件库:
https://blog.csdn.net/qq_36538012/article/details/82146649
今天具体说一说比较常用的; element ui 框架的按钮组件, 这款由饿了么前端开源的 UI 框架, 一经面世, 就收获大量程序员的芳心. 在 GitHub 上更是高达 29.8k 的 star 早已说明一切. 用于开发 PC 端的页面还是绰绰有余的. 如果说你是用 vue 开发者, 却没用过 element UI, 那你肯定不是合格的 vue 开发者.
官网地址: http://element-cn.eleme.io/#/zh-CN
图片. PNG
1: 安装 node
端开发框架和环境都是需要 Node.JS , 先安装 node.JS 开发环境, vue 的运行是要依赖于 node 的 NPM 的管理工具来实现, 下载 https://nodejs.org/en/, 安装完成之后, 打开 cmd 开始输入命令.(我用的是 win10 系统, 所以需要管理员权限, 右键点击以管理员身份运行 cmd), 不然会出现很多报错.
image
2: 查看 node 的版本号
下载好 node 之后, 以管理员身份打开 cmd 管理工具,, 输入 node -v , 回车, 查看 node 版本号, 出现版本号则说明安装成功.
输入命令: node -v
image
3: 安装淘宝 NPM 镜像
由于 NPM 是国外的, 使用起来比较慢, 我们这里使用淘宝的 cnpm 镜像来安装 vue.
淘宝的 cnpm 命令管理工具可以代替默认的 NPM 管理工具.
输入命令: NPM install -g cnpm --registry=https://registry.npm.taobao.org
image
4: 安装全局 vue-cli 脚手架
淘宝镜像安装成功之后, 我们就可以全局 vue-cli 脚手架, 输入命令: cnpm install --global vue-cli 回车; 验证是否安装成功, 在命令输入 vue, 出来 vue 的信息, 及说明安装成功;
输入命令: cnpm install --global vue-cli
image
5: 开始进入主题, 初始化一个 vue 项目
我这里是在 d 盘里面新建一个项目, 先用 d: 的命令, 回车键进入 d 盘; 回车键默认创建项目信息.
vue init webpack itemname
图片. PNG
出现这样的提示, 初始化成功
图片. PNG
运行初始化 demo, 输入命令 NPM run dev; 运行一下初始后的 demo, 弹出访问地址, 如果没有问题则进行安装 elementUI; 准备好好之后, 开始引入饿了么 elementUI 组件.
6: 安装 elementUI
NPM i element-ui -S
快捷键 ctrl+c, 终止批处理操 作吗 (Y/N), 在输入命令 NPM i element-ui -S
图片. PNG
注意: 安装过程中出现这样的 bug 的时候, 需要解决
图片. PNG
解决办法: 尝试 删除项目中的 package-lock.JSON 文件 和 node_modules 文件夹, 然后再尝试 NPM install.
成功安装组件显示如下
图片. PNG
7: 在 components 文件夹下面创建 test.vue 文件, 复制一段 elementUI 官方文档的代码, 进行测试
图片. PNG
- <template>
- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
- <el-menu-item index="1"> 处理中心 </el-menu-item>
- <el-submenu index="2">
- <template slot="title"> 我的工作台 </template>
- <el-menu-item index="2-1"> 选项 1</el-menu-item>
- <el-menu-item index="2-2"> 选项 2</el-menu-item>
- <el-menu-item index="2-3"> 选项 3</el-menu-item>
- </el-submenu>
- <el-menu-item index="3">
- <a href="https://www.ele.me" target="_blank"> 订单管理 </a>
- </el-menu-item>
- </el-menu>
- </template>
- <script>
- export default {
- data() {
- return {
- activeIndex: '1',
- activeIndex2: '1'
- };
- },
- methods: {
- handleSelect(key, keyPath) {
- console.log(key, keyPath);
- }
- }
- }
- </script>
8: 在 App.vue 中引入 test.vue
图片. PNG
- <template>
- <div id="app">
- <img src="./assets/logo.png">
- <router-view/>
- <Test></Test>
- </div>
- </template>
- <script>
- import Test from './components/test.vue'
- export default {
- components:{
- Test,
- },
- name: 'App'
- }
- </script>
- <style>
- #App {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-OS X-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
- margin-top: 60px;
- }
- </style>
9: 打开 main.JS, 加入 element-ui 的 JS 和 CSS
- import ElementUI from 'element-ui' //element-ui 的全部组件
- import 'element-ui/lib/theme-chalk/index.css'//element-ui 的 CSS
- Vue.use(ElementUI) // 使用 elementUI
10: 再次运行, 组件中的效果如下:
输入命令:
NPM run dev
图片. PNG
来源: http://www.jianshu.com/p/094eccb84267