Vue.js 中如何实现脚手架搭建？-FunTeaLearn Online Web Tutorials

前言

Vue.js 是当今前端开发中非常流行的一种 JavaScript 框架。它采用了 MVVM 模式，拥有轻量级、高效、易学易用等优点，使得 Vue.js 在开发中变得越来越受欢迎。为了方便所有开发者在开发过程中快速高效的启动项目，我们需要实现一个好用的脚手架。

什么是脚手架？

脚手架是指一些固定好的模板，可以帮助我们快速创建项目基础模板，避免了重复劳动。

对于 Vue.js 开发者，一个好的脚手架能够快速生成项目框架，省去很多初始化的繁琐工作。

如何实现脚手架搭建？

为了让大家更好的了解如何实现 Vue.js 脚手架搭建，我们有以下两种实现方式：

方式一：使用 vue-cli

vue-cli 是 Vue.js 官方提供的一个脚手架工具，通过它我们可以快速创建一个基于 Vue.js 的项目。同时，它还提供了许多方便快捷的脚手架配置选项，可以根据开发者的需求定制。

下面以 vue-cli 3.x 来进行详细的介绍教程。

安装 vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个新项目

在控制台输入以下命令

vue create my-new-app

其中 my-new-app 是你想要创建的项目名称。

此时，vue-cli 会询问你的项目信息和配置，按照提示依次填写即可。如果你对这些选项不是很熟悉，可以选择 default 或者 preset。

创建完成后，输入以下命令即可启动项目：

cd my-new-app
npm run serve

此时，在浏览器中访问 http://localhost:8080 即可看到我们的 Vue.js 应用程序已经成功运行了。

方式二：手动搭建脚手架

另一种方式是手动搭建脚手架，虽然过程会相对繁琐一些，但是能够更好的帮助我们了解 Vue.js 应用的基本构建过程与原理。

下面基于 webpack 手动搭建一个 Vue.js 项目。

步骤一：创建项目

创建一个新目录并进入：

mkdir vue-scaffold
cd vue-scaffold

然后，初始化 npm：

npm init

接下来，添加必要的依赖：

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

这里我们使用了 Webpack 和 Webpack Dev Server 两个工具。同时，我们还需要将它们保存为开发依赖。

我们使用以下代码来创建项目结构：

// www.javascriptcn.com code example
.
|-- dist
|   `-- index.html
|-- package-lock.json
|-- package.json
|-- src
|   |-- App.vue
|   `-- main.js
`-- webpack.config.js

其中，我们把应用程序的代码存放在 src 文件夹中，使用 webpack.config.js 来配置构建过程，设置构建的目标文件夹为 dist。

然后，我们需要定义 index.html 文件，它将作为浏览器上显示的我们的应用程序的入口点。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue App</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="./bundle.js"></script>
    </body>
</html>

步骤二：配置 webpack

我们需要修改 ./webpack.config.js文件来告诉 Webpack 如何处理 Vue.js 文件格式。

// www.javascriptcn.com code example
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
          test: /\.vue$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'vue-loader',
          options: {
            // ...
          }
      },
      // 对其他文件使用file-loader
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
      // make sure to include the plugin!
      new VueLoaderPlugin()
  ],
  devServer: {
    contentBase: './dist'
  }
};

在此配置文件中，我们使用了 Webpack 中的 vue-loader 来处理 Vue.js 开发时的 .vue 文件格式。

步骤三：创建主应用程序

接下来我们应该为应用程序创建一个入口点。

打开 ./src/main.js 文件，创建我们应用程序的基本结构。

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

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

步骤四：创建组件

打开 ./src/App.vue 文件，创建我们的第一个 Vue.js 组件。

// www.javascriptcn.com code example
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

步骤五：运行项目

运行以下命令以启动开发服务器：

npm run dev

然后打开浏览器并访问 http://localhost:8080。您应该在页面上看到“Hello World!”。

总结

通过以上两种实现方式，我们可知道，使用 vue-cli 会比使用手动搭建方式更方便、快捷，但同时手动搭建的方式也更加宏观，可以学习到更多原理与细节的实现。

总而言之，脚手架是一个前端开发中至关重要的工具，能够有效地提高开发效率，缩短项目启动过程，为开发者提供了很大的便利性。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6454d28c968c7c53b0893079

Vue.js 中如何实现脚手架搭建？

前言