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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
vue实现折线图 可按时间查询
Aug 21 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
python 写一个文件分发小程序
2020/12/05 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
医院实习介绍信
2014/01/12 职场文书
一份创业计划书范文
2014/02/08 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
项目合作协议书
2014/09/23 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
飞屋环游记观后感
2015/06/08 职场文书
小学生暑假生活总结
2015/07/13 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android