Zhiting cloud disk - development guide web: project architecture

Posted by sqlnoob on Fri, 11 Feb 2022 21:28:22 +0100

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
    │   ├──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
<div>hello word</div>
// Logic module
// Style module
<style scoped>

• 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

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

• 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
        <img src=".././img/hello.png" />
        <p>hello word</p>
// Introduction component
import HelloComponent from '@/components/HelloComponent.vue'
export default {
    // Register components on the page
    compoents: {

• 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(

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

Topics: Web Development