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

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

1、单文件组件的结构

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)})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。