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

我有使用SSR在HTML+JS库中开发的传统多页应用程序的工作知识，但我对现代web开发还是新手。我目前正在学习Vue JS（最新版本），并在线观看了一些教程视频。我观看的视频教授如何在普通的HTML+

设置中编写Vue JS网页，而不是使用Vue CLI程序创建的项目设置

现在，我想知道将项目设置从单个HTML+Vue CDN脚本src更改为具有由

Vue cli

设置的文件夹结构所需的package.json文件中的NPM依赖项，就像其他cli创建的现代项目文件夹结构一样，例如Angular和React

运行

vue init

后，我得到一个包.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"
    ]
}

{
...,
“脚本”：{
“dev”：“webpack dev server--inline--progress--config build/webpack.dev.conf.js”，
“开始”：“npm运行开发”，
“lint”：“eslint--ext.js、.vue src”，
“build”：“node build/build.js”
},
“依赖项”：{
“vue”：“^2.5.2”，
“vue路由器”：“^3.0.1”
},
“依赖性”：{
“自动刷新器”：“^7.1.2”，
“巴别塔核心”：“^6.22.1”，
“babel eslint”：“^8.2.1”，
“babel helper vue jsx合并道具”：“^2.0.3”，
“巴别塔加载器”：“^7.1.1”，
“巴别塔插件语法jsx”：“^6.18.0”，
“巴别塔插件转换运行时”：“^6.22.0”，
“babel插件转换vue jsx”：“^3.5.0”，
“巴别塔预设环境”：“^1.3.2”，
“babel-preset-stage-2”：“^6.22.0”，
“粉笔”：“^2.0.1”，
“复制网页包插件”：“^4.0.1”，
“css加载器”：“^0.28.0”，
“eslint”：“^4.15.0”，
“eslint配置标准”：“^10.2.1”，
“eslint友好格式设置程序”：“^3.0.0”，
“eslint加载程序”：“^1.7.1”，
“eslint插件导入”：“^2.7.0”，
“eslint插件节点”：“^5.2.0”，
“eslint插件承诺”：“^3.4.0”，
“eslint插件标准”：“^3.0.1”，
“eslint插件vue”：“^4.0.0”，
“提取文本网页包插件”：“^3.0.0”，
“文件加载器”：“^1.1.4”，
“友好错误网页包插件”：“^1.6.1”，
“html网页包插件”：“^2.30.1”，
“节点通知程序”：“^5.1.2”，
“优化css资产网页包插件”：“^3.2.0”，
“ora”：“^1.2.0”，
“portfinder”：“^1.0.13”，
“postcss导入”：“^11.0.0”，
“邮政编码加载器”：“^2.0.8”，
“邮政编码url”：“^7.2.1”，
“rimraf”：“^2.6.0”，
“semver”：“^5.3.0”，
“shelljs”：“^0.7.6”，
“uglifyjs网页包插件”：“^1.1.1”，
“url加载器”：“^0.5.8”，
“vue加载程序”：“^13.3.0”，
“vue样式加载程序”：“^3.0.1”，
“vue模板编译器”：“^2.5.2”，
“网页包”：“^3.6.0”，
“网页包包分析器”：“^2.9.0”，
“网页包开发服务器”：“^2.9.1”，
“网页包合并”：“^4.1.0”
},
“发动机”：{
“节点”：“>=6.0.0”，
“npm”：“>=3.0.0”
},
“浏览者”：[
"> 1%",
“最后两个版本”，
“不是我
但是是什么让HTML文件从文件夹/子文件夹/子文件夹加载脚本的呢

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

关于你的主要问题-你在
依赖项
一节中看到的是最终应用程序代码中包含的内容，是使其正常工作所必需的。不过，你在
依赖项
一节中看到的内容是构建/编译/传输/缩小等所必需的。因此，你的项目最终将具有所有依赖项正确解析路径，编译样式（例如从SCS到css），并对所有内容进行UGLYD+精简

但是是什么让HTML文件从文件夹/子文件夹/子文件夹加载脚本的呢

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

关于你的主要问题-你在
依赖项
一节中看到的是最终应用程序代码中包含的内容，是使其正常工作所必需的。不过，你在
依赖项
一节中看到的内容是构建/编译/传输/缩小等所必需的。因此，你的项目最终将具有所有依赖项正确解析路径，编译样式（例如从SCS到css），并对所有内容进行UGLYD+精简