vue + yarn 项目开发 (一)
1.打开src文件夹中的main.js文件,添加引用element ui框架
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
<template>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
import Vue from 'vue'
import Router from 'vue-router'
import eletable from '../views/eletable.vue' Vue.use(Router) export default new Router({
routes: [
{
path: '/eletable',
name: 'eletable',
component: eletable
}
]
})
5.页面效果
vue + yarn 项目开发 (一)的更多相关文章
- Vue.之.项目开发工具选用
Vue.之.项目开发工具选用 上篇文章记录了创建项目,这篇文件记录,如何对创建的项目进行开发.这里选择一个工具:Visual Studio Code (请自行下载安装) 1. 打开VSCode工具,并 ...
- Vue 实战项目开发流程
一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...
- 第四篇:Vue的项目开发
安装Vue的脚手架cli环境 1)官网下载并安装node,附带npm https://nodejs.org/zh-cn/ node环境: 可以解释执行js语言 提供了npm应用商城,可以为node环境 ...
- Vue.js 项目开发学习路线图
1. 思维导图 源文件:Vue路线图.xmind 参考文献 [1]. VueJs2.0建议学习路线 - lavyun - 博客园 [2]. Vue学习路线图 - 个人文章 - SegmentFault ...
- vue.js项目开发实战笔记001——准备工作
1,Vue.js 是一套构建用户界面的渐进式框架. 2,Vue.js 是由尤雨溪开发出的,最早发布于2014年2月. 3,引用vue.js地址一CDN: <script src="ht ...
- 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- vscode下面开发vue.js项目
vscode下面开发vue.js项目 https://blog.csdn.net/linzhiqiang0316/article/details/79176651 vscode下面开发vue.js ...
- 基于Vue的WebApp项目开发(六)
实现商品购买列表页面 步骤一:新建goodslist.vue文件 <template> <div id="tml"> <!--利用mui中的图文表格组 ...
- 基于Vue的WebApp项目开发(二)
利用webpack解析和打包.vue组件页面 相关知识: vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于webpack的vue-loader才能运行,所以 ...
随机推荐
- 访问控制 RAM(Resource Access Management),知识点
资料 网址 什么是访问控制 https://help.aliyun.com/document_detail/28672.html?spm=5176.11065259.1996646101.search ...
- swiper使用总结-坑点汇总
1.开发中遇到个坑,ScrollableTabView(选项卡)+swiper(轮播图)在安卓下,初始化的第一页不会渲染,需要在ScrollableTabView挂载完毕后再渲染swiper. 解决方 ...
- mysql命令查询语句&MTdata
1.单表查询 select * from student; 采用*效率低,不推荐,多用列名 一.单表查询的语法: SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY ...
- Linux下进程间通信方式——pipe(管道)
每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程A把数据从用户空间拷到内核缓冲区,进程B再从内核缓冲区把 ...
- PATA1025PAT Ranking
需要注意的就是sort函数的应用,还有自己比较函数cmp的编写 在一个就是结构体的设计,排序时的考室内的排序,数组下标的处理 参考代码: #define _CRT_SECURE_NO_WARNINGS ...
- quick 中 "我的项目" 中的列表从那里来的?
quick 中 "我的项目" 中的列表从那里来的? 1. WelcomeScene.lua 场景 self:createOpenRecents(cc.player.settings ...
- bzoj2839 集合计数 组合计数 容斥原理|题解
集合计数 题目描述 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得它们的交集的元素个数为K,求取法的方案数,答案模1000000007.(是 ...
- Spring Boot 2.2.2 发布,新增 2 个新特性!
Spring Boot 2.2.2 发布咯! Spring Boot 2.2.1 发布,一个有点坑的版本! 2.2.1 发布没过一个月,2.2.2 就来了. Maven依赖给大家奉上: <dep ...
- c# word 插入图片问题
情景描述: 在之前文本框中加标签,代码直接addPicture出现了意外.不起作用,怀疑是文档模板的问题,因为生成的PDF和word格式总时不时有差异,左右捣鼓下,更换文本框,更换图片形式,形状形式, ...
- Docker 一步搞定 ZooKeeper 集群的搭建
Docker 一步搞定 ZooKeeper 集群的搭建 背景 原来学习 ZK 时, 我是在本地搭建的伪集群, 虽然说使用起来没有什么问题, 但是总感觉部署起来有点麻烦. 刚好我发现了 ZK 已经有了 ...