ronniesan / vue-browser-sfc Goto Github PK

It is not clear to the noob that this section is going to use a Hello, world (user clicks that and it becomes) hello, foobar example. Henceforce: HW->HFb.

That's a great example of the tech, but it is unclear that this is an example. "based on this template" (inline) is not enough because it is unclear that "this" is the HW->HFb component.

Per reusable .vue component, the end-user has choices as place gen'd JS:

• published in a local package repository
• back-into source control after generation
• only from dist/ folders absolutely
• only from dist/ folders relatively

Edit: add what pushed.

It's a typo, right?

--env.file=../../src/Foo.vue leaves the implict src/ folder behind and traverses somewhere else in the file system. Interestingly that then leaves the Foo.js file adjacent to the original Foo.vue file. Normally without the ../.. traversal to somewhere else, this tech leaves the .js result in dist/

I'm not against the way it works by accident, it's just that I didn't expect that.

https://www.npmjs.com/package/module-alias

For a decomposed application design?

• Paul

For example, https://github.com/showonne/vue-date is an example of a reusable .vue component. There's only a few changes that would need to be made to that project/repo for it be able to make the RonnieSan/browser-component .js version of the same ready for use in the way you describe. That's for the change the source code route.

There's also a mode of operation for RonnieSan/browser-component that could point at the published versioned component too, from https://github.com/showonne/vue-date/releases:

https://github.com/showonne/vue-date/archive/v1.1.7.zip ~ vue-date-1.1.7/src/Datepicker.vue

thanks.

Section "Create a new Vue project" doesn't end with "try this in your browser now".

Therefore section "Create and compile component" is almost like a step after, when it is really an alternate to he first section for the end-user educating themselves. It itself should end wthj a "try this in your browser now .. .. etc".

Or maybe that's assumed, even for noobs.

when i build vue file use webpack --env.file=example.vue in windows, the build progress is very slow,block, command return message:
[4] ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-3835be54","scoped":true,"sourceMap":false}!./node_modules/less-loader/dist/cjs.js!./node_mod
ules/vue-loader/lib/selector.js?type=styles&index=0!./src/example.vue 1.7 KiB {0} [built]
[] 85ms -> [] 711ms -> factory:383ms building:7ms = 1186ms

then, halt. i must ctrl+c to terminal the build command.

there where some security issues with old packages, to solve these, breaking changes where needed.
The only file that had comflicting depencies was one that didn't seem to be used (it got imported but never configured)

changing the depencies to these made everything work again for me:

  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.2.5",
    "autoprefixer": "^8.6.5",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "file-loader": "^1.1.11",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "string-replace-webpack-plugin": "^0.1.3",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.0.0"
  },
  "dependencies": {
    "core-js": "^2.6.9",
    "vue": "^2.6.10"
  },

Love this project.
Exactly what I was looking for to reuse components in a heterogeneous frontend-situation.

Is it possible to not only watch and compile 1 file at a time but to make webpack watch all files in the src directory and compile if a change occurs?

Best

"Single File Components" is the official name for the .vue component system, but it is not very googlable. Fixing that is a different conversation.

I'm wondering if a different name for this is due though:

How about a repo rename to:

• RonnieSan/vuecompose.js
• RonnieSan/DotVueToJs
• RonnieSan/.vue.js
• RonnieSan/.vue2js

And for the gen'd file? How about a file suffix:

• my-component.vue.js

(.vue)

dist/my-component.js

Hi there,

Thanks for this technique. I would like to understand how different this is from the official Vue-CLI instant prototyping option - https://cli.vuejs.org/guide/prototyping.html#vue-build?

Would appreciate your clarification. Thanks!

... and that seems like it'd be needed for larger applications needing this tech.

I tried command separated within the --env.file line, but that doesn't work.

Most of the time I use vue-browser-sfc when I include Vue in very basic/simple websites. Some of those websites need to be compatible with IE 11. Since IE 11 is not supporting arrow functions etc. it would be neat if vue-browser-sfc would make the compiled JS files IE11 ready out of the box. At the moment I always have to manually correct the not supported syntax after I compiled the file.