vue3的app.use和install方法

本文轉載自查看原文 2022-01-19 13:59 2941

目錄結構：

腳手架搭建：

npm init -y
yarn add webpack@4.44.2 webpack-cli@3.3.12 webpack-dev-server@3.11.2 @vue/compiler-sfc@3.1.2 vue-loader@16.5.0 vue-style-loader@4.1.3 vue-template-compiler@2.6.14 html-webpack-plugin@4.5.0 css-loader@4 sass-loader@10.1.1 sass@1.45.2 -D

package.json

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin'),
  { VueLoaderPlugin } = require('vue-loader'),
  { resolve } = require('path')

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.vue', '.js'],
  },
  externals: {
    vue: 'Vue',
  },
  module: {
    rules: [
      {
        test: /.vue$/i,
        loader: 'vue-loader',
      },
      {
        test: /.scss$/i,
        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new htmlWebpackPlugin({
      template: resolve(__dirname, 'public/index.html'),
    }),
  ],
}

main.js:

import App from './App'
import DemoUI from '../modules/demo-ui'

const app = Vue.createApp(App)

app.use(DemoUI)
app.mount('#app')

public\index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.27/dist/vue.global.min.js"></script>
</body>
</html>

modules\demo-ui\components\index.js

import HButton from './components/HButton.vue'
import HInput from './components/HInput.vue'

const components = [HButton, HInput]

const DemoUI = {
　// install 方法 接收參數app
  install(app) {
    // console.log('執行一段邏輯')
    components.forEach(comp => {
      app.component(comp.name, comp)
    })
  },
}
export default DemoUI

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 express中app.use()使用方法 Express中app.use()用法 Express框架 --router/app.use Express中app.use()用法詳解 app.use和app.get，app.post區別 app.use和app.get的區別及解析 Node Express中app.use與app.get app.use與app.get的區別及解析 node.js-express的app.use()初步理解 node.js之express中app.use