vite+vue3+ts项目搭建

一、项目搭建与配置引入

用到的库：vue3 ts vite less pinia vue-router axios element-plus

1.创建项目

yarn create vite

运行完成以后输入项目名称和使用框架就创建好了

2.添加各种依赖

创建项目是就引入了vue3 ts vite了，就不用了我们自己装了

需要装的命令都来跑一跑

---------------------------------------------------------------------------------------------------------------------------------------------

less引入

yarn add less

vite自带了less-leader，所以不用再装了，现在直接就能用了，使用就直接在styl加个lang="less" 就能直接写less了

---------------------------------------------------------------------------------------------------------------------------------------------

pinia引入

yarn add pinia

src目录下建一个stores文件夹，里面写你需要的各个状态管理器文件

例如，新建一个index.ts

src/stores/index.ts

import { defineStore } from "pinia"

export const useStore = defineStore('main', {

    state: () => ({
        // 这里面存数据
        counter: 0,
    }),
    actions: {
        // 这里面存方法集
        increment() {
            this.counter++
        },
        randomizeCounter() {
            this.counter = Math.round(100 * Math.random())
        },
    },
})

main.ts也需要使用

pinia

import { createApp } from 'vue'
import { createPinia } from "pinia";
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

使用stores

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue';

import { useStore } from './stores';
// 因为是直接在stores下面创建的index.ts所以后面的index.ts可以省略，其他文件的就需要把*****.ts写出来

const stores = useStore()
console.log(stores.$state);

const ChangeMsg = ()=>{
  stores.ChangeMsg()
}

</script>

<template>
  <HelloWorld :msg="stores.$state.msg" />
  <button @click="ChangeMsg">改变</button>
</template>

<style lang="less" scoped>
</style>

如此这般,pinia的引入与使用就告一段落啦

pinia使用问题出现：在router里面使用pinia会报错，分析异常的地址：https://stackoverflow.com/questions/70710965/vue-cant-access-pinia-store-in-beforeenter-vue-router

原因：由于在router阶段pinia还未被实例化，所以pinia在现目前是不存在的，所以去取值也是会报错的

解决方案：将pinia创建的实例导出去，然后挂在到APP上，这样你再router的时候也能调用到pinia里面的东西了；pinia只会构建一个实例，你后面定义的其他store也是在这个实例上面的，所以不用担心你创建的其他store取不到（我自己通过看这些解析自己分析的，可能不太准确，有什么都可以在评论区指出，欢迎指错，大家一起学习）

改造pinai的index.ts

src/stores/index.ts

import { createPinia } from "pinia";

const pinia = createPinia();

export default pinia;

在main.ts中导入pinia

省略了一些其他的代码，直接添加进去就好

src/main.ts

// ……

import pinia from './stores';// ……

app.use(pinia);

router中使用

src/router/index.ts

import pinia from "../stores";
import { useHeadLoading } from "../stores/useHeadLoading";

const headLoadingStores = useHeadLoading(pinia)


console.log(headLoadingStores.counter);

useHeadLoading这个文件我就没有改了，就是上文那个src/stores/index.ts这个里面的东西，改了个名字，根据自己的需求进行开发更改就好了

---------------------------------------------------------------------------------------------------------------------------------------------

vue-router引入

yarn add vue-router

同上面pinia的使用差不多

src目录下建一个router文件夹,新建一个index

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
  history: createWebHistory("/"),
  routes: [
    //基础路由规则
    {
      path: "/",
      name: "home",
      component: () => import("../views/Home/index.vue"),
    },
    {
      path: "/404",
      name: "404",
      component: () => import("../views/404/index.vue"),
    },
    {
      path: "/:pathMatch(.*)",
      redirect: "/404",
    },
  ],
});
export default router;

main.ts中也需要调用

import router from './router';

app.use(router)

路由需要注意，需要显示的子路由需要添RouterView，如果不添加这个东西，路由里的组件是不会被渲染的

---------------------------------------------------------------------------------------------------------------------------------------------

axios引入与封装

    yarn add axios
    yarn add qs

除了安装axios还得装一个QS用来处理我们post提交的数据

新建一个存放请求的目录，封装axios请求

src/request/http.js

import axios from "axios";
import qs from "qs";

axios.defaults.baseURL = "你的请求通用地址/"; // 请求地址

//post请求头
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    if (response.status == 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    console.log("请求错误！");
  }
);
export default {
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: "post",
        url,
        data: qs.stringify(data),
      })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },

  get(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: "get",
        url,
        params: data,
      })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
};

封装请求API

api.ts

// 引入封装好的http
import http from "./http";

// 封装各种请求
const post = (url:string, data = {}) => http.post(url, Object.assign(data));
const get = (url:string, params = {}) => http.get(url, Object.assign(params));

// 接口说明
// post示例
// const GetSettings = data => post('GetSettings', data)
// get示例
// const GetSettings = params => get('GetSettings', params)

// 使用说明

// GetSettings({ Did: 4 }).then((res) => {
//     console.log(res);
// });

// 常用接口封装
// 获取配置信息
// {}
export const GetSettings = (params:any) => get("getrouters", params);

---------------------------------------------------------------------------------------------------------------------------------------------

element-plus引入与使用

官网安装教程<https://element-plus.org/zh-CN/guide/installation.html>

安装：

yarn add element-plus

我是用的按需自动引入，官网的快速开始也有介绍

安装插件

 npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts中配置。别直接复制，看清楚咯，把这里面需要的添加进去就好了

// vite.config.ts
import { defineConfig } from 'vite'

import vue from "@vitejs/plugin-vue";

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

注意事项：node版本如果低了，这个自动引入会报错的，我用的node版本是：v18.7.0

2022-9-5我的node版本又改成了V16.17.1,前面用的v18.7.0有问题，我用nvm装的，npm直接token报错，无语，降了版本就行了

2022-10-26 nvm需要版本更新1.19才不会出现npm报token .错误

以上，所需的工具就已经安装完成了

TS 数据类型定义并使用

直接使用自带类型

const msg = ref<string>();
const type = ref<boolean>();
const pageIndex = ref<number>();
const color = ref<string[]>([]);
const Myobj = ref<{ name: string, age: number, like: string[] }>()

略微复杂的数据类型就先定义一个数据类型

interface Man {
  name: string, age: number, like: string[]
}

const kild = ref<Man>()
const kilds = ref<Man[]>([])

注意，数据在定义的时候需要在后面跟一个空数组，不然赋值的时候会报错

复用数据类型操作方法

新建TS类型文件

src/types/tower.d.ts

export interface InfoItem {
  title: string;
  Cover: string;
}

组件内调用类型

import { ref } from 'vue';
import { InfoItem } from "./types/tower";

const info = ref<InfoItem[]>([])
let item: InfoItem = {
  title: '你好',
  Cover: 'img'
}
info.value.push(item)
console.log(info.value);

如果遇到报错波浪线或者类型不提示，请重启vscode，这是vscode的一个BUG，目前还没有新的版本更新去解决他

如果没有提示或者其他报错，请看一下tsconfig.json里面的include是不是匹配了你自定义类型的位置

以上，模板框架就搭完了，然后就根据需求去晚上网页和功能吧

posted on 2022-08-20 14:10 Y_Shmily 阅读(1214) 评论(0) 收藏举报

刷新页面返回顶部

Y_Shmily

导航

公告