使用VueJS,VuelidateJS和NodeJS / Express时的项目结构

时间:2018-11-02 15:30:27

标签: javascript node.js express vue.js es6-modules

我的Web开发主要是使用NodeJS的嵌入式设备的Intranet网站和Web前端。

我当前的结构是将所有内容打包在一个NPM软件包中。我在Nginx后面运行NodeJS,并让Nginx直接从public提供css / image / client-side-javascript文件。

我开始使用VueJS和Vuelidate,两者都使用现在的ES6模块系统-例如import { required, minLength } from 'vuelidate/lib/validators'

虽然我(以hackerly的方式)使用当前结构进行了这些工作,但我认为现在是进入Javascript构建系统/捆绑程序领域的时候了。

如果我使用VueJS的WebPack首选选项,应该如何更改代码的结构?

  • 我应该为前端使用一个NPM软件包(由vue-cli init生成),为Express后端应用使用另一个NPM软件包吗?

  • 我应该将Express App放入生成的Vue前端程序包中吗?

  • 我应该使用browserify来完成WebPack的工作并保持我现有的结构吗?

  • 还是其他东西?

1 个答案:

答案 0 :(得分:1)

我不确定您为什么打算将JavaScript代码放入其他软件包中。如果您有应用程序,则可以将原始JavaScript文件以及构建脚本保存在其中。有人应该能够签出您的应用程序并能够对其进行构建。

如果您想开始使用构建系统,那么一个不错的“桥梁”可能是使用Mix,这是Laravel创建的用于构建前端资产(例如Sass和JavaScript)的项目。它在后台使用Webpack,但反过来又公开了一个更加用户友好,流畅的API。

如果沿着这条路线走,则可以将原始JavaScript文件放在 lib / src / 目录中。然后,您可以使用Mix像这样编译这些组件:

mix.js('lib/your-entry-point-script.js', 'public/js/app.js');

您的入口点脚本只是require包含所有其他脚本和组件的脚本,以及您要“构建”的脚本。然后,Mix将对其进行编译,并将生成的脚本放在 public / js / app.js

Mix本身只是一个npm软件包,因此您所要做的就是npm install laravel-mix --save-dev

您可以在https://laravel.com/docs/5.7/mix

了解更多有关Mix的信息。