webpack+vue

原视频地址

1.vue单文件组件

单文件组件的组成结构：

• template 组件的模板区域
• script 业务逻辑区域
• style 样式区域

eg:

<template>
    <!-- 这里用于定义组件的模板内容 -->
</template>
<script>
    // 这里用于定义组件的业务逻辑
    export default {
        data:()=>{}, //私有数据
        methods:{} //处理函数
        //其他业务逻辑
    }
</script>
<style scoped>
    /* 这里用于定义组件的样式 */
</style>

2.webpack中配置vue组件的配置

1.运行npm i vue-loader vue-template-compiler -D
2.在 webpack.config.js 配置文件中，添加 vue-loader 配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

//新增规则：
{ test: /\.vue$/, loader: 'vue-loader' }

//新增插件：
new VueLoaderPlugin()
// plugins:[htmlPlugin, new VueLoaderPlugin()],

3.在 webpack 项目中使用 vue

1.运行npm i vue -S安装 vue
2.在 src -> index.js 入口文件中，通过 import Vue from 'vue'来导入 vue 构造函数
3.创建 vue 的实例对象，并指定要控制的 el 区域
4.通过 render 函数渲染 App 根组件

//1.导入Vue构造函数
import Vue from 'vue'

//2.导入App根组件
import App from './components/App.vue'

const vm = new Vue({
    //3.指定 vm 实例要控制的页面区域
    el:'#app',
    //4.通过 render 函数渲染 App 根组件
    render: h => h(App)
})

4.webpack 打包发布

上线之前需要通过 webpack 应用进行整体打包，可以通过 package.json 文件配置命令：

// 在 package.json 文件中配置 webpack 打包命令
// 该命令默认加载项目根目录的 webpack.config.js 配置文件
"scripts": {
    // 用于打包的命令
    "build": "webpack -p",
    //用于开发调试的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --post 8888"
}