Vue第三方库集成

在开发中，可以通过vue.config.js进行修改vue中webpack配置。 

1、vue.config.js有三种配置方式：

• 方式一：直接通过CLI提供给我们的选项来配置：

  • 比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；

  • 比如outputDir：修改输出的文件夹；

• 方式二：通过configureWebpack修改webpack的配置：

  • 可以是一个对象，直接会被合并；

  • 可以是一个函数，会接收一个config，可以通过config来修改配置；

• 方式三：通过chainWebpack修改webpack的配置：

  • 是一个函数，会接收一个基于 webpack-chain 的config对象，可以对配置进行修改；

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const { config } = require('process')

module.exports = defineConfig({
  transpileDependencies: true,
  // 1.配置方式一：CLI提供的属性
  outputDir: './build',
  // 2.配置方式二：和webpack属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    }
  }
  configureWebpack: (config) => {
    config.resolve.alias = {
      '@': path.resolve(__dirname, 'src'),
      components: '@/components'
    }
  }
  // 3.配置方式三：
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('components', '@/components')
  }
})

配置时出现的eslint报错警告

在配置时，可能会出现eslint报错

解决方法：修改.eslintrc.js中的rules。

比如上述 config 报错，可将报错提示中的'@typescript-eslint/no-unused-vars'复制下来。在.eslintrc.js中的rules中将该规则设置为off

 2、vue-router集成

安装vue-router的最新版本：

npm install vue-router

 创建router对象：src/router/index.ts

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：main.ts

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>

 3、vuex集成

安装vuex：

npm install vuex

 创建store对象：src/store/index.ts

import { createStore } from 'vuex'

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

export default store

安装store： main.ts

import { createApp } from 'vue'
import App from './App.vue'

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

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

console.log('哈哈哈fdasfdasf')

在App.vue中使用：

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