Here we mainly talk about the structure and technical architecture of the project, which is convenient for us to start development quickly

1. Technical structure of the project

• the project mainly adopts "vue + webpack + vant"
• the project is mainly initialized with}vue-cli3# scaffold, and then the structure is adjusted according to the needs of the project

vuejs feature
• vuejs small size
• low learning costs
• rapid submission of development efficiency
• vuejs ecological perfection

webpack feature
• modularity
• load on demand
• rich plug-ins
• rich configuration

vant characteristics
• provide more than 60 high-quality components to cover various scenarios on the mobile terminal
• excellent performance, the average volume of components is less than 1kb (min+gzip)
• unit test coverage 90% +, providing stability guarantee
• complete Chinese and English documents and examples
• support Vue 2 & Vue 3
• support on-demand introduction
• support theme customization
• support internationalization
• support TypeScript
• support SSR

2. Project structure

│  .browserslistrc 
│  .editorconfig
│  .eslintrc.js          // eslint configuration file
│  .gitignore            // git submit ignore configuration
│  babel.config.js       // babel profile
│  package-lock.json     // Dependent cache file
│  package.json          // package configuration file
│  postcss.config.js     // postcss standalone profile
│  README.md             // Documentation
│  vue.config.js         // webpack related configuration files
├──public                // Static resource file
├──plugins               // Plug in collection
└─src
    ├─api
    │   ├──http.js       // api request file, where each api request is located
    │   ├──instance.js   // api request general entry, where requests can be processed uniformly
    ├─assets             // Resource folder
    │
    ├─lang               // Multilingual folder
    │
    ├─bus                // Global vue bus
    │
    ├─components         // General component library
    │
    ├─router.js          // Routing file
    │
    ├─store.js           // store related
    │
    ├─App.vue           // Program entry vue file
    │
    ├─main.js           // Program entry file
    │
    ├─utils              // Method collection of related tools
    │
    └─views              // pagefile

3. Example: hello word

How to add a hello word page?

• step 1: create a new Hello World folder in the views folder, and then create an index under the Hello World folder Vue's file, index The file content of Vue is

// Template module
<template>
<div>hello word</div>
</template>
// Logic module
<script>
</script>
// Style module
<style scoped>
</styple>

• step 2: after creating the page file, we need to run it in router Route configuration file of Hello World

// Import page file
import HelloWorld from './views/hello-world/index.vue'

// Configure routing file
export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/hello-world',
      name: 'device',
      component: HelloWorld
    }
  ]
})

• step 3: what if I want to add a picture to the Hello World page? We can throw our picture resources into the assets directory and then use the relative path to import them
Example: to introduce a file named hello Png pictures

<template>
    <div>
        <img src=".././img/hello.png" />
        <p>hello word</p>
    </div>
</template>

• step 4: what if I want to use the components of the common component library? We can import the components to be used in the components directory
Example: / / template module

// Template module
<template>
    <div>
        <HelloComponent/>
        <img src=".././img/hello.png" />
        <p>hello word</p>
    </div>
</template>
// Introduction component
<script>
import HelloComponent from '@/components/HelloComponent.vue'
export default {
    // Register components on the page
    compoents: {
        HelloComponent
    }
}
</script>

• step 5: if we need interface data, we can download it from http.com under the api folder JS add our interface

/**
* Request Liezi
*/
export const example = params => http.g(
  `${apiHeader}/examle`,
  params
)

• step 6: enter < localhost: 8080 / # / hello world > in the browser to see our hello page