第一个前端项目记录(vue3+element-ui-plus+ts+路由守卫+axios拦截器)

125 阅读2分钟

一、使用vite初始化项目

一)初始化项目 image.png

二)使用git进行管理

1、git init

2、git status

3、git add.

4、git commit -m'v0--项目初始化'

三)清除默认内容

1、删除component目录下的hello world组件

2、删除App.vue中引入的hello-world组件、清空template以及style中的内容

3、删除根目录下的style.css文件(以及main.ts中的引用)

4、'App.vue' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.Vetur(1208)

image.png

通过借鉴文章解决 blog.csdn.net/Trees__/art…

image.png

5、报错

image.png

卸载vscode中的vuter插件

二、安装并使用element-ui- plus

一)安装 image.png 二)引入

image.png

image.png 三)国际化

1、引入 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, { locale: zhCn, })

2、引入时报错 image.png 通过借鉴该文章解决了问题 blog.csdn.net/xiebaochun/…

在vite-env.d.ts文件中添加解决

declare module 'element-plus/dist/locale/zh-cn.mjs'

{

const content: any

export = content

}

image.png

三、安装配置router

(参考b站写网页的叮叮--【已完结】2022年最新版Vue3全套教程(超细致月嫂级教程,包教包会)--53集)

一)安装

在官网查询到安装命令yarn add vue-router@4

二)新建路由表

在src文件夹下新建router文件夹并在router文件夹中新建index.ts文件

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

// 1. 定义路由组件.

// 也可以从其他文件导入

import Home from '../views/Home.vue'

import About from '../views/About.vue'

// 2. 定义一些路由

// 每个路由都需要映射到一个组件。

// 我们后面再讨论嵌套路由。

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About },

]

// 3. 创建路由实例并传递 routes 配置

// 你可以在这里输入更多的配置,但我们在这里

// 暂时保持简单

const router = createRouter({

// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。

history: createWebHashHistory(),

routes, // `routes: routes` 的缩写

})

export default router

image.png 三)新建About.vue和Home.vue文件,并改写App.vue

image.png

四)在main.ts引入router

image.png