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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
告诉大家什么是JSON
Jun 10 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 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静态变量当缓存的方法
2013/11/13 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python实现随机梯度下降法
2020/03/24 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
个人简历自我评价
2014/01/06 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
开学典礼演讲稿
2014/05/23 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
八一建军节主持词
2015/07/01 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
Python 数据可视化之Seaborn详解
2021/11/02 Python