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中键盘事件用法实例分析
Jan 30 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vuex 的简单使用
Mar 22 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 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
一个目录遍历函数
2006/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
利用Python优雅的登录校园网
2020/10/21 Python
基于Python实现天天酷跑功能
2021/01/06 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
给同事的道歉信
2014/01/11 职场文书
公益活动邀请函
2014/02/05 职场文书
2014年统战工作总结
2014/12/09 职场文书
技术负责人岗位职责
2015/02/10 职场文书
中学生自我评价2015
2015/03/03 职场文书
综合素质评价自我评价
2015/03/06 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
党内外群众意见范文
2015/06/02 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android