Vue2 + Webpack2 从零搭建单页应用实战指南

Vue2与Webpack2项目搭建概述

React、Vue和Angular代表了三种不同的前端工程化理念。学习这些框架的核心在于理解组件、生命周期、单向数据流及双向绑定等基本概念。对于缺乏系统化思考经验的新手而言，这些概念往往陌生且难以入手。本文将通过从零开始搭建Vue项目，结合实际操作来深入理解Vue的设计思想。

1、如何开始使用Vue？

学习Vue的第一步是访问Vue官方文档（https://cn.vuejs.org/v2/guide...）。文档中明确区分了1.X和2.X版本，经过考量，本文选择更为成熟的2.X版本进行开发。

选定Vue版本后，通过知乎等平台查阅前辈分享的搭建方案，发现了一个名为cooking的工具。该工具究竟有何优势？

cooking旨在简化繁琐的构建配置，并避免每个项目重复安装大量开发依赖。它基于Webpack但提供了更友好的配置项和易用的扩展机制，旨在让开发者专注于项目本身而忽略配置细节。

尽管cooking官网介绍诱人，但实际尝试后发现并不顺手。虽然它提供了一键配置环境的便捷性，但仍需学习其特定用法，且本地必须安装cooking。尽管最终能在浏览器成功访问网页，但考虑到学习成本，最终决定放弃该工具。

因此，只能选择从零开始手动搭建项目。

项目初始化与依赖配置

2、在GitHub上创建vue2-web项目。

访问GitHub首页，点击“Start a project”按钮。

随后进入“Create a new repository”页面，填写项目基本信息，此步骤可快速跳过。

项目创建完成后，将其克隆到本地开发环境。

3、初始化npm环境

使用Shell或CMD进入项目根目录，执行初始化命令。过程中直接跳过各项选项确认，最终生成package.json文件。

npm init

4、安装Webpack

Webpack是现代前端开发的必备工具，尽管其配置复杂且容易令人困惑，但为了确保项目稳定性，本文坚持使用Webpack2版本。

npm install --save-dev webpack

此外，还需要配置前端服务器以实现热更新功能，此时webpack-dev-server应运而生。

npm install --save-dev webpack-dev-server

Webpack与Babel核心配置

5、创建webpack.config.js配置文件

Vue项目的Webpack配置文件与React项目类似，仅需进行少量调整即可复用。

务必注意，JS文件和Vue文件不能混放在同一目录下，必须严格分离。这是本文踩过最隐蔽且耗时数小时才解决的坑点。

rules: [{
   test: /\.js$/,
   use: ['babel-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },{
   test: /\.vue$/,
   use: ['vue-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },

6、创建.babelrc配置文件

Babel转换不可或缺。注意此处不再使用React相关的配置，而是针对Vue，需包含flow-vue和transform-vue-jsx等插件。

{
 "presets": ["es2015", "flow-vue", "stage-0", "stage-2"],
 "plugins": ["transform-vue-jsx"],
 "comments": false,
 "env": {
 "production": {
  "plugins": [
  ["transform-runtime", { "polyfill": false, "regenerator": false }]
  ]
 }
 }
}

7、在package.json中添加start命令

直接运行webpack-dev-server启动项目时，会提示缺少多个模块。这是因为配置文件中引用的模块尚未安装。只需逐一安装这些依赖即可解决。

"start": "webpack-dev-server",

入口文件与路由结构搭建

8、创建项目入口文件main.js

入口文件名可根据个人喜好命名，代码逻辑相对简单，主要实例化Vue实例和路由对象。这与React的入口文件结构相似。由于本文构建的是单页应用（SPA），因此采用单入口配置；若非SPA模式，配置方式会有所不同。

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueResource from 'vue-resource';
Vue.use(VueResource); //http请求注册
Vue.use(VueRouter); //路由注册
// 实例化路由
const router = new VueRouter({
 // mode: 'history', //H5 路由模式，需要服务端做渲染防止404错误
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  非必须
//  module.hot.accept('./App.vue', () => render);
// }

9、配置路由routes.js

Vue的路由配置与React高度相似（几乎一致）。在Vue中，页面组件采用.vue后缀进行编写。

import Home from './components/home/Home.vue';
import Bang from './components/bang/Bang.vue';
export default [
 {
  path: '/',
  redirect: 'home'
 },
 {
  path: '/home',
  component: Home
 },
 {
  path: '/bang',
  component: Bang
 }
]

顶层容器App.vue组件解析

10、构建单页应用顶层容器App.vue

从index.html进入应用后，首先加载的就是该文件，这也是开始学习Vue核心特性的关键点。

template部分：这是Vue的模板语言，也可视为JSX的一种形式。

transition部分：用于定义过渡动画效果。

router-view部分：这是路由显示的容器，通过router-link跳转加载的.vue组件将在此容器中渲染。其中，router-link已被封装到nav.vue组件中。

script部分：导入了当前顶层容器所需的Vue组件，包括头部、导航和首页组件。更多高级设置将在后续学习中深入探讨。

style部分：定义当前组件的样式，本文配置了Less语法支持。只需将style标签改为<style lang="less">即可编写Less代码。

<template>
 <div>
  <app-header logo="logo" ></app-header>
  <app-nav></app-nav>
  <transition name="fade" mode="out-in">
   <router-view class="view"></router-view>
  </transition>
 </div>
</template>
<script>
 import Header from './components/common/Header.vue';
 import Nav from './components/common/Nav.vue';
 import Home from './components/home/Home.vue';
 export default {
  name: 'App',
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

在搭建过程中遇到了多个报错情况，但最终都得以圆满解决。

如需查看更详细的Vue组件代码，可参考具体项目仓库：https://github.com/hyy1115/vu...

后续将继续完善该项目，探索更加灵活的Vue架构实现方式。

运行效果预览：vue-酷我demo

总结

以上介绍了Vue2结合Webpack2框架搭建的完整踩坑历程，希望能为读者提供帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！