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 验证上传图片大小[客户端]
Aug 01 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
DWR中各种java方法的调用
May 04 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 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
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP之预定义接口详解
2015/07/29 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
用Python设计一个经典小游戏
2017/05/15 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python实现二维插值的三维显示
2018/12/17 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
外企财务年会演讲稿
2014/01/03 职场文书
大学生助学金感谢信
2015/01/21 职场文书
付款证明格式范文
2015/06/19 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby