Question

我对使用SSR在HTML + JS库中开发的常规多页应用程序有一定的了解，但是我是现代Web开发的新手。我目前正在学习Vue JS（最新版本），并且已经在线观看了一些教程视频。我看过的视频教了如何用纯HTML + <script>设置而不是由Vue CLI程序创建的项目设置来编写Vue JS网页。

现在，我想知道 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的官方文档中指出：

“安装”页面提供了更多安装Vue的选项。注意：我们不建议初学者从vue-cli开始，尤其是在您还不熟悉基于Node.js的构建工具的情况下。

我是否可以知道工作的依赖性（或者，如果这是Node.js项目的本质，它就是这种方式诞生的），以及开发人员的任何文档或报价对于像我这样的Web开发新手来说都很容易理解？

Answer 1

但是，是什么使HTML文件从文件夹/子文件夹/子文件夹中加载脚本？

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

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

模块化Vue需要什么NPM依赖项？

1 个答案: