Vue基础系列文章10---单文件组件

2022-07-31 22:04:03 阅读：87 来源： 互联网

标签：10 Vue App loader --- vue 组件 import

1、单文件组件的结构

<template>
    <!--这里用于定义VUE组件的模块内容-->
    <dvi>
        <h1>这是 APP 根组件</h1>
    </dvi>
</template>

<script>
    //这里用于定义vue组件的业务逻辑
    export default{
        data(){return {}},
        methods:{
            //处理函数
        }

    }
</script>

<style scoped>
    /*这里用于定义组件的样式*/
    h1{
        color: red;
    }
</style>

2、配置单文件组件

因单位件组件是.vue格式，需要安装Loader加载器再加载此类文件

1) 运行：npm i vue-loader vue-template-compiler -D

2) 在webpack.config.js 配置文件中，添加 vue-loader 的配置项

const path = require('path')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={
    mode: "development",
    module:{
        rules:[
            {test: /\.vue$/,loader: 'vue-loader'}
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}

3、使用单文件组件

1）运行：npm i vue -S

2) 在入口文件index.js 入口文件中，通过 import Vue from 'vue' 来导入vue构造函数

3) 通过vue的实例对像，指定要控制的区域

4）通过render 函数渲染App 根组件

import $ from "jQuery"
import Vue from 'vue'
import App from 'App.vue'


$(function(){
    $("li:odd").css("backgroundColor","pink");
    $("li:even").css("backgroundColor","lightblue");
})

const vm =Vue({
    el:"#app",
    render:h=>h(App)
})

标签：10,Vue,App,loader,---,vue,组件,import
来源： https://www.cnblogs.com/zhengwei-cq/p/16510624.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue基础系列文章10---单文件组件