本篇将会着重讲解关于Vue和Element UI 相关的内容
思维导图
![c66b03552fc94b74d87400cadac4b159.png](https://i-blog.csdnimg.cn/blog_migrate/0de069dbed89bfab26de45ecdb521e08.png)
网页版Vue Cli 基本使用
这里使用Vue Cli 进行基本的使用
安装
npm install -g @vue/cli
复制代码
安装的界面如下
PS C:UsersAdministratorDesktop> npm install -g @vue/clinpm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintainednpm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintainednpm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintainednpm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintainednpm WARN deprecated har-validator@5.1.5: this library is no longer supported[..................] / loadDep:sha.js: sill resolveWithNewModule apollo-env@0.6.5 checking installable status
复制代码
![e9b523a4f492039ebf80828f71cae843.png](https://i-blog.csdnimg.cn/blog_migrate/1381989c6ab11bf14ada49e18ab6850d.png)
检查版本是否正确
vue -V
复制代码
![c6a3045275540b7d3c5191dcf8753973.png](https://i-blog.csdnimg.cn/blog_migrate/937b9b997841c6a3e9ef1577e1c81f90.png)
这里安装完成。
打开网页版vue-cli
进入Vue页面
![f7beb0a8b76a1dfab5c417d3c4e02693.png](https://i-blog.csdnimg.cn/blog_migrate/e7dea8945adf0ba9d19c6121dad1f3c9.png)
选择目录
![6522b3d9eefc92f1664875b3ced0b21a.png](https://i-blog.csdnimg.cn/blog_migrate/c1278b32d725796317b27caef666a285.png)
选择预设
![e1cca8750ddd5e8dad1e80291271fe5c.png](https://i-blog.csdnimg.cn/blog_migrate/0d228791a175304a9187d7b6e03e7a30.png)
选择功能
![4e3a27ae3b1ce9744a1064fa1b0e836a.png](https://i-blog.csdnimg.cn/blog_migrate/b40c2aa0f87bd6ed86312e66fe1afc39.png)
创建项目
![e17a7a2fe7cb175968912fedc998c507.png](https://i-blog.csdnimg.cn/blog_migrate/dd339019a790ef8e83d3bb87c7982417.png)
![bd2405d4169fa231bf00ccd9ea4961c1.png](https://i-blog.csdnimg.cn/blog_migrate/c00db7ee59a9a1c98d47f8c4238118e4.png)
项目创建完成
![0bcf88a7272fe6d01bcb614aed46d56a.png](https://i-blog.csdnimg.cn/blog_migrate/7601125ebf6a8bbf0fbae34ac6bfa41b.png)
启动程序并运行
![8bfa2d1c8d3c9b517ff172e8b8e06e9b.png](https://i-blog.csdnimg.cn/blog_migrate/c9df7a92b0c33ed103b8f7b3f7be8f01.png)
![ec1f24c611bbb20ce56828cf11e480c9.png](https://i-blog.csdnimg.cn/blog_migrate/83a0b88ea7fa9e656bd35e92733401ad.png)
安装Element UI
npm i element-ui -S
复制代码
这里就可以看到已经安装完成。
体验Element UI
main.js 如下
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element)Vue.config.productionTip = false new Vue({ router, store, render: h => h(App)}).$mount('#app')
复制代码
about.vue 如下
<template> <div class="about"> <i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> <el-button type="primary" icon="el-icon-search">搜索</el-button> </div></template>
复制代码
router.js 如下
import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'Login', component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue') }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes}) export default router
复制代码
文件目录如下
![2158586dc6c9fd55f240871a03ae6078.png](https://i-blog.csdnimg.cn/blog_migrate/4e5d5890c28c2c22b919e58b9f64d10d.png)
访问效果如下
![eed5bb34865c7b6c5c61218f43dfb807.png](https://i-blog.csdnimg.cn/blog_migrate/fca52b52c01738f23490c035ac69db56.png)
总结
以上简单的完成了一个Element UI 的页面的创建