Vue学习篇-5、配置vue单文件组件的加载器、webpack项目中使用vue以及使用webpack打包项目

一、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"
    },