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