js处理类语法

webppack无法处理一些ES6的高级语法，需要babel来处理，比如类.

1.装包

2.配置正则

3.配置.babelrc文件

render渲染组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head><body><div id="app"></div><script>var login={template:"<h3>login</h3>"}var vm=new Vue({el:'#app',data:{},methods:{},render:function(createElements){//createElement是一个方法，调用它能够吧指定的组件模板，渲染为html结构return createElements(login)//注意：这里return的结果会替换页面中el指定的哪个容器}});</script>
</body></html>

最大不同就是会将原来的容器替换掉

在webpack中使用vue开发

直接

import Vue from 'vue'

是不行的
引用的是阉割版的vue，无法向平常那样写vue代码

回顾：包的寻找

解决

1.直接引用

import Vue from '../node_module/vue/dist/vue.js'

2.修改vue中package的main属性

改为dist/vue.js

还是用

import Vue from '../node_module/vue/dist/vue.js'

但是修改webpack.config.json文件配置

类似于重定向。

如果想要用阉割版的vue.js，咋办呢？

here

1.创建一个.vue文件

2.在main.js中import

但是这时候，webpack是无法处理打包.vue文件的。需要安装loader

安装loader

此外在webpack.config.json文件中添加对应的loader规则

注意：此时需要用render渲染组件

总结：

export default&export

export default

test.js, 暴露

 var info={name:"asd",age:"12"
}
export default info

main.js

import m from './test.js'
console.log(m)

export
test.js 暴露

export var title='小星星'
export var content='123'

main.js 导入

import m,{title,ciontent} from './test.js'

按需导出，括号里的对象，需要多少导出多少。

引用时，名称改变

总结

web前端dya07--ES6高级语法的转化rendervue与webpackexport相关推荐

web前端技巧-ES6新特性与重点知识汇总（二）
ES6框架的新特性我们今天再来介绍其他的一些,还是带好写本本做好笔记,我们马上开始. 七.扩展运算符扩展运算符(spread)是三个点(-).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔 ...
web前端技巧-ES6新特性与重点知识汇总（三）
ES6的新特性到这里就是第三期了也是最后一期,今天我们将把剩余的几个ES6特性介绍完毕,希望能够给同学带来帮助,还是带好小本本我们开始了. 十三.Promise Promise 是异步编程的一种解决方 ...
web前端技巧-ES6新特性与重点知识汇总（一）
前端开发使用ES6框架已经不是什么新鲜的事情了,现如今也有越来越多的同学选择使用它,但随着ES6的更新迭代,一些新的特性很多同学并不了解,今天小千就来给大家介绍一下,记得收藏一下啦. 一.ES6变量声 ...
【Web前端HTML5CSS3】04-CSS语法与选择器
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录 CSS语法与选择器 1. CSS简介层叠样式表内联样式(行内样式) 内部样式表外部样式表 2. CSS ...
webpack 转换 ES6高级语法 bable插件 module rules
// 在webpack中只能处理一部分es6语法一些高级的ES6或者ES7 webpack处理不了借助第三方loader处理会将结果打包到main.js // loader 通过Bable可以转 ...
Web前端——JavaScript（基本语法）
>JavaScript概述 JavaScript是属于网络的脚本语言: JavaScript被写在HTML里,被浏览器解析(按顺序逐行解析)执行,跟HTML的书写顺序有关: JavaScript ...
【Web前端HTML5CSS3】——CSS语法与选择器（超级全面）
目录一.CSS语法 1. CSS简介内联样式(行内样式) 内部样式表外部样式表 2. CSS基本语法注释基本语法 3. CSS选择器常见选择器复合选择器关系选择器属性选择器 6. 伪 ...
web前端基础（13js语法基础）
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
js 调用c语言函数看,web前端：JS高级---函数中的this的指向，函数的不同调用方式...
在程序设计中,常将一些常用的功能模块编写成函数,放在函数库中供公共选用.要善于利用函数,以减少重复编写程序段的工作量. 函数分为全局函数.全局静态函数;在类中还可以定义构造函数.析构函数.拷贝构造函数 ...

web前端dya07--ES6高级语法的转化rendervue与webpackexport

js处理类语法

render渲染组件

在webpack中使用vue开发

export default&export

web前端dya07--ES6高级语法的转化rendervue与webpackexport相关推荐

最新文章

热门文章