一路webpack，精炼Vue项目

2023-12-11 00:32:59

提到Vue.js项目搭建，离不开webpack的身影。作为现代前端开发的利器，webpack以其模块化构建的思想和丰富的插件体系，为前端项目搭建提供了强大的支持。本文将以循序渐进的方式，带你领略webpack与Vue.js携手构建精炼项目的过程。

搭建Vue项目

准备工作
- 安装Node.js和npm
- 全局安装webpack和vue-cli
新建项目
- 创建项目目录
- 初始化项目
安装依赖
- 安装项目所需依赖包
编写代码
- 创建Vue组件
- 编写Vue组件逻辑
打包项目
- 使用webpack打包项目
运行项目
- 启动本地开发服务器
- 访问项目

使用babel转换ES6语法

由于Vue.js大量使用了ES6语法，为了兼容更多浏览器，我们需要将ES6语法转换成ES5语法。

安装babel
- 全局安装babel-cli
- 在项目中安装babel-preset-es2015
配置babel
- 在项目中创建.babelrc文件
- 配置.babelrc文件

实例演示

// 项目目录结构
.
├── package.json
├── node_modules
├── src
│   ├── App.vue
│   ├── main.js
└── index.html

// package.json
{
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "vue-cli": "^2.9.6",
    "webpack": "^4.41.5",
    "webpack-dev-server": "^3.10.3"
  }
}

// .babelrc
{
  "presets": ["es2015"]
}

// App.vue
<template>
  <div>Hello, {{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'World'
    }
  }
}
</script>

// main.js
import Vue from 'vue'
import App from './App.vue'

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