VUE3-Erste-Schritte-Tutorial: Paketieren und Erstellen mit Webpack

Vue ist ein hervorragendes JavaScript-Framework, mit dem wir schnell interaktive und effiziente Webanwendungen erstellen können. Vue 3 ist die neueste Version von Vue, die viele neue Features und Funktionen einführt. Webpack ist derzeit einer der beliebtesten JavaScript-Modulpaketierer und Build-Tools, der uns bei der Verwaltung verschiedener Ressourcen in unseren Projekten helfen kann.

In diesem Artikel wird erläutert, wie Sie Webpack zum Verpacken und Erstellen von Vue 3-Anwendungen verwenden.

1. Webpack installieren

Zuerst müssen wir Webpack lokal installieren. Sie können zur Installation den npm-Paketmanager verwenden. Geben Sie den folgenden Befehl ein:

npm install --save-dev webpack webpack-cli

Hinweis: Webpack Version 4 und höher wird hier installiert.

2. Erstellen Sie ein Vue-Projekt

Wir müssen ein Vue-3-Projekt erstellen. Sie können das offizielle Tool von Vue @vue/cli verwenden. Geben Sie zur Installation den folgenden Befehl ein: @vue/cli来创建项目。输入以下命令来安装：

npm install -g @vue/cli

安装完成后，输入以下命令来创建Vue 3项目：

vue create my-project

其中my-project为项目名称，也可以根据需要自行定义。

Vue 3项目创建完成后，我们需要将其与Webpack结合使用。在项目的根目录下，使用npm包管理器安装Webpack和相关的loader和plugin，输入以下命令：

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm install --save-dev vue-loader vue-template-compiler css-loader style-loader sass-loader sass node-sass

其中，webpack-dev-server是Webpack的开发服务器，可以进行本地调试；html-webpack-plugin用于添加html文件。vue-loader和vue-template-compiler用于解析.vue文件，css-loader、style-loader、sass-loader和sass、node-sass用于处理样式文件。

3.配置Webpack

我们需要在项目根目录下创建一个webpack.config.js文件，来配置Webpack的各项参数。具体内容如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    port: 8080,
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
  },
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js',
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/,
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    }),
  ],
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
};

上述配置中，其中mode为开发模式，entry为入口文件，output为输出文件的路径和名称。module中的rules表示对各种文件进行处理。plugins表示我们使用的插件。

4.编写Vue组件

在项目的src目录中，创建多个.vue文件。这里以一个简单的组件为例：

<template>
    <div>我是一个Vue组件</div>
</template>
<script>
    export default {
        name: 'my-component'
    }
</script>

这是一个简单的Vue组件，名为my-component。我们可以在App.vue中使用该组件：

<template>
    <div>
        <my-component />
    </div>
</template>
<script>
    import MyComponent from './MyComponent.vue';
    export default {
        components: {
            MyComponent
        }
    }
</script>

5.运行项目

在项目的根目录下，输入以下命令来运行项目：

npm run serve

然后，可以在浏览器中访问http://localhost:8080，查看项目效果。

6.打包项目

在开发完成后，我们需要将项目打包，生成发布版本的代码。在项目根目录下，输入以下命令：

npm run build

Webpack会将项目的各个部分打包到distrrreee

Nach Abschluss der Installation geben Sie den folgenden Befehl ein, um ein Vue 3-Projekt zu erstellen:

rrreee

wobei my-project der Projektname ist, der auch sein kann nach Bedarf definiert. 🎜🎜Nachdem das Vue 3-Projekt erstellt wurde, müssen wir es mit Webpack verwenden. Verwenden Sie im Stammverzeichnis des Projekts den npm-Paketmanager, um Webpack und zugehörige Loader und Plugins zu installieren. Geben Sie den folgenden Befehl ein: 🎜rrreee🎜 Unter diesen ist webpack-dev-server der Entwicklungsserver von Webpack, das lokales Debuggen sein kann; html-webpack-plugin wird zum Hinzufügen von HTML-Dateien verwendet. vue-loader und vue-template-compiler werden zum Parsen von .vue-Dateien verwendet, css-loader, style-loader code >, <code>sass-loader und sass, node-sass werden zum Verarbeiten von Stildateien verwendet. 🎜🎜3. Webpack konfigurieren🎜🎜Wir müssen eine webpack.config.js-Datei im Projektstammverzeichnis erstellen, um verschiedene Parameter von Webpack zu konfigurieren. Der spezifische Inhalt ist wie folgt: 🎜rrreee🎜In der obigen Konfiguration ist mode der Entwicklungsmodus, entry ist die Eintragsdatei und output ist der Pfad und der Name der Ausgabedatei. rules in module bedeutet die Verarbeitung verschiedener Dateien. plugins stellt die von uns verwendeten Plug-ins dar. 🎜🎜4. Vue-Komponenten schreiben 🎜🎜Erstellen Sie mehrere .vue-Dateien im Verzeichnis src des Projekts. Hier ist eine einfache Komponente als Beispiel: 🎜rrreee🎜Dies ist eine einfache Vue-Komponente mit dem Namen my-component. Wir können diese Komponente in App.vue verwenden: 🎜rrreee🎜 5. Führen Sie das Projekt aus 🎜🎜 Geben Sie im Stammverzeichnis des Projekts den folgenden Befehl ein, um das Projekt auszuführen: 🎜rrreee🎜 Anschließend können Sie auf http in zugreifen Überprüfen Sie im Browser: //localhost:8080 den Projekteffekt. 🎜🎜6. Verpacken Sie das Projekt🎜🎜Nachdem die Entwicklung abgeschlossen ist, müssen wir das Projekt verpacken und die Release-Version des Codes generieren. Geben Sie im Stammverzeichnis des Projekts den folgenden Befehl ein: 🎜rrreee🎜Webpack packt verschiedene Teile des Projekts in den Ordner dist und die generierten Dateien können zum Bereitstellen von Webanwendungen verwendet werden. 🎜🎜Das Obige ist der gesamte Prozess des Packens und Erstellens von Vue 3-Anwendungen mit Webpack. Ich hoffe, es hilft allen. 🎜

Das obige ist der detaillierte Inhalt vonVUE3-Erste-Schritte-Tutorial: Paketieren und Erstellen mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!