您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— vue单文件组件

《和小米一起学Vue.js》— vue单文件组件

[ 孤狼 | 2022-07-30 03:03:25 | Vue | 452°C | 0条评论 ]

在vue项目开发中,一般index.html文件是不会进行修改的,所以,一般组件的内容也不会放到index.html文件里,vue通过单文件组件方式来加载需要的模板。  


原理

在一个vue实例中,当 el template 属性同时存在时,vue会用 template 内容替换 el 绑定的元素。所以只需要template内容为组件内容即可直接替换内容,同时,组件可以写成单独文件的格式,方便管理。


单文件组件

新建一个目录vue,并在内部新建一个文件app.vue

<template>
<div>
<h1>{{ss}}</h1>
</div>
</template>

<script>
export default{
name:"app",
data(){
return {
ss:'单组件内容'
}
}
}
</script>

<style scoped>
h1{color:blueviolet;font-size:20px;}
</style>


修改main.js文件

将要显示的模板内容,放到main.js文件内

import Vue from "vue";
import App from './vue/app.vue'

new Vue({
el:"#app",
template:'<App><App/>',
components:{
App
}
});



修改index.html文件

index.html文件,只需要保留主入口即可

<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>



安装vueloader

webpack默认是不支持vue文件的,所以也要单独安装vue的loader(vue2最高支持到vue-loader15

npm install vue-loader@15 --save-dev
npm install vue-template-compiler --save-dev



编辑webpack.config.js文件

增加vue识别

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin()
]
}



打包运行

输入命令打包

npx webpack



代码下载

下载地址:  密码:r6e4


转载请注明出处:http://gl.paea.cn/n.php?n=186
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索