Vue脚手架的简单使用实例


Posted in Javascript onJuly 10, 2018

提前申明

注意:自己对vue脚手架的理解和认识,很多东西和理解都是形象上的手法,并不专业和官方

webpack

一种项目构建工具,可以将css和js压缩成一个文件。此外,可以提供测试用服务器。使用webpack时,可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用

导入和导出

使用export命令可以将一个JS对象导出,其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用,但是在导入时,必须知道导入导出对象的名字。如果使用export default命令导出对象的话,其他JS文件在导入时就无需知道导出对象的名字,可以自定义对象名

ps:exportimport为es6规范中的关键字,目前仅被少量JS运行平台实现,在脚手架里会被自动用babel转换成es5对应

语法组件中自定义标签名的大小写问题

在大多数浏览器解析HTML时,不区分标签的大小写。自定义标签中的大写字母会被自动转换为小写字母,如<First></First>会被转换为 first 标签,因此导致与注册时提供的标签名不一致,出现组件未正确注册的错误。

如果使用自定义组件时,代码写在template标签里,在解析时就会被当做JS解析,是区分大小写的。

组件的另外一种写法

<body>

<template id="first-c">
  <!--template以下才是组件的HTML模板,仍然只能有一个根标签-->
  <div>这是我第一个组件</div>
</template>
<div id="app">
  <first></first>
</div>
<script>
  var myTemplate = {
    template:"#first-c"
  }

  Vue.component("first",myTemplate);
  var app = new Vue({
    el:"#app"
  });
</script>
</body>

使用脚手架创建项目安装NodeJS

脚手架的安装及运行均依赖NodeJS,可以在命令行键入node -v来查看是否安装NodeJS。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
微信小程序选择图片控件
Jan 19 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 #Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 #Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 #Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 #Javascript
ng-alain表单使用方式详解
Jul 10 #Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 #Javascript
React之PureComponent的使用作用
Jul 10 #Javascript
You might like
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
php计算税后工资的方法
2015/07/28 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php修改数组键名的方法示例
2017/04/15 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
python中list循环语句用法实例
2014/11/10 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python读写文件基础知识点
2019/06/10 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
三字经教学反思
2014/04/26 职场文书
村抢险救灾方案
2014/05/09 职场文书
物资采购管理制度
2015/08/06 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记