vue3 改造文件目录,安装相应组件(vue router、TypeScript)
第一章 使用vite项目的创建
第二章 改造文件目录,安装相应组件
前言
官方的模板为基础版本,需要我们修改目录结构,安装需要的组件。
这里使用的组件有
技术包括
pinia
Pinia 和 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>
<router-link to="/axios">axios</router-link>
<br/>
<router-view></router-view>
</template>
<style>
</style>
效果
这里点击相应的路由,就会跳转相应页面