本文共 3314 字，大约阅读时间需要 11 分钟。

Vue与Webpack工程化实践

项目背景

本项目旨在通过Vue.js与Webpack进行前端工程化开发，构建一个英雄管理系统。该系统包含英雄列表、装备列表、技能列表等模块，并支持添加、编辑、删除等功能。项目采用单文件组件（SFC）模式，结合路由实现前后端分离的全栈开发。

Webpack配置

基本概念

Webpack是一款前端打包工具，能够对JS模块进行包装。其核心功能包括：

安装与配置

npm init --yes

npm i -D webpack webpack-cli webpack-dev-server vue-loader vue-style-loader html-webpack-plugin

const path = require('path');const VueLoaderPlugin = require('vue-loader/plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  devServer: {    host: '127.0.0.1',    port: 10088,    open: true,  },  output: {    path: path.join(__dirname, './dist'),    filename: 'bundle.js',  },  entry: './src/main.js',  module: {    rules: [      {        test: /\.vue$/,        use: 'vue-loader',      },    ],  },  plugins: [    new HtmlWebpackPlugin({      minify: {        removeComments: true,        collapseWhitespace: true,        minifyCSS: true,      },      filename: 'index.html',      template: path.resolve('./public/index.html'),    }),    new VueLoaderPlugin(),  ],};

npm i vue

项目结构

项目目录结构如下：

heros/├── public/│   └── index.html├── src/│   ├── main.js│   ├── app.vue│   └── components/│       ├── header.vue│       └── sideBar.vue├── dist/└── public/    └── index.html

Vue组件开发

单文件组件（SFC）

单文件组件的结构包括template、script和style部分：

组件注册

在主组件中注册子组件：

路由实现

安装Vue Router

npm i vue-router

配置路由

import VueRouter from 'vue-router';import Index from './pages/index.vue';import Add from './pages/add.vue';const router = new VueRouter({  routes: [    { path: '/', redirect: '/hero' },    { path: '/hero', component: Index },    { path: '/add', component: Add },  ],});export default router;

路由使用

在主组件中挂载路由：

动态路由参数

在Index.vue中使用路由参数：

数据接口

使用json-server

安装并运行json-server：

json-server db.json

数据请求

使用axios进行数据请求：

import axios from 'axios';export default {  data() {    return {      heroes: [],    };  },  methods: {    loadData() {      axios({        method: 'get',        url: 'http://localhost:3000/heroes',      }).then((res) => {        this.heroes = res.data;      });    },  },};

功能模块

英雄列表

添加功能

编辑功能

总结

通过以上步骤，我们成功构建了一个基于Vue.js和Webpack的前端工程化项目。该项目涵盖了组件开发、路由、数据接口、以及全栈开发的实现细节。未来可以进一步优化代码结构，增加更多功能，如图表支持、用户认证等，提升项目的实用性和复杂度。

转载地址：http://rcku.baihongyu.com/