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 相关文章推荐
js中的string.format函数代码
Aug 11 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
浅析Ajax语法
Dec 05 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
微信小程序使用npm支持踩坑
Nov 07 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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 adodb分页实现代码
2009/03/19 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
jquery简单体验
2007/01/10 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Numpy数组转置的两种实现方法
2018/04/17 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Python读取实时数据流示例
2019/12/02 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
私有程序集与共享程序集有什么区别
2013/04/05 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
remote接口和home接口主要作用
2013/05/15 面试题
农药学硕士毕业生自荐信
2013/09/25 职场文书
进步之星获奖感言
2014/02/22 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
大学生助学金感谢信
2015/01/21 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
会议新闻稿
2015/07/17 职场文书
执行力心得体会范文
2016/01/11 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书