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,启动项目

Vue入门（二）——Demo的更多相关文章

  1. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

  2. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. 【原创】NIO框架入门(二)：服务端基于MINA2的UDP双向通信Demo演示

    前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...

  4. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...

  5. Vue入门（二）之数据绑定

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  6. webpack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  7. vue入门 0 小demo (挂载点、模板、实例)

    vue入门 0 小demo  (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...

  8. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  9. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  10. Vue入门系列（四）之Vue事件处理

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

随机推荐

  1. 数据库基础知识介绍（MySQL）

    一.什么是数据库 1.数据库概念:数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API接口用于创建,访问,管理,搜索和复制所保存的数据. 2.RD ...

  2. 39.创建多进程及进程通讯 -- Queue--Pipe--Event

    创建多进程 windows:进程.线程 linux:进程.线程(做了进程通信的多进程实现的线程) 进程之间内存彼此独立,不管是父子进程还是单个独立进程 multiprocessing:Process ...

  3. 局部内部类的final问题

    局部内部类,如果希望访问所在方法的局部变量,那么这个局部变量就必须是final的(或者只赋值一次) 从Java8开始,只要局部变量事实不变那么final关键字可以省略 为什么需要保证变量为final, ...

  4. rownum伪行号-排行榜-分页

    rownum伪行号-排行榜-分页 1.rownum 是oracle数据库特有的一个特性,它针对每一个查询(包括子查询),都会生成一个rownum用于对该次查询进行编号 2.每个rownum只针对当前s ...

  5. Mybatis 批量操作以及多参数操作遇到的坑

    查考地址:https://blog.csdn.net/shengtianbanzi_/article/details/80147134 待整理中......

  6. python 自动化测试

    安装selenium 安装命令: pip install selenium 测试 打开一款Python编辑器,默认Python自带的IDLE也行.创建 baidu.py文件,输入以下内容: from ...

  7. django类视图的使用

    1 类视图引入 以函数的方式定义的视图称为函数视图,函数视图便于理解. 但是遇到一个视图对应的路径提供了多种不同HTTP请求方式的支持时,便需要在一个函数中编写不同的业务逻辑,代码可读性与复用性都不佳 ...

  8. nginx浏览器开启密码验证

    如果我们在 nginx 下搭建了一些站点,但是由于站点内容或者流量的关系,我们并不想让所有人都能正常访问,那么我们可以设置访问认证.只有让用户输入正确的用户名和密码才能正常访问.效果如下: 在 ngi ...

  9. 怎样查看 MySQL 版本号

    1. 在命令行中直接查看版本号 mysql -V 2. 在 mysql --help 中查找与版本相关的信息 mysql --help | grep Ver 3. 在mysql命令行里面查看版本信息 ...

  10. ASP.NET Core中间件实现分布式 Session(转载)

    ASP.NET Core中间件实现分布式 Session 1. ASP.NET Core中间件详解 1.1. 中间件原理 1.1.1. 什么是中间件 1.1.2. 中间件执行过程 1.1.3. 中间件 ...