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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
小程序点击图片实现png转jpg
2019/10/22 Javascript
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python实现简单图片物体标注工具
2019/03/18 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
XML文档面试题
2015/08/05 面试题
服装厂厂长岗位职责
2013/12/27 职场文书
高中生自我评语大全
2014/01/19 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
《在家里》教后反思
2014/03/01 职场文书
借名购房协议书范本
2014/10/06 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书