Vue CLI 的安装和使用element-ui

原创

王秀龙

修改于 2020-06-11 10:07:56

4.2K00

代码可运行

文章被收录于专栏：云开发分享云开发分享

运行总次数：0

代码可运行

工具准备：

首先确保系统包含以下环境：

1.安装Node.js 和 npm

通过 node -v 命令查看本机是否安装，如果没有安装，参考node.js安装指南根据电脑系统环境进行安装，Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

2.安装 Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version    //查看是否安装成功

3.创建一下项目

可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

运行vue ui之后，浏览器打开一个http://localhost:8080 的页面：

然后点击创建选项下，在此创建新项目按钮

在下一步中，项目文件夹输入 vue-web，其它选择默认项

点击下一步，在选择一套预设中，选择手动配置

继续点击下一步，在功能选项下，选则路由Router，去掉js校验

继续点击下一步，然后点击创建项目按钮，选择创建项目，不报存预设

4.运行项目

项目创建成功后，选择任务选项下的serve，然后点击运行按钮，最后点击启动app

运行成功后会看到下面这个界面

也可以进入项目根目录，查看 README.md 文件，通过命令来管理项目

5.安装element-ui

接下来我们安装element-ui组件（https://element.eleme.cn），这样我们就可以快速开发项目

cd vue-web             //进入项目根目录
npm i element-ui -S    //安装element-ui

6.完整引入element-ui

安装成功后，打开vue-web/src/main.js文件，添加以下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

这样我们就可以使用 Element 官网上的组件了

7.运行项目

yarn install    //安装依赖
yarn serve      //运行项目

8.使用element的导航菜单

打开vue-web/src/App.vue文件，添加以下内容

<template>
  <div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" @select="handleSelect">
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/about">About</el-menu-item>
    </el-menu>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '/'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

这个时候打开页面如下图，就说明已经成功使用 Element 了