Creating a basic project template with Vue, TS, and nodeJS? - javascript

I’m trying to figure out how to use vue cli. I have an idea for a project and would like to use the follow tech: vueJS, Typecript, and nodeJS(expressJS, socket.io)
How do I go about creating a template with all the config/json/vue files. There are just so many files and they need to be in specific places it gets confusing!
Does anyone know if a template for these types of projects? Or better yet a way to generate them?

EDIT: The way to create a new project template with Vue-CLI is by using the vue create command. You can set your own techstack from there. If you need a more opinionated template, you can use the resources below.
Most well-known and detailed vue boilerplate around:
https://github.com/chrisvfritz/vue-enterprise-boilerplate
If it's too advanced/extensive for your project, there are plenty of examples/templates here:
https://github.com/vuejs/awesome-vue#examples

Related

Is react easy to integrate with already-created html and css files

I'm working with some developers to create a website, and I want to know if React will work if I hire someone to create the html and css first, and then have another person integrate react with those templates
Is react integratable in this situation, or does react have to be used from the get go? I am a python programmer, so I have no clue how react works lol
The main advantage of React is being able to generate HTML based on JavaScript code, if the HTML code is already done I'd find it kind of pointless to use React.
I am just a 2nd year student but I'd recommend to use React from the get go.
It should technically be possible to integrate react with already existing html/css files, just like you can manually alter the html and css files in your react project’s public folder, but you dont really provide a good reason for doing so. It might be easier, and more sustainable for maintaining the project to simply move your existing Html into a react project. If you dont have an actual good reason to use react for this project (like for example having primarily react-experienced developers on the team or needing to use specific react libraries and functionalities), there is no real harm in developing a website with plain html, css, and js.

JS: How to serve up vanialla JS, HTML and CSS without static html pages?

I want to prototype a quick app but don't want to go down the road of using a framework like React or Vue. I'd also prefer not just creating an html file and a js file that is imported within the html.
Is there a way I can make use of npm packages, SCSS and still write vanilla Javascript without the usage of a framework?
Without using a framework, the most straightforward way to using NPM packages in the browser would be using Browserify. Check out https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072 for instance.
Otherwise you can use Gulp,which helps running Browserify, SCSS etc, and use BrowserSync to refresh on changes. But I personally wouldn't go this way: while this is a great way to understand how stuff works, it takes a bit of time to setup properly, and isn't used that much anymore.
My advice is:
Go with Webpack or Rollup. Seems harder to grasp than Gulp but at the end of the day, learning Webpack is very useful (much more than learning Gulp), for instance if you happen to work on a project that uses it (and there are so many).
Use a backend framework that bundles all this kind of stuff. Like Laravel which uses Mix - you can even use Mix without Laravel but there will be a point at which you'll probably need some static data, some routing, interactions... So if you need something more than just hardcoded JSON data, go with a framework. Laravel is great for prototyping but it's not the only one.

Independent VueJS components with webpack?

I made some SPA using vuejs-templates/webpack and that's ok. But now I am developing a website, almost everything is static, so there's no need to be a SPA. I already made the pure html/css layout.
Now I will make some pages with forms and dynamic content, I would like to use vue components inside these pages.
Tell me which of this ideas is the best or give me a better option:
Multiple entries in webpack: I don't know very well how to do it, but I guess I can create a webpack project by scratch and render multiple entries that I include in the pages I want.
Use browserify: I didn't want to do this, but sounds like a good option... I could use vueify to render *.vue components
Use Nuxt: I never tried, but seems a good option too, I could make a "SPA" with SSR.
Tell me if you have another idea.
Thank you
Don't rule out just referencing Vue as a script file. No bundle, no compilation step. You lose single file components, but you can get something very like them by using js template literals. If your needs are simple and you don't want to impact on the rest of the site, this could be a fine solution.

Angular2.JS files with d.ts files WITHOUT npm Visual Studio 2015

Does anyone know of a recent blog post or tutorial on which angular 2 .js files along with the appropriate d.ts files I need so I can just drop them into an existing VS solution without using NPM? I see that I can get the angular files here, but not sure which ones I need. According to the Angular docs, I need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do., but again, when I look thru a sample Angular app, don't know which d.ts files I need.
I can't stand bloat and clutter. Below is a brand new asp.net core on .net 4.6 on the left, the same thing on the right after following this blog:
I can't stomache having to add over 13,000 files to get ahold of maybe 20?, 30? files.
Maybe I'm being too OCD about this, but right now I'll take any suggestions to avoid that bloat, even going with another front-end framework. I've briefly looked at Aurelia, which I like, but again, NPM. Not sure React is appropriate.
My business domain includes Category, which is a self-referencing class/table, and I'm after an intuitive UI where the user can quickly create their own Category structure without having to do a bunch of post-backs to the server. Seems with either Angular2 or Aurelia, I'd only need a couple of Components to accomplish this in the browser.
I know Angular 1.5 added Components, and I may explore that if need be. From what I understand about React, it's not for data management.
So to reiterate my questions, can I get just the Angular2 files along with their d.ts files so I can code in typescript? If not, the same question for Aurelia. And if not, any way that I can keep bloat down yet still write some elegant front-end code.
Any help will be appreciated
Ok so for Development purposes yes your Angular 2 stuff will be massive (its annoying but necissary) however as I am sure you know, once you build your angular app for production (using angular cli for example) it cuts all those 40,000 files down to about 10. for example this is my application before and after production...
and after
So I would guess you want to build your angular stuff out first and then drop it in you application

Recomended Code/Project Structure for angularjs

I am newbie to angularjs and i have to know the code structure and directory structure in angularjs
My directory Structure
My Doubts are
1)I want to know is the above directory structure is correct
2)Is it advisable to use controller for every individual module separately
3)Is correct way to write all run ,config and declaring module plugin in the same file (ex:app.js)
There is most widely accepted style guide for angularjs projects even angular team support this style guide by john papa.
He is the active member in the angular core community.
He has created style guide for angular1 and angular2.
even you can use
yeoman tool to get scaffolding done for you and they follow these style guide
angular project generator.
follow the instruction, after that it will be like
yo angular [app-name]
I want to know is the above directory structure is correct.
Its totally depends on you how would you organize you project setup, there is nothing hard and fast rule that you have to follow to setup your project structure. well if we talk about your structure it seems to be good setup you have established except images folder i would prefer image folder in the asset folder. otherwise your setup seems to be fine.
is it advisable to use controller for every individual module separately
Yes, its good practice to use a separate controller for every module, and categorize them as per you folder structure.
although there are a lot of projects are there from where you can easily got your all answers, also there are many popular repository's are there which describe the best folder structure for the project setup you can also refer to most popular style guide of angular here -
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Categories

Resources