vue3组合式编程+ts+vueRouter+pinia+ElemetPlus前端框架搭建

一、使用vite新建vue项目工程

vite是快速生成主流框架基础模板的工具。

在想要创建项目的目录下打开命令行，输入

npm init vue

这种方式会询问添加何种插件：

在询问时添加我们所需要的: typeScript,Vue Router , Pinia 。

二、下载项目依赖

在项目的根目录下打开命令行，输入

npm i

此时打开package.json文件可以看到插件已经全部导入

三、删除多余文件

如下删除选中内容

三、配置服务器

在vite.config.ts文件的对象中添加如下属性

server:{
        /* 自动打开浏览器 */
        open:true,
        /* 设置服务器地址,由于就是本地因此使用 localhost */
        host:'localhost',
        /* 设置端口号 */
        port:8888,
        /* 开启模块热加载 */
        hmr:true,
},

四、声明.vue后缀模块

描述 .vue 后缀的模块 否则 ts 无法正确识别 SFC 组件格式会在 main.ts 中拉红线

在env.d.ts中添加如下代码：

declare module '*vue' {
    import { ComponentOptions } from "vue";
    const ComponentOptions: ComponentOptions
    export default ComponentOptions
}

五、修改路由

由于我们将原始的路由组件已经删除，所以路由表中的路由项已经没有意义可以将其删除，在我们后期使用路由时在进行添加

index.ts文件如下：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

注意：main.ts中引入已经删除的css文件的导入语句也要删除。

此时我们的整体框架已经完成，在命令行中输入：npm run dev 既可以启动项目运行。下面是对elementPlus进行引入。

六、安装elementPlus

在根目录命令行中输入：

npm install element-plus --save

七、在tsconfig.json中指定全局组件类型

在tsconfig.json中添加

  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }

八、在main.ts中引入element组件，国际化，图标依赖

修改后的main.ts文件如下：

/* 导入工厂函数用来创建 Vue 实例 */
import { createApp } from 'vue'
/* 导入 ElementPlus 依赖 */
import ElementPlus from 'element-plus'
/* 导入 ElementPlus 中的图标依赖 */
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
/* 导入 ElementPlus 国际化文件 这里导入的是中文文件 */
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
/* 导入 ElementPlus 全局 css */
import 'element-plus/dist/index.css'
/* 导入 pinia 工厂函数用来创建 pinia 仓库 */
import { createPinia } from 'pinia'
/* 导入根组件 */
import App from './App.vue'
/* 导入路由表 */
import router from './router'
/* 创建 Vue 实例 加载根组件 */
const app = createApp(App)
/* 加载图标 */
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
/* Vue实例挂载 pinia */
app.use(createPinia())

/* Vue实例挂载 ElementPlus,并且加载国际化中文支持 */
app.use(ElementPlus, {
    locale: zhCn,
})
/* Vue实例挂载 vue-router */    
app.use(router)
/* Vue实例挂载模板 注意 挂载模板一定保证最后挂载 */
app.mount('#app')

在env.d.ts文件中添加：

/* 设置 ts 识别 ElementPlus 国际化文件 xxxx.mjs */
declare module 'element-plus/dist/locale/zh-cn.mjs';

注意：element中的图标需要单独下载：

npm install @element-plus/icons-vue

此时element已经全局生效，我们可以在想要引入的地方使用

九、使用自定义实例发送对象

1. 下载axios: npm i axios

2. 新建两个配置文件 执行 npm run dev 则读取此文件

   

#.env.development文件
# 此文件为开发阶段使用的配置文件 执行 npm run dev 则读取此文件
# 开发环境配置: 必须以 `VITE_` 开头
# 例如:VITE_ETOAK=/小猪佩奇 
# 获取方式 import.meta.env.VITE_ETOAK
# 那么 这里通过 import.meta.env.VITE_APP_BASE_API 可以获取后面的基本地址

# 定义请求的基础url,方便跨域请求时使用
VITE_APP_BASE_API=请修改为自己服务器地址

# 跨域则使用以下地址
# VITE_APP_SERVICE_URL=https://www....

# 修改此文件需要重新开启服务器

#.env.production
# 此文件为生产环境配置的参数 
# 生产环境配置: 必须以 `VITE_` 开头
VITE_APP_BASE_API=/prod-api

3. 新建util工具包，用与存放项目中需要的工具类

   在util包下面新建request.ts内容如下

   /* 导入 axios 依赖 */
   import axios from "axios";
   /* 我们自己创建自己自定义的实例创建自定义实例的好处是很多参数我们可以一次配置多处使用,实现复用,我们自己创建的
   axios 实例也是一个 Promise 期约对象 */
   const request = axios.create({
       /* 这里配置基本地址,这个地址是从配置文件中读取,一定要重启服务器 */
       baseURL: import.meta.env.VITE_APP_BASE_API,
       /* 此处用来设置超时时间,注意发送请求之后这个时间之内没有返回响应,则
       报错 单位 ms */
       timeout: 6000,
   })
   /* 以默认成员身份导出 */
   export default request
   

4. 新建api文件夹用与存放？，文件夹下建立dao.ts文件用与存放接口

   /* 此文件用来书写前端接口,对应每个后端接口都书写一个方法(函数) */
   /* 导入自定义 axios 实例 */
   import request from '@/util/request'
   /* 设置一个常量地址 */
   const PATH = '/testUser'
   
   /** 1:登录
    * @author Joshua
    * @param username string 用户姓名
    * @param password string 用户密码
    * @returns request Promise 
    * @copyright etoak
    * @description 此函数用来进行登录操作
    */
   export function login(username:string,password:string){
       /* return new Promise((resolve,reject)=>{
   
       }) */
       return request({
           /* 这里的参数都是无法复用的参数,不同的接口使用的参数不一 
           注意最终的完整地址 是 
           完整地址 = 基本地址 + 进阶地址
           final = baseURL + url */
           url:`${PATH}/login?username=${username}&password=${password}`,
           method:'get',
       })
   }
   

5. 在我们需要再页面中调用的地方可以这样调用即可

   /* 导入前端接口 */
   import { login } from '@/api/dao'
   
   login(username.value,password.value)
       .then(res=>{
       console.log(res)
       /* 如果业务逻辑正常 */
       if(res.data.flag){
           .....
       }
    })