从0实战一个 vue3+ ts+element-plus 项目

---

创建一个vue3+ts+vite项目

1. 文件目录下 npm create vite@latest 并创建名字和技术

根据提示先 npm install之后运行

2. 安装:npm install -D sass

3. 安装 npm install vue-router@4

之后创建router/index.ts文件

** 如果报错找不到引入地址就添加tsconfig.json配置

"esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowJs": true,

1. 实现一个自定义变量数据渲染

<template>
  <div class="login">
    {{formLabelAlign.name}}
  </div>
</template>
<script lang="ts" >
import { reactive } from "vue";
export default {
  mane: "login",
  setup() {
    const formLabelAlign = reactive({
      name: "小明",
      region: "",
      type: ""
    });
    return { formLabelAlign };
  }
};
</script>

2. vue,config.js配置跨域代理

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        "target": '对应的代理地址',//http://22.15.258.222:8888等
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
          '^/api': ''
        }
      }
    }
  },
}

3. 添加axios请求

• 安装依赖 :

npm install --save;
npm install vue-axios --save;

• 封装axios文件

1. 新建src/utils/request.js文件(用于新建和配置axios), 新建src/api/user.js文件(作为用户信息相关接口集合文件)

• 引入并使用封装好的请求,发起一个登录请求:

1. request.js文件中

import axios from "axios"; //引入
const baseURL = "/api";
const service = axios.create({
  baseURL
});

// 发起请求内容, 这里配置根据实际情况配置
service.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json;charset=utf-8'
  return config
});

// 响应内容, 这里配置根据实际情况配置
service.interceptors.response.use(response => {
  // 请求成功时候
  if (response.status === 200 && response.data) {
    return response.data
  } else {
    return Promise.reject(response.data)
  }
}, error => {// 请求失败时候, 一些逻辑, 根据情况配置
  let code = 0
  try {
    code = error.response.status
  } catch (error) {
    // 网络请求超时
    if (error.toString().indexOf('Error: timeout') !== -1) {
      return Promise.reject(error)
    }
  }
  if (code) {
    if (code === 401) {
      
    } else {
      const errorMsg = error.response.data.errorCode
      if (errorMsg !== undefined) {
      
      } else {
     
      }
    }
  } else {

  } 
  return Promise.reject(error)
});

export default service;

2. src/api/user.js中

import request from '@/utils/request'
/**
 * @description 登录
 * @param {*} params
 */
 export function adminLogin (data) {//我是简写, 可以根据情况配置其他
     console.log(data)
    return request({
      url: '/admin/login',
      method: 'post',
      data
    })
  }
/**
 * @description 获取首页信息
 * @param {*} params
 */
 export function adminHome (params) {
    return request({
      url: '/user',
      method: 'get',
      params
    })
  }

• 使用封装好的, 发起一个登录请求:

1. 引入: import { adminLogin } from “@/api/user.js”;
2. 发起请求:

<template>
    <div>
        <el-input v-model="name"></el-input>
        <el-input v-model="password"></el-input>
        <el-button type="primary" @click="login">登录</el-button>

    </div>
</template>
<script setup lang="ts" name="mybgType">
import { adminLogin } from '../../api/login'
let name: string = '';
let password: any = '';

const login = () => {
    adminLogin({ name: name, password: password }).then((res: any) => {
        console.log(res)
    })
}

3. 结果: 请求成功
   

• 使用时候报错问题1:

无法找到模块“@/api/user.js”的声明文件。“d:/桌面/mq2022/vue3shsili/vue3-typescipt/src/api/user.js”隐式拥有 "any" 类型。ts(7016)

是因为ts中不能直接识别js文件,两种解决方法

1. const xx:any = require(‘路径’) ，之后屏蔽警告；
2. src目录下创建一个声明文件xx.d.ts,内容如下
   
   之后正常使用import引入,就不会又警告了
   

• 使用时候报错问题2:

(parameter) res: any
(parameter) res: any
参数“res”隐式具有“any”类型。ts(7006)
Parameter ‘res’ implicitly has an ‘any’ type.Vetur(7006)

• 解决方法then((res)换成then((res: any)就可以了

4. node_modules安装问题

1. 如果报错npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR!问题 是npm 版本问题
   命令后边添加--legacy-peer-deps就可以了

5. 引入element-plus

请看下一条详解

6. 使用vite创建一个vue3+ts+element-plus项目

新建文件夹之后npm init vite@latest
之后选择一些需要的选项按回车健




之后使用上图命令就可以启动了

之后使用element-plus

1. 安装
   npm install element-plus --save
2. 自动引入
   npm install -D unplugin-vue-components unplugin-auto-import
3. 之后浅试一下; 这里图标类(icon)都要手动引入一下才显示,所以删除按钮时候要手动引入图标
   
   

问题1 这里又红色下划线, 直接删除引入就可

7. 引入element-plus icon图标

• 安装 npm install @element-plus/icons-vue

• 引入

• 使用

<el-icon><CloseBold /></el-icon>

8. 添加router

1. npm install vue-router@4
2. 创建src/router/index.ts文件

  import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 //views中有新建这些文件
  import login from '../views/login/index.vue' 
  import echart from '../views/echart/index.vue' 
   
  /**
   * 定义路由模块
   */
  const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        meta: {
            title:'首页',
            isShow:true
          },
        component: defineAsyncComponent(() => import('../views/index/index.vue')),
        children: [
            {
              path: 'home',
              meta: {
                title: '首页信息',
              },
              name: 'home',
              component: defineAsyncComponent(() => import('../views/index/index.vue')),
            }
          ]
    },
    {
        path: '/',
        name: 'login',
        meta: {
            title:'登录',
          },
        component: defineAsyncComponent(() => import('../views/login/index.vue'))
    },
  ]
   
  /**
   * 定义返回模块
   */
  const router = createRouter({
    history: createWebHistory('/'),  
    routes
  })
   
  export default router

4. 再main.ts中引入

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

import router from './router/index'

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

9. 菜单栏使用router

index/index.vue文件

10. router控制进入登录页面

1. App.vue

import router from "./router/index";
//直接跳转
router.beforeEach((to, from, next) => {
  console.log(localStorage.getItem('token'))
    if (localStorage.getItem('token')) {//toekn存在
        if (to.path == '/login') {//token存在，并且是login页面
         next('/home/index');
        } else {//token存在，不是login页面
         next();
        }
       } else {
        if (to.path == '/login') {//token不存在，并且是login页面
         next();
        } else {//token不存在，不是login页面
         next('/login');
        }
       }
})

2. 关于提取sessionStorage赋值时候类型报错

报错： 类型“string |
null”的参数不能赋给类型“string”的参数。不能将类型“null”分配给类型“string”。ts(2345)

1. 使用可选链操作符 ?，在访问 sessionStorage 的属性或方法时，先判断其是否为 null，

var sessionStorage: Storage
let myArray: any
const myString: string | null = sessionStorage?.getItem("permission_button");
if (myString !== null) {
  myArray = JSON.parse(myString)
}

11. 页面开发细节

1. 页面结构

<template>
    <div class="ScreenAdapter" :style="style">
    </div>
</template>
<script setup lang="ts" name="transformType">
import { ref, reactive } from "vue";
const style = reactive({
    width: '1600',
    height: '900',
    transform: 'scale(1) translate(-50%, -50%)'
});
const mas = ref(2)
onMounted(() => {
    setScale()
});
onBeforeUnmount(() => {//注销前
});
// 获取放大缩小比例
function getScale() {
}
</script>
<style lang="scss">
</style>

2. ref与reactive区别

2. vite中使用动态加载图片

1. 在使用require引用图片路径的时候就报错 require is not defined
2. vite官网地址https://cn.vitejs.dev/guide/assets.html

   <img :src="getImageUrl(item.meta.icon)" alt="">
   
   function getImageUrl(name: any) {
    return new URL(`../../assets/img/${name}.svg`, import.meta.url).href;
   }

3. 监听路由的两种方式

watch函数和RouteLocationNormalized类型
2. 第一种
3. 第二种

12. vite.config.ts代理配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //配置代理,解决跨域问题
  server: {
    proxy: {
      "/api": {
        target: "http://xxxxxxxxx:xxxx",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
})

带更新