Context: Vue.js stends out as a widely-used JavaScript frontend framework designed for creating interactive web interfaces. Its simplicity and flexibility make it a preferred choice among developers. This guide walks through setting up a basic Vue.js 2 project and launching your first Vue application.

Procedure:

1. Install Node.js

Vue.js requires Node.js and npm for its development environment. Make sure Node.js is installed on your system. You can download the latest version from the official Node.js website.

2. Install Vue CLI

The Vue CLI serves as an official scaffolding tool for Vue.js projects, allowing quick setup of Vue applications. Install it globally using this command:

npm install -g @vue/cli

3. Generate New Project

Use Vue CLI to generate a new Vue project. Execute the following command in your terminal (project name: my-vue-app):

vue create my-vue-app

4. Environment Setup

4.1. To integrate and use axios within a Vue 2 project, follow these steps:

4.11 Navigate to your Vue project's root directory in the terminal.

4.12 Install axios with the following command:

npm install axios

4.13 Create a request utility:

import axios from 'axios';
export default async function apiCall(config) {
    return axios(config);
}

4.14 Define API call functions:

import apiCall from "@/utils/apiCall";

export function fetchUser(queryParams) {
    return apiCall({
        url: '/api/userInfo',
        method: 'GET',
        params: queryParams
    })
}

4.15 Configure proxy settings:

Create file: .env.development

VUE_DEV_BASE_URL=http://10.0.0.0:8000
VUE_APP_PORT=8080
VUE_DEV_SERVER=http://10.0.0.0:8000

Configure vue.config.js

module.exports = {
    publicPath: '/',
    devServer: {
        port: process.env.VUE_APP_PORT,
        disableHostCheck: true,
        proxy: {
            "^/api": {
                target: process.env.VUE_DEV_SERVER,
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/",
                }
            },
        }
    },
}

4.2. To add Element UI to a Vue 2 project, perform the following actions:

4.21 Install the element-ui package:

npm i element-ui -S

4.22 Add the following code to main.js:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';

Vue.use(ElementUI)
Vue.config.productionTip = false 

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.3. To incorporate Echarts into a Vue 2 project, proceed as follows:

4.31 Install the ECharts library:

npm install echarts --save

4.32 Implement ECharts in a component:

<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>
 
<script>
import echarts from 'echarts'
 
export default {
  name: 'ChartComponent',
  mounted() {
    // Initialize ECharts instance
    var chartInstance = echarts.init(this.$refs.chartContainer);
 
    // Define chart configuration and data
    var chartOptions = {
        title: {
            text: 'ECharts Example'
        },
        tooltip: {},
        xAxis: {
            data: ["Shirt","Wool Sweater","Chiffon","Trousers","Heels","Socks"]
        },
        yAxis: {},
        series: [{
            name: 'Sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
 
    // Apply configuration and data to the chart.
    chartInstance.setOption(chartOptions);
  }
}
</script>

4.33 For using Less CSS:

npm install less less-loader --save-dev

5. Routing Configuration

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }
]

const router = new VueRouter({
  routes
})

export default router

6. Launch Application

Navigate to your project folder and execute the following command to start the development server:

cd my-vue-app
npm run serve

This starts a development server on the default port (usually 8080), automatically opening your browser to view the app. Access your application at http://localhost:8080.

7. Modify Application

Locate the App.vue file in the src directory, which serves as the root component of your app. Begin modifying your application by adding components, styles, and features.

8. Build Application

Once you're satisfied with your application, build the production-ready version using:

npm run build

This generates an optimized production build inside the dist directory.