前提：系统安装好node，如下

node -v
v14.19.1
npm -v
6.14.16

环境：Mac

搭建资料：《Node.js+Vue.js项目开发基础 从入门到项目上线》张帆

结果（端口不稳定）：http://localhost:63342/node-helloworld2/dist/index.html

代码目录：

helloworld2
|-package.json
|-helloworld.vue
|-index.js
|-webpack.config.js
|-dist
   |-build.js
   |-index.html

1、创建新文件夹为项目根目录

2、cd到根目录上npm init命令初始化设置项目

设置如下几项，直接enter全都默认下去也可（或命令 npm init -y跳过设置）

package name: (helloworld2) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

3、根据生成的package.json，找到默认入口文件名 index.js

{
  "name": "helloworld2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

4、根目录下创建 index.js

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

5、cd到根目录下用命令启动文件

node index.js

6、cd到根目录下安装插件

npm install vue@2.6.10
...
npm install webpack@4.39.3 --save-dev
...

package.json文件自动更新为

{
  "name": "helloworld2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10"
  },
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}

7、新建webpack.config.js文件，配置Webpack打包工具，指定入口文件并引入vue-loader

const path = require('path');
const VueLoaderPlugin = require('vue-loader/liblplugin');

module.exports = {
    entry: path.join(__dirname, 'index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'build.js'
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
        ]
    }
}

8、新建helloworld.vue，在index.js中引入、获取页面中的body节点

<template>
    <div>
        <p></p>
    </div>
</template>

<script>
    export default {
        name: "Hello",
            data(){
            return {
                text: 'HelloWorld!!!'
            }
        }
    }
</script>

9、命令行中执行

本命令可测试是否打包成功及编译是否通过

webpack --config webpack.config.js

10、将上条命令加入到package.json

{
  "name": "helloworld2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10"
  },
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}

11、命令行中执行

npm run build

12、生成dist文件夹

文件夹中已生成编译好的build.js文件，该文件夹下新建index.html，并引入build.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="build.js"></script>
</body>
</html>

13、在浏览器中打开index.html