【vue3 改造文件目录，安装相应组件】

vue3 改造文件目录，安装相应组件（vue router、TypeScript）

第一章 使用vite项目的创建
第二章 改造文件目录，安装相应组件

---

---

前言

官方的模板为基础版本，需要我们修改目录结构，安装需要的组件。
这里使用的组件有

技术包括

• piniaPinia 和 Vuex 一样
• Vue Router官方路由
• Vite Next Generation Frontend Tooling（脚手架）
• TypeScript
• ESLint 代码规范

---

1、集成ts

TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。
让前段更像后端，更加的规范，不过也使得项目更难上手

npm install typescript

2、集成vue router

2.1 搭建环境

路由用于页面之间的跳转

npm i vue-router@4

创建路由对应的文件。

└── src/
     ├── router/
         ├── index.ts  // 路由配置文件
     ├── views/
         ├── home.vue  
         ├── axios.vue  
         ├── vuex.vue  
         ├── env.d.ts
//...   省略相关配置文件，这里未修改      
├── vite.config.js       // vue3 的配置文件

vite.config.js文件需要配置下

└── vite.config.js

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from '@vitejs/plugin-vue';
function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}

export default defineConfig({
    base: "",
    plugins:[vue()],
    // 这里是将src目录配置别名为 /@ 方便在项目中导入src目录下的文件
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
      }
  },
    optimizeDeps: {
        include: ['axios'],
    },
    build: {
      target: 'modules',
      outDir: 'dist',
      assetsDir: 'assets',
      minify: 'terser' // 混淆器
    },
    server: {
        cors: true,
        open: true,
        proxy: {
          '/api': {
              target: 'http://192.168.99.223:3000',   //代理接口
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
    }
});

---

2.2 使用路由：

在/router/index.ts中创建路由

└── src/router/index.ts

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw,
} from "vue-router";
import Home from "@/views/home.vue";
import Vuex from "@/views/vuex.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/vuex",
    name: "Vuex",
    component: Vuex,
  },
  {
    path: "/axios",
    name: "Axios",
    component: () => import("@/views/axios.vue"), // 懒加载组件
  },
];

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

export default router;

这里会提示找不到报错

处理：在views文件下添加 *.d.ts文件，这里我添加的是env.d.ts

在创建的文件中添加如下代码即可解决报错

└── src/views/env.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

在main.ts中挂载配置

└── src/main.ts

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

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

home.vue 内容，其余两个文件相同

└── src/views/home.vue

<template>
    <div>
        this is home.vue   //只是内容不同做一个跳转区分，证明路由跳转成功
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

加载路由，修改App.vue

<router-link>：类似a标记  
<router-view>：显示a标记的引用，导航栏的一种使用

└── src/App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Home from './views/home.vue'
</script>

<template>
  <router-link to="/vuex">vuex</router-link>&nbsp;&nbsp;&nbsp;
  <router-link to="/axios">axios</router-link>&nbsp;&nbsp;&nbsp;
  <br/>
  <router-view></router-view>
</template>

<style>
</style>

效果

这里点击相应的路由，就会跳转相应页面

---

总结