Vue基础系列文章10---单文件组件
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) })