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 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
JS表的模拟方法
Feb 05 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
JS实现可控制的进度条
Mar 25 Javascript
详细分析vue响应式原理
Jun 22 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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 split()函数的用法详解
2013/06/05 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
利用php生成验证码
2017/02/23 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python url 参数修改方法
2018/12/26 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
python -v 报错问题的解决方法
2020/09/15 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
灵泰克Java笔试题
2016/01/09 面试题
护理职业生涯规划书
2014/01/24 职场文书
职工趣味运动会方案
2014/02/10 职场文书
教师节促销活动方案
2014/02/14 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2015年团支部工作总结
2015/04/03 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python