web前端dya07--ES6高级语法的转化&render&vue与webpack&export

最新推荐文章于 2024-06-03 13:37:11 发布

意瑚琏

最新推荐文章于 2024-06-03 13:37:11 发布

阅读量320

点赞数

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/weixin_40422539/article/details/108449701

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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'

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

引用时，名称改变
在这里插入图片描述
总结

意瑚琏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录