Tutoriel de démarrage VUE3 : empaquetage et création avec Webpack

Vue est un excellent framework JavaScript qui peut nous aider à créer rapidement des applications Web interactives et efficaces. Vue 3 est la dernière version de Vue, qui introduit de nombreuses nouvelles fonctionnalités et fonctionnalités. Webpack est actuellement l'un des packagers de modules et outils de construction JavaScript les plus populaires, qui peut nous aider à gérer diverses ressources dans nos projets.

Cet article expliquera comment utiliser Webpack pour empaqueter et créer des applications Vue 3.

1. Installez Webpack

Tout d'abord, nous devons installer Webpack localement. Vous pouvez utiliser le gestionnaire de packages npm pour installer, entrez la commande suivante :

npm install --save-dev webpack webpack-cli

Remarque : Webpack version 4 et supérieure sont installés ici.

2. Créer un projet Vue

Nous devons créer un projet Vue 3. Vous pouvez utiliser l'outil officiel fourni par Vue @vue/cli pour créer le projet. Entrez la commande suivante pour installer : @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

Une fois l'installation terminée, entrez la commande suivante pour créer un projet Vue 3 :

rrreee

où my-project est le nom du projet, qui peut également être défini selon les besoins. 🎜🎜Une fois le projet Vue 3 créé, nous devons l'utiliser avec Webpack. Dans le répertoire racine du projet, utilisez le gestionnaire de packages npm pour installer Webpack et les chargeurs et plugins associés : 🎜rrreee🎜 Parmi eux, webpack-dev-server est le serveur de développement de. Webpack, qui peut être un débogage local ; html-webpack-plugin est utilisé pour ajouter des fichiers html. vue-loader et vue-template-compiler sont utilisés pour analyser les fichiers .vue, css-loader, style-loader code >, <code>sass-loader et sass, node-sass sont utilisés pour traiter les fichiers de style. 🎜🎜3. Configurer Webpack🎜🎜Nous devons créer un fichier webpack.config.js dans le répertoire racine du projet pour configurer divers paramètres de Webpack. Le contenu spécifique est le suivant : 🎜rrreee🎜Dans la configuration ci-dessus, mode est le mode de développement, entry est le fichier d'entrée et output est le chemin et le nom du fichier de sortie. Les règles dans le module signifient traiter divers fichiers. plugins représente les plug-ins que nous utilisons. 🎜🎜4. Écrivez les composants Vue 🎜🎜Créez plusieurs fichiers .vue dans le répertoire src du projet. Voici un composant simple à titre d'exemple : 🎜rrreee🎜Il s'agit d'un simple composant Vue nommé my-component. Nous pouvons utiliser ce composant dans App.vue : 🎜rrreee🎜 5. Exécutez le projet 🎜🎜 Dans le répertoire racine du projet, entrez la commande suivante pour exécuter le projet : 🎜rrreee🎜 Ensuite, vous pouvez accéder au http dans le navigateur : //localhost:8080, vérifiez l'effet du projet. 🎜🎜6. Packager le projet🎜🎜Une fois le développement terminé, nous devons empaqueter le projet et générer la version finale du code. Dans le répertoire racine du projet, entrez la commande suivante : 🎜rrreee🎜Webpack regroupera différentes parties du projet dans le dossier dist et les fichiers générés pourront être utilisés pour déployer des applications Web. 🎜🎜Ce qui précède représente l'ensemble du processus de packaging et de création d'applications Vue 3 à l'aide de Webpack. J'espère que cela aide tout le monde. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!