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 事件系统
Jul 22 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
angular.bind使用心得
Oct 26 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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
简单采集了yahoo的一些数据
2007/02/14 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
pycharm安装图文教程
2017/05/02 Python
详解python中的线程
2018/02/10 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Python内存读写操作示例
2018/07/18 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
产品包装策划方案
2014/05/18 职场文书
政风行风评议心得体会
2014/10/21 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书