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 项目可能包含以下文件和文件夹：

```bash
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文件。

```html
<!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>
    
    <script src="./dist/bundle.js"></script>
</body>
</html>
```

##### main.js

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

```javascript
import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render: h => h(App)
});
```

##### App.vue

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

```vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

#### 11.2.1.3 安装Vue及Webpack相关依赖

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

```bash
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项目的构建。

```javascript
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的启动和构建。

```json
"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的理解，也为未来的项目构建和优化打下了坚实的基础。这个过程虽然相对繁琐，但每一步都是对前端工程化的一次深刻实践。

该分类下的相关小册推荐：

Webpack零基础入门

Webpack实战：入门、进阶与调优(中)

webpack指南

全解webpack前端开发环境定制

Webpack实战：入门、进阶与调优(上)