目錄

?

?

基本概念

代碼與實例

個人理解

---

?

基本概念

現在的前端和后端都是通過api獲取數據的。

這里主要有這幾條命令：

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

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

下面那一行是他的依賴。

這里看以下vue的文件：

在app.vue中

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

<script></script>放js代碼，控制顯示的內容

<style></style>為vue的<template></template>特殊的樣式，這3個構成了vue的組建

如下的文件：

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()] }

?

個人理解

這里感覺webpack和C++ qt中的pro文件一樣，主要用于文件管理，的確是6。

總結

以上是生活随笔為你收集整理的前端笔记-对webpack和vue的基本认识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。