vue用webpack打包方式新建项目,注意刚开始可以先关闭路由和代码错误检测功能

1.建立了一个Hi.vue的组件

<template>
<div>Hi~~{{msg}}--{{data}}</div>
</template> <script>
export default {
name: "Hi",
data:function(){
return {
msg:'wo 返回的值',
data:'时间'
}
}
}
</script> <style scoped> </style>

App.vue里面加载组件

最后首页也显示:

相关:https://www.cnblogs.com/fps2tao/p/9377652.html

vue组件调用(用npm安装)的更多相关文章

  1. 手把手教你封装 Vue 组件并使用 NPM 发布

    Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import.require 或者直接使用 script 标签的形式引入,就像这样: ps: 这里注意一下包的名 ...

  2. 基于vue组件,发布npm包

    亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project n ...

  3. vue开发搭建(npm安装 + vue脚手架安装)

    一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue ...

  4. vue-cli3.0 vue组件发布到npm

    一.创建项目 1.vue create xxx (使用的版本是3.1.0) 2.把src目录名称改为examples 3.新建文件夹packages 用来存放组件 4.比如:新建Button组件 in ...

  5. vue组件调用(全局调用和局部调用)

    当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listB ...

  6. 自定义Vue组件打包、发布到npm以及使用

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...

  7. Vue与 Vue组件部分

    1.Vuex作用?哪种功能场景使用它? 答案:vue框架中状态管理. 场景有:单页面应用中,组件之间的状态.音乐播放. 登录状态.加入购物车 2.解释vuex最常用的两种属性 答案:分别State.G ...

  8. vue 组件发布记录

    好久没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用.好久不用,发现已经忘记环境怎么搭建.翻看以前的组件,才慢慢回想起来,中间还出现些错误.在这记录下开发 ...

  9. 不再手写import - VSCode自动引入Vue组件和Js模块

    :first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...

随机推荐

  1. 前端 fetch 通信

    随着前端异步的发展, XHR 这种耦合方式的书写不利于前端异步的 Promise 回调. 而且,写起来也是很复杂. fetch API 本来是在 SW(ServiceWorkers) 中提出的, 不过 ...

  2. 阻止picker.js插件弹出键盘

    <input id="focus" type="text" value="" placeholder="手机号" ...

  3. Meanshift算法

    [转载自Liqizhou],原文地址 Mean Shift算法,一般是指一个迭代的步骤,即先算出当前点的偏移均值,移动该点到其偏移均值,然后以此为新的起始点,继续移动,直到满足一定的条件结束. 1. ...

  4. C# 怎么获取所有打开的窗体

    FormCollection collection = Application.OpenForms; foreach(Form form in collection){    if(form.Visi ...

  5. 使button的背景色变为半透明的但不影响字体的透明度

    效果如图: 然而做出这样的效果并不顺利, 刚开始的时候代码如下: UIButton *backButton = [UIButton buttonWithType:UIButtonTypeSystem] ...

  6. FaceBook推出的Android图片加载库-Fresco

    FaceBook推出的Android图片加载库-Fresco 原文链接:Introducing Fresco: A new image library for Android 译者 : ZhaoKai ...

  7. echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  8. ZeroClipboard及其原理介绍

    系列教程地址:http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm ZeroClipboard 是国外大神开发的一个用于剪贴板复制 ...

  9. 检测任意日期字符串是否属于当天的java实现方案

    有时候我们会遇到很多形式的日期判断,甚至是并不常见的日期形式,比如20161212之类的日期,下面就此来进行代码是否处于当天的日期校验的代码实现来做一个整理. public static boolea ...

  10. Activiti 流程启动及节点流转源代码分析

    作者:jiankunking 出处:http://blog.csdn.net/jiankunking 本文主要是以activiti-study中的xiaomage.xml流程图为例进行跟踪分析 详细的 ...