Vue.js vs Angular — what’s the main difference?
- Both are frameworks, but Angular provides a lot of built-in features and uses TypeScript.
- And what about Vue.js vs React?
- Vue.js is a framework, and React is a library.
- First, you need to set up a Vue.js development environment.
- Install Node.js globally on your machine.
Type this command in your terminal:. Install Vue CLI, or the Vue Command Line Interface, globally on your machine:.
Production Build and Deployment
Vue CLI provides build setups including hot-reload, lint-on-save, and production-ready builds. Use vue create to create a live development server, run your Vue application, automatically compile Vue and Babel, with SCSS support (and Linter if you wish).
If you’re familiar with React: vue create is the equivalent to create-react-app.
And vue-app is the name of the folder that will contain your Vue application. Choose features for your project.
You’ll be given a set of options. Use an arrow on your keyboard to select “Manually select features”:.
Then press Enter. You will see another set of options. Choose the features needed for your project with the keyboard arrow:. Press Enter and select a version of Vue.js (we’ll use Vue.js 2):.
Finish the setup and wait for your project to be created. Launch your Vue app by running the following code in your terminal:. After that, you’ll see the following message:.
Your Vue.js project is available at http://localhost:8080/.
Follow this link, and you’ll see the Vue default page:. Open your folder where you installed the environment (mine is in C:\Users\Shark\vue-app) and you’ll see the following file structure:.
- Your general HTML file is public/index.html.
- You’ll import files in src/main.js and write your Vue/JS code in src/App.vue as well as in other .vue files you’ll create later.
- See any changes you made at http://localhost:3000/.
Open your src folder, create a new folder named “styles” there, and create style.scss inside it. For our future app, we’ll need to delete src/components/HelloWorld.vue and add there two files for two Vue.js components: src/components/Question.vue and src/components/Result.vue.
The final file structure will look like this:. App.vue will manage your app’s general logic, and Question.vue and Result.vue will display two main blocks of our app.
- We’ll explain the app structure in the section “Vue.js Example”.
- It’s recommended to install Vue.js DevTools, which is a Chrome extension for Vue.js.
- It will help you inspect a Vue.js tree, the component hierarchy, state, props, and more.
This extension is also available for Firefox. You can write CSS rules in Vue.js component files, inside the