18-webpack-打包vue文件
vue-loader不是webpack提供的,而是vue本身提供的:
Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件:
手动配置vue-loader:
第一步:命令行中 安装vue包
npm i vue
-
在入口文件index.vue中进行导入
import Vue from ‘vue’
第二步:新建src/APP.vue文件 1
第三步:vue组件文件 在 入口文件index.vue中 进行引入 2
第四步:命令行 安装包
vue-loader:加载vue文件内容 vue-template-compiler:编译成组件配置对象
npm install -D vue-loader vue-template-compiler
第五步:webpack.config.js中进行加载器配置
// 加载vue文件
+ const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ }
]
},
plugins: [
// 请确保引入这个插件!
+ new VueLoaderPlugin()
]
}
第六步:npm run serve
后,页面显示正常,说明 vue-loader 加载器配置成功
第七步:把vue组件 挂载到 html网页上 3
第八步:在入口文件index.js中 创建vue实例 4
第九步:命令行运行npm run serve
启动服务器后,打开页面,验证vue组件文件在页面是否渲染成功 5