Vue CLI 的安装和使用element-ui
原创
工具准备：
首先确保系统包含以下环境：
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-ui6.完整引入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 了
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。