Desarrollo de proyectos Vue --- hacer alguna configuración previa al desarrollo

1. Dividir la estructura de directorios

2. Introducir css público

dirección de github de normalize.css

Normalize.css es un archivo CSS personalizable que permite que diferentes navegadores representen elementos web de manera más uniforme.

base.css

3. Configuración de alias de carpetas en la estructura del proyecto

module.exports = {
    
    
  configureWebpack: {
    
    
    resolve: {
    
    
      alias: {
    
    
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views'
      }
    }
  }
}

4. configuración de la especificación del código editorconfig—

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

5. Crea una ruta

5.1, instalar enrutamiento

npm install vue-router@3.0.2 --save

Instalación exitosa:

5.2, configurar el enrutamiento

import Vue from 'vue'
import VueRouter from 'vue-router'

//懒加载
const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const Cart = () => import('../views/cart/Cart')
const Profile = () => import('../views/profile/Profile')
const Detail = () => import('../views/detail/Detail')

//1、安装插件
Vue.use(VueRouter)

//2、创建router
const routes = [
  {
    
    
    path: '',
    redirect: '/home'
  },
  {
    
    
    path: '/home',
    component: Home
  },
  {
    
    
    path: '/category',
    component: Category
  },
  {
    
    
    path: '/cart',
    component: Cart
  },
  {
    
    
    path: '/profile',
    component: Profile
  }
]

const router = new VueRouter({
    
    
  routers,
  mode: 'history'
})

//3、导出router
export default router

5.3, la página main.js presenta el enrutamiento

5.4 La página APP.vue usa enrutamiento

<template>
  <div id="app">
    <router-view></router-view>
    <main-tab-bar></main-tab-bar>
  </div>
</template>