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背投广告代码的完善
Apr 08 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
Angularjs过滤器使用详解
May 25 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
vue组件学习教程
Sep 09 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
vuex的使用步骤
Jan 06 Vue.js
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注入点构造代码
2008/06/14 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php生成RSS订阅的方法
2015/02/13 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
Prototype String对象 学习
2009/07/19 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
Python中super的用法实例
2015/05/28 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python实现多属性排序的方法
2018/12/05 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
pycharm安装及如何导入numpy
2020/04/03 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
用Python实现职工信息管理系统
2020/12/30 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
JSF如何进行表格处理及取值
2012/08/06 面试题
会计与出纳自荐书范文
2014/03/16 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
检讨书格式
2019/04/25 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技