vue2.x+antd-vue construit un projet de gestion back-end

Utilisez vue2.x+ant-design-vue pour créer le cadre de base d'un système de gestion backend. Ouvrez simplement l'ordinateur et tapez ensemble.

environnement de nœud

Officiel :https://nodejs.org/zh-cn/download/
Le cadre et l'environnement de développement front-end sont requisNode.js. Installez d'abord l'environnement de développement node.js. Le fonctionnement de vue dépend de l'outil de gestion npm de node
Pas grand chose à dire sur l’installation du nœud, il suffit de suivre les tutoriels des autres pour l’installer.

Outils d'édition (vscode)

Officiel :https://code.visualstudio.com/
DéveloppementvuePlug-ins vscode couramment utilisés recommandés :
1 :Auto Close Tag : compléter automatiquement les balises HTML 3 : < /span> : Correction des erreurs de grammaire 10 : : Formatage du code. Il convient de noter que le plug-in embellitify prend en charge les formats personnalisés Règles de code 9 : : invites intelligentes de la syntaxe ES6 et saisie rapide, en plus de js, il prend également en charge .ts, .tsx, .html, .vue, permet d'économiser du temps de configuration pour prendre en charge divers fichiers contenant du code js 8 : : Essentiel pour le développement de vue, prise en charge des fichiers .vue, coloration syntaxique, mise en évidence intelligente 7 : : Plug-in d'invite intelligente de code 6 : : Démarrer un service dans l'éditeur, surveiller les modifications des fichiers et actualiser automatiquement la page 5 : : Ce plug-in permet vous pouvez ouvrir les fichiers HTML depuis l'éditeur et pouvez choisir librement le navigateur à utiliser pour l'ouvrir 4 : : Invite de chemin intelligent, qui peut vous demander intelligemment lorsque vous entrez le chemin du fichier : Modifiez la balise html et vous aide automatiquement à terminer la modification synchrone de la balise fermante à la fin
2 : Auto Rename Tag
Path Intellisense
Open in Browser
Live Server
Visual Studio IntelliCode
Vetur
JavaScript(ES6)code snippets
Beautify
Eslint

Cadre technique (vue2.x+et-design-vue)

Installez l'échafaudage global vue-cli :npm i --global vue-cli

vue init webpack：

Installez vue-init :npm i -g @vue/cli-init
Utilisez la commande pour créer un échafaudage : vue init webpack xxxx (nom de fichier/nom de projet)

vue créer：

直接使用命令：vue create xxxx(文件名/项目名称)
目前有vue3.0和vue2.0可供选择，也可以选择自己配置，看个人项目需求：

TypeScript : prend en charge le code source d'écriture TypeScript
Prise en charge des applications Web progressives (PWA) : prise en charge des PWA
Vuex : prise en charge de vuex
Préprocesseurs CSS : prend en charge les préprocesseurs CSS
Linter/Formatter : prend en charge la vérification et le formatage du style de code
Tests unitaires : prise en charge des tests unitaires
Tests E2E : prise en charge des tests E2E
Une fois l'installation terminée, utilisez la commande npm i pour installer les dépendances et la commande npm run serve pour démarrer le projet.

vue de l'interface utilisateur :

Utilisez la commande vue ui pour ouvrir le gestionnaire de projet vue
Trouvez d'abord un endroit pour mettre le projet
Insérer la description de l'image ici
Par défaut (je choisis la configuration manuelle)< /a >

Fonction (sélectionnez les dépendances préinstallées. Pour ceux qui ne connaissent pas les spécifications, il est recommandé de ne pas l'activer lorsque vous jouez vous-même à la démoLinter / Formatter 代码风格检查和校验)
Insérer la description de l'image ici

Configuration (configuration du code du projet)
Insérer la description de l'image ici
Installation réussie

Exécutez-le et voyez

Maintenant qu'il est installé, l'étape suivante consiste à configurer le projet.

Éléments de configuration

1. Installez d'abord les dépendances (installez les dépendances correspondantes si nécessaire) (spécifiez la version installée via @)

Lors de l'installation des dépendances ant-design-vue, faites attention à la version.
Jetons d'abord un coup d'œil à la prise en charge des versions

2. Importez la configuration à la demande (installez d'abord`babel-plugin-babel`) et ajoutez la configuration ci-dessus au fichier de configuration

 plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
    ]
 ]

Ensuite, le composant bouton introduit sur notre page prendra effet.

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <p>
      Welcome to your first project.
    </p>
    <a-button type="primary">按钮</a-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Lors du développement de projets de collaboration multi-personnes, il est préférable de garder l'entrée simple. Nous allons extraire le composant d'enregistrement et l'introduire dans main.js (import'./config/components_use')

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './config/components_use'

Vue.config.productionTip = false

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

// components_use.js
// 根据需求引入项目中要使用的组件
import Vue from 'vue'
import {
  LocaleProvider,
  Layout,
  Input,
  InputNumber,
  Button,
  Switch,
  Radio,
  Checkbox,
  Select,
  AutoComplete,
  Cascader,
  Card,
  Form,
  Row,
  Col,
  Comment,
  Modal,
  Table,
  Tabs,
  Icon,
  Badge,
  Popover,
  Dropdown,
  List,
  Avatar,
  Breadcrumb,
  Steps,
  Spin,
  Menu,
  Drawer,
  Tooltip,
  Alert,
  Tag,
  Divider,
  DatePicker,
  TimePicker,
  Upload,
  Progress,
  Skeleton,
  Popconfirm,
  message,
  notification,
  Pagination,
  comment,
  FormModel
} from 'ant-design-vue'

Vue.use(LocaleProvider)
Vue.use(Layout)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Button)
Vue.use(Switch)
Vue.use(Radio)
Vue.use(Checkbox)
Vue.use(Select)
Vue.use(AutoComplete)
Vue.use(Cascader)
Vue.use(Card)
Vue.use(Form)
Vue.use(Row)
Vue.use(Col)
Vue.use(Comment)
Vue.use(Modal)
Vue.use(Table)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Badge)
Vue.use(Popover)
Vue.use(Dropdown)
Vue.use(List)
Vue.use(Avatar)
Vue.use(Breadcrumb)
Vue.use(Steps)
Vue.use(Spin)
Vue.use(Menu)
Vue.use(Drawer)
Vue.use(Tooltip)
Vue.use(Alert)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Skeleton)
Vue.use(Popconfirm)
Vue.use(notification)
Vue.use(Pagination)
Vue.use(comment)
Vue.use(FormModel)

Vue.prototype.$confirm = Modal.confirm
Vue.prototype.$message = message
Vue.prototype.$notification = notification
Vue.prototype.$info = Modal.info
Vue.prototype.$success = Modal.success
Vue.prototype.$error = Modal.error
Vue.prototype.$warning = Modal.warning

Structure du projet :

|-- daydayup
    |-- .gitignore
    |-- package-lock.json
    |-- babel.config.js
    |-- vue.config.js
    |-- package.json
    |-- README.md
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src
        |-- api // 接口放在这里
        |-- assets // 静态资源，图片之类
        |-- components // 项目中封装的组件
        |-- config // 项目配置文件
        |-- layout // 布局组件
        |-- router // 路由
            |-- router.js
        |-- store // vuex状态管理器
            |-- store.js
        |-- utils // 公共方法和工具这类放这里
        |-- views // 主页面放这里
            |-- Home.vue
        |-- App.vue
        |-- main.js

Construire une page de base

1. Modifiez le fichier APP.vue, `<router-view />` est le composant de rendu de routage

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

2. Créez un conteneur de mise en page de base

Créez un nouveau dossier de mise en page et un fichier BasicLayout.vue

<template>
  <a-layout class="basic-layout">
    <a-layout-header style="background: #fff; padding: 0">
      <div class="logo" />
    </a-layout-header>
    <a-layout>
      <a-layout-sider
        theme="dark"
        :trigger="null"
        collapsible
        v-model="collapsed"
      >
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <a-menu
          mode="inline"
          :defaultSelectedKeys="['1']"
          :inline-collapsed="collapsed"
          theme="dark"
        >
          <a-menu-item key="1">
            <router-link to="/">
              <a-icon type="home" />
              <span>首页</span>
            </router-link>
          </a-menu-item>
          <a-sub-menu key="2">
            <span slot="title"><a-icon type="pie-chart" />菜单栏一</span>
            <a-menu-item key="2-1">
              <router-link to="/info">
                <span>子菜单一</span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="2-2">
              <router-link to="/major">
                <span>子菜单二</span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="2-3">
              <router-link to="/point">
                <span>子菜单三</span>
              </router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="3">
            <span slot="title"><a-icon type="user" />菜单栏二</span>
            <a-menu-item key="3-1">
              <span>子菜单一</span>
            </a-menu-item>
            <a-menu-item key="3-2">
              <span>子菜单二</span>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content
        :style="{
          margin: '16px',
          padding: '16px',
          background: '#fff',
          minHeight: '600px',
        }"
      >
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data () {
    return {
      collapsed: false
    }
  }
}
</script>

<style lang="less">
.basic-layout {
  height: 100%;
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    &:hover {
      color: #018ae8;
    }
  }
  .ant-menu-item {
    text-align: left;
  }
  .ant-menu-submenu {
    text-align: left;
  }
  .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
}
</style>

Créer la page correspondante
Insérer la description de l'image ici

<template>
  <div class="info">
      this is info page.
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.info {
    color: #333;
    font: 16px/2 "";
    text-align: center;
}
</style>

3. Modifier le fichier de configuration de routage

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import BasicLayout from '../layout/BasicLayout.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: BasicLayout,
    redirect: '/index',
    children: [
      {
        path: '/',
        name: 'index',
        hideInMenu: true,
        component: Home
      }, {
        path: '/info',
        name: 'info',
        component: () => import('./../views/Info.vue')
      }, {
        path: '/major',
        name: 'major',
        component: () => import('./../views/Major.vue')
      }, {
        path: '/point',
        name: 'point',
        component: () => import('./../views/Point.vue')
      }, {
        path: '/basic',
        name: 'basic',
        component: () => import('./../views/Basic.vue')
      }, {
        path: '/setup',
        name: 'setup',
        component: () => import('./../views/Setup.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4. Exécutez le projet et vérifiez l'effet

Insérer la description de l'image ici