1.在工程目录下创建项目
右键GIT BASH
2.安装lib(建议使用淘宝镜像安装)
3.首页
App.vue
<template> <el-container> <el-menu :default-active="getRouterPath" :router="router" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="ffd04b"> <div class="logo"></div> <div class="title">Selenium平台</div> <div class="space"></div> <el-menu-item index="task">任务管理</el-menu-item> <el-menu-item index="task">测试日志</el-menu-item> <el-menu-item index="task">系统设置</el-menu-item> </el-menu> <el-menu class="main-container"> <keep-alive> <router-view/> </keep-alive> </el-menu> </el-container> </template> <script> export default { name: 'App', data() { return { router: true, }; }, computed: { getRouterPath() { return this.$route.path.replace("/", "") } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
index.html是系统入口，和传统web项目类似
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>seleniumfront</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
由于项目依赖element-ui,vuex,less,得在项目中安装对应的lib,安装成功后在项目的node_modules下能找到对应的文件
（*安装后不代表项目能用，得在package.json文件下配置）
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"css-loader": "^0.28.9",
"element-ui": "^2.0.11",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.1",
"vuex": "^3.0.1"
},
最后在main.js文件中配置引用
import Vue from 'vue' import App from './App' import Vuex from 'vuex' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import './assets/css/main.less' Vue.config.productionTip = false Vue.use(ElementUI) Vue.use(Vuex) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
最后，执行npm run dev,启动项目