javascript - 模块化 Vue 需要哪些 NPM 依赖项？

Question

我拥有使用 SSR 在 HTML + JS 库中开发的传统多页面应用程序的工作知识，但我对现代 Web 开发还不熟悉。我目前正在学习Vue JS(最新版本)，并且在网上观看了一些教程视频。我观看的视频教如何用纯 HTML + <script> 编写 Vue JS 网页设置而不是由 Vue CLI 程序创建的项目设置。

现在，我想知道 package.json 文件中需要哪些 NPM 依赖项才能将项目设置从单个 HTML + Vue CDN 脚本 src 更改为具有 vue-cli 设置的文件夹结构的项目设置，就像其他 CLI 创建的现代项目文件夹结构一样，例如Angular 和 React。

运行后vue init <template name>我得到一个 package.json 如下所示:

{
    ...,
    "scripts": {
      "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
      "start": "npm run dev",
      "lint": "eslint --ext .js,.vue src",
      "build": "node build/build.js"
    },
    "dependencies": {
      "vue": "^2.5.2",
      "vue-router": "^3.0.1"
    },
    "devDependencies": {
      "autoprefixer": "^7.1.2",
      "babel-core": "^6.22.1",
      "babel-eslint": "^8.2.1",
      "babel-helper-vue-jsx-merge-props": "^2.0.3",
      "babel-loader": "^7.1.1",
      "babel-plugin-syntax-jsx": "^6.18.0",
      "babel-plugin-transform-runtime": "^6.22.0",
      "babel-plugin-transform-vue-jsx": "^3.5.0",
      "babel-preset-env": "^1.3.2",
      "babel-preset-stage-2": "^6.22.0",
      "chalk": "^2.0.1",
      "copy-webpack-plugin": "^4.0.1",
      "css-loader": "^0.28.0",
      "eslint": "^4.15.0",
      "eslint-config-standard": "^10.2.1",
      "eslint-friendly-formatter": "^3.0.0",
      "eslint-loader": "^1.7.1",
      "eslint-plugin-import": "^2.7.0",
      "eslint-plugin-node": "^5.2.0",
      "eslint-plugin-promise": "^3.4.0",
      "eslint-plugin-standard": "^3.0.1",
      "eslint-plugin-vue": "^4.0.0",
      "extract-text-webpack-plugin": "^3.0.0",
      "file-loader": "^1.1.4",
      "friendly-errors-webpack-plugin": "^1.6.1",
      "html-webpack-plugin": "^2.30.1",
      "node-notifier": "^5.1.2",
      "optimize-css-assets-webpack-plugin": "^3.2.0",
      "ora": "^1.2.0",
      "portfinder": "^1.0.13",
      "postcss-import": "^11.0.0",
      "postcss-loader": "^2.0.8",
      "postcss-url": "^7.2.1",
      "rimraf": "^2.6.0",
      "semver": "^5.3.0",
      "shelljs": "^0.7.6",
      "uglifyjs-webpack-plugin": "^1.1.1",
      "url-loader": "^0.5.8",
      "vue-loader": "^13.3.0",
      "vue-style-loader": "^3.0.1",
      "vue-template-compiler": "^2.5.2",
      "webpack": "^3.6.0",
      "webpack-bundle-analyzer": "^2.9.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0"
    },
    "engines": {
      "node": ">= 6.0.0",
      "npm": ">= 3.0.0"
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ]
}

在此 NPM 项目中，不需要 <script src> CDN 链接，但我仍然能够使用所有 Vue 功能。我知道 JavaScript 文件已包含在 node_modules 之一中文件夹。但是是什么让 HTML 文件从文件夹/子文件夹/子子文件夹加载脚本呢？我在项目中没有找到任何指向 JS 文件的文件路径。

在Vue的官方文档中，它指出:

The Installation page provides more options of installing Vue. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.

我可以知道哪些依赖项可以完成这项工作(或者如果这是 Node.js 项目的本质，那么它就是这样诞生的)以及来自开发人员的任何文档或引用，这些文档或引用对于像我这样的 Web 开发新手来说很容易理解？

Answer 1

But what makes the HTML files to load the script from the folder/sub-folder/sub-sub-folder?

我认为您正在寻找的是 webpack config - 我建议您在通过 Vue-CLI 创建空白项目时手动选择选项以在专用文件中设置每个配置(例如 webpack 的配置将位于具有不同 .config.js 文件的 webpack 文件夹中(分别用于开发、通用和生产)。Webpack 会为您解析项目中使用的所有文件路径和依赖项，并将它们捆绑到一个(或多个部分块)JavaScript 文件中。

关于您的主要问题 - 您在依赖项部分中看到的内容是将包含在最终应用程序代码中的内容，并且是使其正常工作所必需的。尽管如此，您在 devDependency 部分下的内容是构建/编译/转换/缩小等项目所必需的，因此最终它将正确解析所有依赖路径，编译样式(例如从 scss 到 css)以及所有丑陋的 + 缩小的内容。