vue-ts-cms项目总结(二)

2021-08-27

VueRouter|VueX|ElementPlus的集成

一.VueRouter

安装vue-router的最新版本：

1	npm install vue-router@next

创建router对象：

import { createRouter, createWebHashHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/main'
  },
  {
    path: '/main',
    component: () => import('../views/main/main.vue')
  },
  {
    path: '/login',
    component: () => import('../views/login/login.vue')
  }
]

const router = createRouter({
  routes,
  history: createWebHashHistory()
})

export default router

安装router：

1
2
3

import router from './router'

createApp(App).use(router).mount('#app')

在App.vue中配置跳转：

<template>
  <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/main">首页</router-link>
    <router-view></router-view>
  </div>
</template>

二.VueX

安装vuex：

1	npm install vuex@next

创建store对象：

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      name: 'coderwhy'
    }
  }
})

export default store

安装store：

1	createApp(App).use(router).use(store).mount('#app')

在App.vue中使用：

1	<h2>{{ $store.state.name }}</h2>

三.Element-Plus

全局引入

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

import router from './router'
import store from './store'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

局部引入

对某个组件进行引入：

<template>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'App',
  components: {
    ElButton
  }
})
</script>

<style lang="less">
</style>

但是我们会发现是没有对应的样式的，引入样式有两种方式：

全局引用样式；
局部引用样式（通过babel的插件）；

1.安装babel的插件：

1	npm install babel-plugin-import -D

2.配置babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
  presets: ['@vue/cli-plugin-babel/preset']
}

优化：

问题:这些组件我们在多个页面或者组件中使用的时候，都需要导入并且在components中进行注册；
所以我们可以将它们在全局注册一次；

import {
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge,
} from 'element-plus'

const app = createApp(App)

const components = [
  ElButton,
  ElTable,
  ElAlert,
  ElAside,
  ElAutocomplete,
  ElAvatar,
  ElBacktop,
  ElBadge
]

for (const cpn of components) {
  app.component(cpn.name, cpn)
}