In early full-stack development, communication overhead was high, roles were fuzzy, and it was tough to manage or extend projects.

Today’s standard is frontend-backend separation, driven by API documentation.

Frontend-Backend Separation

Frontend sends parameters and parses response data based on API docs. Backend receives parameters and responds as per API docs.

Dev Workflow: Requirements Analysis -> API Definition (API Docs) -> Parallel Frontend/Backend Dev (following specs) -> Testing -> Frontend/Backend Integration Testing.

You can use YApi for testing before API development is complete.

Frontend Engineering

It’s about standardizing frontend dev tools, tech, processes, and experience for enterprise-level projects.

• Modularity: JS, CSS
• Componentization: UI structure, styles, behavior
• Standardization: Directory structure, coding, APIs
• Automation: Build, deploy, test

Vue CLI

Vue-cli is the official scaffold provided by Vue, used to quickly generate a Vue project template. It requires NodeJS.

Vue-cli offers the following features:

• Unified directory structure
• Local debugging
• Hot Reloading: No need to restart the app after code changes; the latest program loads automatically.
• Unit testing
• Integrated build and deployment

NodeJS

Install from the official website, then configure npm package location.

1
2
3

npm config set prefix "path"
# Get location
npm config get prefix

Switch npm to the Taobao mirror.

1

npm config set registry https://registry.npm.taobao.org

Install Vue-cli

1

npm install -g @vue/cli

Verify successful installation

1

vue --version

Vue Project

You can create projects via CLI or a graphical interface.

1
2
3
4

# Command line
vue create project-name
# Graphical interface
vue ui

Directory Structure

Root directory:

• node_modules: Contains all project dependencies.
• public: Static project files.
• src: Project source code.
• package.json: Basic module info, required dev modules, and version details.
• vue.config.js: Stores Vue configurations, such as proxy and port settings.

Inside the src folder:

• assets: Static resources.
• components: Reusable components.
• router: Routing configuration.
• views: View components (pages).
• App.vue: The entry page (root component).
• main.js: The entry JavaScript file.

Running the Project

In VS Code, you can run it directly from the terminal panel.

From the command line:

1

npm run serve

Changing the Port

In the vue.config.js file:

1
2
3
4
5
6
7

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7589 // Port number
  }
})

Development Workflow

The entry file is src/main.js. Here’s the default content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App) // Creates a virtual element from the imported App
}).$mount('#app') // Mounts to #app

The import keyword above means importing components; conversely, export means exporting them.

The Vue object code above is similar to:

1
2
3
4
5
6

new Vue({
    el: "#app",
    // router: router,
    router, // Can be omitted when key and value are the same
    render: h => h(App)
})

Vue component files end with .vue. Each component consists of three parts: <template>, <script>, and <style>.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
    <div>
        <!-- HTML tags -->
    </div>
</template>

<script>
    // JavaScript
    export default{
        data(){
            return{
                // Data model
            }
        },
        methods:{
            // Methods
        }
    }
</script>

<style>
    /* CSS styles */
</style>