您的位置：首页 > 产品设计 > UI/UE

vue学习笔记三

2017-05-02 09:22 197 查看
vue学习笔记三
vue学习笔记一 

vue学习笔记二

才发现写了两篇一直是webpack的东西。今天用点vue的组件:

根目录下新建一个template文件夹, 顾名思义，是用来放vue组件的

在template新建一个hello.vue



hello.vue里面写点东西,顺便加点样式

<template lang="html">
<div id="hello">
{{message}},{{name}}
</div>
</template>
<script>
export default {
name:"hello",
data(){
return {
message:"hello",
name:"world"
}
}
}
</script>
<style lang="css">
#hello{
font-size:14px;
color:#ff0202
}
</style>

修改src/js/index.js文件



引入我们刚刚写的.vue模板

importhelloVuefrom'./../../template/hello.vue';

之前的data数据我们现在可以不要了,  删掉后注册引入的组件

new Vue({
el:"#app",
components: {"helloVue":helloVue}
})

修改根目录的index.html文件;

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,
initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>vue_study</title>
</head>
<body>
<divid="app">
<hello-vue></hello-vue>
</div>
</body>
</html>

只留刚刚的注册的那个组件

安装 vue-loader 模块;



然后我们需要修改webpack.config.js；

添加vue的解析:

{
test:/\.vue$/,
use: ['vue-loader']
},

到这里基本上已经完成了。

执行打包:

webpack

如果没有意外的话，刷新页面应该是这样的



到这里一个基本的.vue打包已经完成了。

下次我们写个dotolist

我也是一个vue新人，有什么不对的地方欢迎大家指正交流
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  vue webapck
相关文章推荐
新的分享
章节导航