【发布时间】：2019-09-17 10:54:53
【问题描述】：
我在使用 SSR 在 HTML + JS 库中开发的传统多页面应用程序方面具有工作知识，但我是现代 Web 开发的新手。我目前正在学习 Vue JS（最新版本），并且在线观看了一些教程视频。我观看的视频教用纯 HTML + <script> 设置编写 Vue JS 网页，而不是使用 Vue CLI 程序创建的项目设置。
现在，我想知道 package.json 文件中需要哪些 NPM 依赖项才能将项目设置从单个 HTML + Vue CDN 脚本 src 更改为设置了文件夹结构的项目设置by 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 开发新手来说很容易理解？
【问题讨论】：
标签： javascript node.js web vue.js npm