开始项目之前，先了解如何创建项目: http://www.cnblogs.com/pearl07/p/6247389.html

1，项目目录结构（路由是后来建的，将在下一篇使用路由，此处可忽略）。

2，首先完善main.js。

3，在components下 ，新建一个first.vue组件，并实现基本功能（模板、script和样式）

----此处应该先了解vue.js 2.0基本语法  http://cn.vuejs.org/v2/guide/

4,在app.vue中引入并使用自己创建的组件。

5，npm run dev  打开 http://localhost:8080/可看到如下效果。

vue-cli 组件的使用的更多相关文章

  1. 如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  2. 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

    前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

  3. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  4. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  5. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  6. 【1】vue/cli 3.0 脚手架 及cube-ui 安装

    安装 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 检查node版本: $ ...

  7. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  8. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  9. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  10. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

随机推荐

  1. 小米4 miui专用 Xposed安装器86版

    转载自 http://www.52pojie.cn/thread-516435-1-1.html 写在前面:各位用xp受到不同限制,有些机型还找不到框架包,又要刷第三方rec又要谨慎选择框架版本.官方 ...

  2. git 修改注释信息

    1. push 之前 先看看自己提交过多少次,然后执行 git rebase -i HEAD~数字(你要修改你的第几次提交) 接下来执行,修改注释 git commit --amend 修改完注释之后 ...

  3. WEB端实现打印

    首先需要下载一个JQ插件: 地址: http://files.cnblogs.com/files/SabWoF/jq%E6%89%93%E5%8D%B0%E6%8F%92%E4%BB%B6%E5%AE ...

  4. sql 查询当前数据库所有表格以及所有表格数据条数

    select b.name as tablename , a.rowcnt as datacount from sysindexes a , sysobjects b where a.id = b.i ...

  5. python shutil.copy()用法

    shutil.copyfile(src, dst):复制文件内容(不包含元数据)从src到dst. DST必须是完整的目标文件名; 如果src和dst是同一文件,就会引发错误shutil.Error. ...

  6. HTML5教程之html 5 本地数据库（Web Sql Database）

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  7. UWP 判断windows mobile是使用的实体键还是虚拟按键

    最近在写启动屏幕,发现虚拟按钮会挡住,启动屏幕的最下面的元素,大概有50 px.可是有什么办法知道手机是用的实体键还是虚拟按键吗? 如下图.可以看到红色的部分显示了一点点.代码里设置的是60px. 在 ...

  8. 实时控制软件设计作业_01——汽车ABS系统分析

    制动防抱死系统(antilock brake system)简称ABS.作用就是在汽车制动时,自动控制制动器制动力的大小,使车轮不被抱死,处于边滚边滑(滑移率在20%左右)的状态,以保证车轮与地面的附 ...

  9. 【LFS】简易LFS搭建指南

    http://blog.csdn.net/u012333520/article/details/50533002#comments ////////////////////////////////// ...

  10. Qtablevies获取内容

    首先是向tableview中添加内容 model=new QStandardItemModel(); model->setHorizontalHeaderItem(, new QStandard ...