I have noticed theese two methods for generating a new vue project:
npm init vue#latest
and
vue create <projectName>
Both seem to do the job, but very differently, they boundle very different packages.
Even tho you ovbiously modify the project to your liking, is ther a better start for my project requirements?.
The project i'm talking about, is going to be a single page web application using typescypt, ESlint and tailwind.
Also I have seen that the two methods do not just install unrelated software from one to the other, for example state management is handled by different libraries, and if I am not wrong Vite is the equivalent to Babel.
I am just starting with Vue, and frontend in general (tho i have used Angular), I am more prominently a backend dev, so i am not used to most of the software used here, and I do not really know what they are used for....
To ease finding the solution for others, as commented by Estus Flask, The oficially recomended by the vue devs currently is
npm init vue#latest.
This will set up a project using Vite and Rollup, wich is the currently recomended stack.
The other method is a deprecated one. as it gives you the old stack recomendation, Vue CLI and Webpack, this other stack is currently not enforced by vue devs.
Related
I'm building an application with vue-cli and I see that webpack config is not explicitly defined in my repo. It's hidden from us (although it can be changed). Default run dev script by vue-cli also use vue-cli-service instead of webpack.
I'm a questionning myself about the consequence of this.
Are we losing control over the webpack config?
Does new version could modify the base hidden config without us knowing it ?
Are vue-cli taking too much space and break some decoupling principle (since it will be more difficult to change from webpack to another bundler for example) ?
Thanks in advance.
Regards
(English not my primary language, sorry)
No modern framework's CLI (including Vue) is going to operate not according to best practices.
You can read on how to work with Webpack in Vue here: Link.
New versions with breaking changes are documented like so: Link.
An application built on any framework will depend on that framework, regardless of CLI use. Configurations built from the CLI can always be changed manually.
I have just started learning Vue.js. The author is using npm install -g vue-cli but it did not work with me because I got stuck with technical issues and I tried many solutions to fix it but I couldn't.
So I want to follow up with the author but using npm install -g #vue/cli. So Do you think I it will be easy to follow up with him? I mean are these different versions use different syntax?
The vue-cli package seems to be the old cli. The main difference between this version and Vue CLI 3 is that the webpack configuration used to be visible in the project as a build directory. To make changes to the build process you used to have to modify files within this folder. In Vue CLI 3 this has been moved to a helper that consumes a configuration file vue.config.js in the project. The structure of files has been slightly altered in this version of the CLI. Both work with Vue 2.x, so the way you write .vue files has not changed in any way.
Overall you should have little trouble following the tutorial, unless you are going to make changes to the build process. In that case, simply consult the official documentation or find a tutorial that is specifically for Vue CLI 3.
I am installing vue.js by CLI, and there i have found the command such as
vue init template-name project-name
Thus, I want to know that what are these templates and how many of these are there which will be appropriate for me?
Well, i looked up and researched and found that there are, different versions for templates in Vue, if you are using it by Cli.
Templates are such as:-
webpack
webpack-simple
pwa
simple
browserify
browserify-simple
in which webpack is used mostly. since it provides some css extraction and more features too
Generally developers who are new to any framework, mainly use webpack-simple that sets up all things for them regarding gulp, eslintrc and much more files.
I am using the Aurelia CLI for creating a SPA and it makes everything a lot easier compared to using Jspm.
However now we have some custom elements like: <my-custom-element></my-custom-element> that we want to package into an npm package so we can use it in multiple/other Aurelia CLI projects.
How would I go about creating it? I can't find any examples or documentation about this.
My guess is that I need to transpile my custom element files so that I end up with an npm package containing .js files (we use typescript) and the correct module loader synax (CommonJS?)?
My understanding is that I can't simply create an npm package that contains my my-custom.element.ts + my-custom-element.html file since it all needs to be transpiled, bundled and so on.
I am also guessing that I can't simply do an au build and use my bundles since that would bundle the entire SPA and not just my custom element files?
So what steps do I need to perform to create an npm package that contains a custom element that can be added to my Aurelia CLI project?
Any help or samples would be very welcome! Thank you!
There are a heap of ways you can do this. However, to keep things simple I am going to recommend the official Aurelia plugin skeleton for developing plugins, which you can get on Github here. If you venture into the src folder, you'll see a very basic example of a custom element and how you can make it global. The plugin skeleton uses Gulp for build tasks, which can be found in the build/tasks directory.
At present, you cannot use the Aurelia CLI to create a plugin. But in the future, you will most likely see this feature added into the CLI as it becomes more than just a CLI for creating applications.
I have a project generated with aurelia-cli with default options. It's built with au build, run with au run --env dev --watch and uses requirejs behind the scene. How do I add hot-module-reload into the mix?
There is no hot module reload support for Aurelia CLI at the moment. The team is working on a Webpack-based support, which should land soon, as stated in their latest update:
That's what our new hot module reload enables. We've got a preliminary version of this up and running and integrated into our forthcoming Webpack update. It enables editing Views, ViewModels, related components (such as ValueConverters and BindingBehaviors) and CSS without reloading the full website.
As you said, Aurelia CLI is currently using RequireJS for module loading. A support for Webpack is coming to Aurelia CLI sometime in future. When that happens, we should also get hot module reload support.
If you cannot wait, your options are to either switch to Webpack based solution or build your own support for it, which could be pretty hard to do.