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 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
js原生map实现的方法总结
Jan 19 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 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
php 表单验证实现代码
2009/03/10 PHP
8个必备的PHP功能开发
2015/10/02 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
javascript prototype 原型链
2009/03/12 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
django 类视图的使用方法详解
2019/07/24 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
自我鉴定写作要点
2014/01/17 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书