Vue入门(二)——Demo
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的更多相关文章
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- 【原创】NIO框架入门(二):服务端基于MINA2的UDP双向通信Demo演示
前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...
- 一天带你入门到放弃vue.js(二)
接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...
- Vue入门(二)之数据绑定
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- webpack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- vue入门 0 小demo (挂载点、模板、实例)
vue入门 0 小demo (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue入门系列(四)之Vue事件处理
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
随机推荐
- eclipse运行mapreduce的wordcount
1,eclipse安装hadoop插件 插件下载地址:链接: https://pan.baidu.com/s/1U4_6kLFNiKeLsGfO7ahXew 提取码: as9e 下载hadoop-ec ...
- jstack使用
top -p 22072 -H -p:查看某个进程 -H列出所有的线程 printf '%x' 22398 (16进制线程号) sudo -u tomcat jstack 22072 | grep ...
- POJ 3274/洛谷 1360:Gold Balanced Lineup 黄金阵容平衡
题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...
- Reactor系列(十)collectMap集合
#java#reactor#collect#hashMap# 转换成Map 视频讲解: https://www.bilibili.com/video/av80048104/ FluxMonoTestC ...
- nginx源码安装(CentOS版)
准备工作: 1) 配好网易yum源 登录此网站(http://mirrors.163.com/.help/centos.html),下载相应版本的yum源至服务器的/etc/yum.repos.d/目 ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
- Nginx之rewrite四种flag
利用nginx的rewrite命令,可以实现URL的重写,可在nginx配置文件的server.location.if部分使用,对于rewrite有四种不同的flag. redirect:返回302临 ...
- SpreadJS:一款高度类似Excel的开发工具,功能涵盖Excel的 95% 以上
Excel 作为一款深受用户喜爱的电子表格工具,借助其直观的界面.出色的计算性能.数据分析和图表,已经成为数据统计领域不可或缺的软件之一. 基于Excel对数据处理与分析的卓越表现,把Excel的功能 ...
- 【AtCoder】AGC004
AGC004 A - Divide a Cuboid 看哪一维是偶数,答案是0,否则是三个数两两组合相乘中最小的那个 #include <bits/stdc++.h> #define fi ...
- 数据库设计规范、E-R图、模型图
(1)数据库设计的优劣: 糟糕的数据库设计: ①数据冗余冗余.存储空间浪费. ②数据更新和插入异常. ③程序性能差. 良好的数据库设计 ①节省数据的存储空间. ②能够保证数据的完整新. ③方便进行数据 ...