11.2.1 手动搭建Vue项目-Webpack实战：入门、进阶与调优(下)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(下)

11.2.1 手动搭建Vue项目

在前端开发领域，Vue.js 凭借其简洁的 API、灵活的组件系统以及高效的响应式数据绑定机制，赢得了广泛的关注与应用。本章节将详细指导你如何从头开始，手动搭建一个基础的 Vue.js 项目，不涉及任何脚手架工具（如 Vue CLI），以便深入理解 Vue 项目的构成与工作流程。通过这个过程，你将学会如何配置项目结构、安装依赖、设置Webpack以及编写基础Vue组件。

11.2.1.1 初始化项目结构

首先，你需要创建一个新的文件夹作为项目的根目录，并在其中创建基本的项目结构。一个典型的 Vue 项目可能包含以下文件和文件夹：

my-vue-project/
├── /dist         # 打包后的文件存放目录
├── /src          # 源代码目录
│   ├── /assets   # 静态资源目录，如图片、字体等
│   ├── /components # Vue组件目录
│   ├── App.vue    # 根组件
│   └── main.js    # 入口文件
├── index.html     # 单页应用入口HTML文件
├── webpack.config.js # Webpack配置文件
├── package.json   # 项目依赖文件
└── .gitignore     # Git忽略文件

11.2.1.2 创建基础文件

index.html

在项目的根目录下创建 index.html 文件，作为单页应用的入口HTML文件。这个文件将包含基本的HTML结构，并引入打包后的JS文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue Project</title>
</head>
<body>
    <div id="app"></div>
    <!-- 引入打包后的JS文件 -->
    <script src="./dist/bundle.js"></script>
</body>
</html>

main.js

在 src 目录下创建 main.js 文件，这是Vue应用的入口文件。这里我们将创建Vue实例并挂载到#app元素上。

import Vue from 'vue';
import App from './App.vue';
new Vue({
    el: '#app',
    render: h => h(App)
});

App.vue

同样在 src 目录下，创建 App.vue 文件，这是Vue项目的根组件。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>
<style>
/* 样式内容 */
</style>

11.2.1.3 安装Vue及Webpack相关依赖

在项目根目录下打开终端，运行以下命令来初始化npm并安装Vue及Webpack相关依赖。

npm init -y  # 快速初始化npm项目
npm install vue --save  # 安装Vue
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin vue-loader vue-template-compiler css-loader vue-style-loader babel-loader @babel/core @babel/preset-env --save-dev  # 安装Webpack及其相关依赖和Vue加载器

这里安装的依赖包括：

vue：Vue.js核心库。
webpack & webpack-cli：Webpack及其命令行工具。
webpack-dev-server：一个用于开发环境的Web服务器，提供热重载功能。
html-webpack-plugin：简化HTML文件的创建，以便为你的服务自动注入webpack包。
vue-loader & vue-template-compiler：用于处理.vue文件的Webpack加载器。
css-loader & vue-style-loader：处理Vue组件中的CSS样式。
babel-loader & @babel/core & @babel/preset-env：将ES6+代码转换为向后兼容的JavaScript版本。

11.2.1.4 配置Webpack

在项目根目录下创建 webpack.config.js 文件，配置Webpack以支持Vue项目的构建。

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

11.2.1.5 运行和构建项目

在 package.json 文件中添加脚本以支持Webpack的启动和构建。

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack --mode production"
},

npm start：启动开发服务器，并自动打开浏览器预览页面。
npm run build：构建生产环境的代码到dist目录。

现在，你可以通过运行 npm start 来启动你的Vue项目了。Webpack将监听文件变化，并自动重新编译和刷新浏览器，以显示最新的更改。

11.2.1.6 扩展与优化

随着项目的发展，你可能需要添加更多的Webpack插件和loader来支持更复杂的构建需求，如代码分割、图片优化、环境变量注入等。此外，使用Vue Router和Vuex来管理路由和状态也是构建大型Vue应用时的常见选择。

通过手动搭建Vue项目，你不仅加深了对Vue和Webpack的理解，也为未来的项目构建和优化打下了坚实的基础。这个过程虽然相对繁琐，但每一步都是对前端工程化的一次深刻实践。