webpack配置vue组件加载器

前言
App.vue单文件组件代码

<template><div><h1>App根组件</h1></div>
</template><script>// 这里定义vue组件的业务逻辑export default{//私有数据data(){return{}},methods:{//处理函数//其它业务处理}}
</script>
<style  scoped>
/* style  标签加上 scoped  可以防止样式之间冲突，每个子页面样式是私有的，不会影响到其他页面的组件 */</style>

index.js中引入单文件组件

import $ from 'jquery'
import './css/at.css'
import './css/at.less'
import './css/at.scss'
// 导入vue单文件组件
import App from './components/App.vue'
$(function() {$('li:odd').css('backgroundColor', 'blue')$('li:even').css('backgroundColor', 'lightblue')
})
class User {static info = 'User类'
}
console.log(User.info);

执行打包 npm run start 命令浏览器查看结果

可以看出webpack不能打包vue后缀的文件，所以接下来进行配置

webpack配置vue组件加载器

第一步：安装 npm i vue-loader vue-template-compiler -D 命令
第二步：在webpack.config.js配置文件中，添加vue-loader的配置如下：

// 导入vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {plugins:[htmlPlugin,new VueLoaderPlugin()],// plugins 数组是webpack 打包期间会用到的一些插件列表mode:'development', // mode用来指定构建模式//所有第三方文件模块的匹配规则module:{rules:[//配置vue组件{test:/\.vue$/,use:'vue-loader'}]    }}

执行打包 npm run start 命令结果如下

可以看出，控制台就没有报错了

webpack配置vue组件加载器相关推荐

webpack项目安装与加载器常出现问题
项目名为webpack,直接报错,在package.json里面把名字修改 TypeError: this.getOptions is not a function版本过高,得安装低版本的打包jqu ...
vue组件加载完成之后执行方法_vue-cli监听组件加载完成的方法
在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能. 1.安装vuex npm install vuex --sav ...
vue组件加载完成之后执行方法_vuejs实现ready函数加载完之后执行某个函数的方法...
编程之家收集整理的这篇文章主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. vue.js 教程 Vue.js(读音 /v ...
vue组件加载完成之后执行方法_Vue.js实现ready函数加载完之后执行某个函数的方法...
Vue.js实现ready函数加载完之后执行某个函数的方法发布于 2020-7-10| 复制链接摘记: vue.js 教程Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面 ...
vue组件加载完成之后执行方法_vuejs页面加载完成后执行函数
module.exports = { data: function(){ return { memberQrcodeState: false } }, components: {memberQrcod ...
js css加载器,webpack的CSS加载器的使用
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webp ...
axios 配置loading_vue axios配置发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
webpack-loader（加载器）
加载器是用于资源文件的转换. 加载器就是以资源文件作为入参并返回新的资源的函数(在Node.js中运行). 例子例如,您可以使用加载器告诉webpack加载CSS文件或TypeScript文件,并将 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

webpack配置vue组件加载器

webpack配置vue组件加载器

webpack配置vue组件加载器相关推荐

最新文章

热门文章