前言
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 命令 结果如下
可以看出,控制台就没有报错了