一、webpack 中配置 vue 单文件组件的加载器
1、运行 npm i vue-loader vue-template-compiler -D 命令
2、 在 webpack.config.js 配置文件中,添加 vue-loader 的配置项如下:
//头部区域导入下载的包
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//module.exports->plugins添加插件
plugins: [new VueLoaderPlugin()]
//module.exports->module->rules添加匹配规则
{ test: /\.vue$/, use: 'vue-loader' }
大概就是这个样子
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [ // ... 其它规则
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
plugins: [ // ... 其它插件
new VueLoaderPlugin() // 请确保引入这个插件! ]
}
3、创建一个vue文件
<template>
<div>
<h1>这是App根组件</h1>
</div>
</template>
<script>
export default{
data(){
return{};
},
methods:{}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
4、运行 npm run dev
二、在webpack项目中使用vue
1、运行 npm i vue –S 安装 vue
2、在 src -> index.js 入口文件中,在头部区域通过 import Vue from ‘vue’ 来导入 vue 构造函数 以及导入单文件组件
import Vue from 'vue'
import App from './compoents/App.vue' //导入单文件组件
3、在vue 的实例对象,指定要控制的 el 区域,例如我在index.html中创建了一个id为app的盒子
<!-- 将来要被vue控制的区域 -->
<div id="app"></div>
那么,vue的实例对象挂载的就是‘#app’,然后通过 render 函数渲染 App 根组件
const vm = new Vue({
el: '#app',
render: h => h(App)
})
大概就是这样
// 1、导入 Vue 构造函数
import Vue from 'vue'
// 2、导入 App 根组件
import App from './compoents/App.vue' //导入单文件组件
// 3、创建vue实例对象
const vm = new Vue({
// 4、指定要控制的 el 区域
el: '#app',
// 5、通过 render 函数,把指定的组件渲染到 el 区域
render: h => h(App)
})
4、运行 npm run dev,可以看到之前创建的vue单文件组件被渲染到html页面中
三、项目上线之前需要通过webpack将应用进行整体打包,可以通过 package.json 文件配置打包命令
在package.json文件中配置 webpack 打包命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 用于开发调试的命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
// 用于打包的命令
"build": "webpack -p"
},