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 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
微信小程序图片左右摆动效果详解
Jul 13 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 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实现用户认证及管理完全源码
2007/03/11 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
谈谈python中GUI的选择
2018/03/01 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
函授毕业生的自我鉴定
2013/11/26 职场文书
销售会计工作职责
2013/12/02 职场文书
美发活动策划书
2014/01/14 职场文书
应届护士求职信范文
2014/01/26 职场文书
总裁助理岗位职责
2014/02/17 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
市场营销战略计划书
2014/05/06 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
生日庆典策划方案
2014/06/02 职场文书
2015年化验员工作总结
2015/04/10 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
Golang 实现WebSockets
2022/04/24 Golang