创建vue3项目

在创建一个 Vue 3 项目并使用 webpack 打包的过程中，你可以不使用 Vue CLI，而是手动配置 webpack 并使用 vue.config.js 文件来进行 Vue 相关配置。下面是详细步骤：

创建项目结构：

首先，创建一个项目文件夹，并在其中初始化一个 package.json 文件：

mkdir my-vue3-project
cd my-vue3-project
npm init -y

安装依赖：

安装 Vue 3 和其他需要的依赖项，比如 webpack 和相关插件：

npm install vue@next webpack webpack-cli webpack-dev-server vue-loader@next @vue/compiler-sfc html-webpack-plugin -D

创建文件：

在项目根目录下创建以下文件：

index.html：作为入口 HTML 文件；
main.js：Vue 3 应用的入口 JavaScript 文件；
App.vue：Vue 3 根组件。

配置 webpack：

在项目根目录下创建 webpack.config.js 文件，并进行 webpack 配置：

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

编写 Vue 组件：

在 App.vue 中编写 Vue 根组件，例如：

<template>
  <div>
    <h1>Hello Vue 3!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

编写入口 JavaScript 文件：

在 main.js 中导入 Vue，并创建 Vue 应用：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

修改入口 HTML 文件：

在 index.html 中添加一个根元素用于挂载 Vue 应用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Vue 3 Project</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

打包和运行：

现在，你可以使用以下命令来打包和运行应用：

npx webpack --config webpack.config.js

这将生成一个 dist 文件夹，并在其中输出 bundle.js。然后，你可以在浏览器中打开 index.html 来查看应用。

尽管这种手动配置相对于 Vue CLI 有些繁琐，但它让你可以更加灵活地定制 webpack 配置和其他构建选项。

要创建一个Vue 3项目并使用webpack进行打包，但不使用vue-cli，而是使用vue.config.js文件进行配置，可以按照以下步骤进行：

初始化项目目录首先，创建一个空文件夹，进入该文件夹，然后执行以下命令初始化项目：

npm init -y

这将生成一个默认的package.json文件，其中包含项目的基本信息和依赖项。

安装必要的依赖你需要安装Vue 3及相关的依赖项。执行以下命令：

npm install vue@next vue-loader@next vue-template-compiler webpack webpack-cli webpack-dev-server --save-dev

vue@next: 安装Vue 3。
vue-loader@next: 用于将Vue组件转换为JavaScript模块。
vue-template-compiler: 在开发环境下编译.vue单文件组件。
webpack, webpack-cli: 用于构建项目。
webpack-dev-server: 用于在开发过程中提供开发服务器。

创建项目文件在项目文件夹中创建以下文件和文件夹结构：

- src
  - main.js
  - App.vue
- index.html
- webpack.config.js
- package.json

src/main.js是入口文件，src/App.vue是Vue根组件，index.html是主页面，webpack.config.js是webpack配置文件。

配置webpack 在根目录下创建webpack.config.js文件，并进行基本的webpack配置：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.vue'],
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080,
  },
};

这里简单配置了入口文件、输出路径、模块规则（使用vue-loader和babel-loader处理.vue和.js文件）、解析文件扩展名以及开发服务器的配置。

创建Vue组件在src/App.vue文件中，创建一个简单的Vue组件：

<template>
  <div>
    <h1>Hello Vue 3!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
h1 {
  color: blue;
}
</style>

创建入口文件在src/main.js中，编写Vue应用程序的入口文件：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

创建主页面在项目根目录下的index.html文件中，添加一个<div>标签，用于挂载Vue应用程序：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Webpack</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

打包与运行现在，你已经完成了Vue 3项目的配置。要打包项目，执行以下命令：

webpack

这将生成一个打包后的bundle.js文件。

要在开发模式下运行项目，执行以下命令：

webpack serve

这将启动开发服务器，并在浏览器中打开页面。

至此，你已经成功地使用webpack和vue.config.js创建了一个Vue 3项目，并可以开始进行开发了。记得在实际项目中可能需要添加更多配置和插件，但这个简单的例子已经涵盖了基本的设置。

创建一个不使用 vue-cli，而是手动配置的 Vue 3 项目，并使用 webpack 打包，可以通过以下步骤实现。在这个过程中，我们会创建一个 vue.config.js 文件来配置 Vue 3 项目。

初始化项目

首先，创建一个新的文件夹，并在其中初始化一个新的 npm 项目：

mkdir my-vue-project
cd my-vue-project
npm init -y

安装依赖

接下来，安装 Vue 3 相关的依赖项和 webpack 相关的依赖项：

npm install vue@next webpack webpack-cli webpack-dev-server vue-loader@next @vue/compiler-sfc html-webpack-plugin -D

vue@next: Vue 3 的核心库。
webpack、webpack-cli: webpack 相关的模块。
webpack-dev-server: 提供开发服务器功能。
vue-loader@next: 用于在 webpack 中加载 Vue 单文件组件。
@vue/compiler-sfc: 提供 Vue 单文件组件的编译功能。
html-webpack-plugin: 生成 HTML 文件并将 webpack 打包后的资源自动引入其中。

创建项目文件结构

my-vue-project
|-- src
|   |-- main.js
|   |-- App.vue
|-- public
|   |-- index.html
|-- vue.config.js
|-- package.json

配置 vue.config.js

在项目根目录下创建 vue.config.js 文件，并进行以下简单配置：

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

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: './public',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

以上配置指定了入口文件为 ./src/main.js，输出文件名为 bundle.js，并且配置了开发服务器的根目录为 ./public，同时使用 html-webpack-plugin 生成一个新的 index.html 文件，它会自动引入我们生成的打包文件 bundle.js。

编写 Vue 3 代码

在 src/main.js 中，编写 Vue 3 的启动代码：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

在 src/App.vue 中，编写一个简单的 Vue 组件：

<template>
  <div>
    <h1>Hello Vue 3!</h1>
    <p>Welcome to my Vue 3 project.</p>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

运行开发服务器

最后，运行开发服务器来查看效果：

npx webpack serve --mode development

现在，你的 Vue 3 项目已经在开发模式下运行了。在浏览器中打开 http://localhost:8080，你将看到显示 “Hello Vue 3! Welcome to my Vue 3 project.” 的页面。

如果要构建生产版本，可以运行：

npx webpack --mode production

以上命令将在项目根目录下生成一个 dist 文件夹，并在其中包含打包后的生产版本文件。

这样，你就成功地创建了一个不使用 vue-cli 的 Vue 3 项目，并使用了 webpack 进行打包。同时，通过 vue.config.js 文件，你配置了 webpack 和其他相关选项。

FEATURED TAGS

FRIENDS