基本概念

现在的前端和后端都是通过api获取数据的。

这里主要有这几条命令：


npm i webpack vue vue-loader
npm i css-loader vue-template-compiler

这里，就是使用了webpack和vue以及vue-loader

下面那一行是他的依赖。

这里看以下vue的文件：

在app.vue中

<template></template>主要是放html源码

如下的文件：

webpack.config.js用与打包前端资源。

index.js为入口文件，

这里vue不能直接挂载到html里面，要使用vue对象进行挂载，挂载源码如下：

其中这个h就为createApp，就可以把vue挂载到html里面，创建一个div，放到body下面，然后使用$mount进行挂载。

这里来看下webpack.config.js

这里的const path = require('path')为引用path包。

__dirname：为此文件的地址。

path.join：为字符串的拼接，也就是可以得到绝对路径。

output：为文件输出，就是把vue中和其他所用的东西放到dist下的bundle.js中。

module中的rules为解析vue文件的规则。

还有一点就是package.json

最后生成的文件：

这个bundle.js就是output里面的文件名！内容里面webpack为固有的模块依赖，后面就是vue的源码webpack的作用就是把写的静态资源的类型，打包为js。

代码与实例

程序结构如下：

app.vue


<template>
    <div id="test">{{text}}</div>
</template>
 
<script>
export default {
    data(){
        return {
            text: "abc"
        }
    }
}
</script>
 
<style>
#test{
    color: red;
}
</style>

index.js


import Vue from 'vue'
import App from './app.vue'
 
const root = document.createElement('div')
document.body.appendChild(root)
 
new Vue({
    render: (h) => h(App)
}).$mount(root)

package.json


{
  "name": "vuetestdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^3.1.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  }
}

webpack.config.js


const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: ["vue-style-loader", "css-loader"] 
             }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}