VUE3学习笔记（一） 项目搭建

1.安装vite 及创建vue项目

npm install vite@latest

npm init @vitejs/app myproject2
//√ Select a framework: » vue
//√ Select a variant: » vue-ts
找到项目目录
npm install //安装依赖
vite //启动项目

2.UI框架选型：ant-desgin-vue & 按需引入，首屏加速

npm install ant-design-vue
npm install vite-plugin-imp@2.1.6

vite.config.ts文件改动：

import vitePluginImp from 'vite-plugin-imp';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      vitePluginImp({   //增加配置项
        libList: [
          {
            libName: "antd",
            style: (name) => `antd/es/${name}/style`,
          },
        ],
      }),
    ],
    css: {

    }
})

项目src目录下新增Antd.ts文件:

import {
    Input,
    Button,
    DatePicker,
} from "ant-design-vue";
export const antArr = [
    Input,
    Button,
    DatePicker,
];

修改main.ts文件：

import {antArr} from "./Antd";

const app = createApp(App);
//按需加载antd组件库
for (const item of antArr){
    app.use(item);
}
app.mount('#app')

组件应用示例：

<a-button type="primary">啦啦啦</a-button>

3.vue-router

npm install vue-router

在src目录下新建route index.ts文件

import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'
export const routes: RouteRecordRaw[]= [
    {
        path: '/',
        component: () => import('../components/HelloWorld.vue')
    },
    {
        path: '/demo',
        component: () => import('../pages/TableDemo.vue')
    },
];
const router = createRouter({
    history: createWebHashHistory(),  // hash路由模式
    // history: createWebHistory(),  // history路由模式
    routes
});

export default router;

在main.ts中引入route

import router from "./router";
...
app.use(router)

4.VSCODE开发遇到的问题

1. *** is declared but its value is never read.Vetur(6133)报错解决方法。 （问题解决参考原文地址：）
   https://blog.csdn.net/boldiy/article/details/124611118

2.Ts里面使用const let语法提示报错，修改tsconfig.json为：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "noImplicitAny":false,//可选类型语言转换为强制类型检验语言,改为false在对象使用[]就不会报错
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

5.axios请求封装

npm install axios

在src目录下新增request文件夹，新增index.ts文件，封装axios请求

import axios from 'axios'
import { message } from 'ant-design-vue'
const service = axios.create()

// request interceptor
service.interceptors.request.use(
  config => {
    config.headers = {
      'accessToken': '16558812453532fd0929f05c64b10aa71ed2e7f674f42', //TODO
      'appType': 'web',
      'Content-Type': 'application/json;charset=UTF-8',
    }
    //老业务逻辑:GET 请求增加时间戳
    if (config.method && config.method === 'get') {
      var timestamp = new Date().getTime();
      if (config.params) {
        config.params.timestamp = timestamp;
      } else {
        config.params = {
          timestamp: timestamp
        }
      }
    }
    //老业务逻辑:post请求，自定义Content-Type
    if (config.data && config.data.headersContentType) {
      config.headers['Content-Type'] = config.data.headersContentType;
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.errorCode) {
        message.error(res.errorDescription)
    }
    const responseStatus = response.status;
    if (responseStatus === 200) {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

统一封装定义请求api

import request from '@/request'
import { message } from 'ant-design-vue'
const BASE_URL_PORTAL = '/cloud-portal'

//获取用户基本信息
// export function getCurrentUserInfo(params: Object){
//   return request({
//     url: `${BASE_URL_PORTAL}/create/getCurrentUserInfo`,
//     method: 'get',
//     params
//   }).catch(() => {
//     message.error('接口异常');
//   })
// }
export function getCurrentUserInfoApiFunc(params:Object){
    return sendReuqest({
        module: BASE_URL_PORTAL,
        path:'/create/getCurrentUserInfo',
        name:'获取用户信息',
        params,
        method:'get',
    });
}
/**
 *
 * @param moudle  模块名称 例：'/cloud-portal'
 * @param path    请求路径 例：'/create/getCurrentUserInfo'
 * @param name    接口名称 例：'获取用户信息'
 * @param params  接口传参 例：'{}'
 * @param method  请求方式 例：'get'
 */
export interface RequestIn{
    module:string,
    path:string,
    name:String,
    params:Object,
    method:any
}
export async function sendReuqest(req:RequestIn){
    try {
        return await request({
            url: req.module + req.path,
            method: req.method,
            params: req.method === 'get' ? req.params : null,
            data: req.method === 'post' ? req.params : null,
        })
    } catch {
        message.error(req.name + '接口异常')
    }
}

发送请求示例

getCurrentUserInfoApiFunc({}).then(resp => {
    console.log('resp',resp)
  })

6.pinia引入

npm install pinia

在src目录下新增store文件夹，新增user.ts文件

import { defineStore, acceptHMRUpdate } from "pinia";
export const useUserStore = defineStore({
    id: "user",  //每个store文件必须有个唯一的标志
    state: () => ({
        name:1
    }),
    actions: {
        addName(){
            this.name++;
        },
        
    },
});
// @ts-ignore，热更新的配置
if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
}

调用示例

import { useUserStore } from "@/store/user"
const userInfo = useUserStore()

//计算属性使用
let name = ref(computed(() => {
    return userInfo.name;
  }))

function add () {
  userInfo.addName(); //方法调用
}