vue3+ts+pinia+element+tailwindcss+graphql项目搭建

阿广997
526 阅读4分钟

一、创建vue3.2+ts项目

1.创建项目命令 yarn create vite

2.选择typescript

3.cd项目根目录

4.yarn 安装依赖

5.yarn serve 运行项目

6.配置@符 在vite.config.ts中 例:

import {resolve} from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{'@':resolve(__dirname,'src')}
  }
})

7.如需其他配置可访问官网 https://cn.vuejs.org/guide/introduction.html

二、安装vue router路由

1.安装 yarn add vue-router

2.在src下创建router文件夹

3.新建index.ts文件

4.配置路由 (vue2与vue3的404配置有所不同) 例：

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";


const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/login' //一级页面重定向 需在APP.vue中占位 <router-view></router-view>
    },

    {
        path: '/login',
        name: 'login',
        component: () => import('@/views/Login.vue')


    },
    {
        path: '/todo',
        name: 'todo',
        component: () => import('@/views/Todo.vue'),
        children: [ //二级页面
            {
                path: '/todo',
                redirect: '/todo/home' //二级页面重定向   需在一级页面.vue中占位 <router-view></router-view>
            },
            {
                path: 'home',
                component: () => import('@/views/home.vue'),
            }
        ]
    },
     {
        path: '*',  //vue2.0 404配置
        name: 'NotFound',
        component: () => import('@/views/NotFound.vue')
    },
    {
        path: '/:error*',  //vue3.2 404配置
        name: 'NotFound',
        component: () => import('@/views/NotFound.vue')
    }
]

export const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router // 导出router

5.在man.ts中引入注册 例：

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

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

6.如有其他需求配置可访问官网 https://router.vuejs.org/zh/

三、安装pinia小菠萝(状态管理比vuex更轻便)

1.安装命令 yarn add pinia

2.在src下新建store文件夹

3.新建index.ts文件 4.新建store.name文件 枚举

export const enum  names{
    TEST="TEST"
}

4.store配置 例：

import { defineStore } from 'pinia'
import { names} from './store-name' //引入store-name文件
 export  const store =defineStore(names.TEST,{
    state: () => ({
        name:'4556'
    }),
    getters:{},
    actions:{}
 })

5.在man.ts中引入注册 例:

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

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

6.配置完成如需查看数据可以在Google浏览器中右键点击检查 找到安装的扩展程序 vue里面就有pinia标识，如果没有安装可去下载Vue.js devtools扩展程序，https://devtools.vuejs.org/拖入扩展程序安装就可以正常使用了。如有其他需求可去官网, https://pinia.vuejs.org/ 或者前往博客blog.csdn.net/weixin_4277…alltop_positive~default-2-126008933-null-null.142^v63^control,201^v3^control,213^v1^t3_esquery_v3&utm_term=pinia&spm=1018.2226.3001.4187 或者B站观看视频 https://www.bilibili.com/video/BV1dS4y1y7vd/?vd_source=182909204f1440b4c9db9a814f9ff557

四、安装element-plus

1.安装命令 yarn add element-plus

2.在man.ts中引入注册 例:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

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

3.如有其他需求可访问官网 https://element-plus.org/zh-CN/guide/design.html

五、安装tailwindcss

1.安装命令 npm i -D vite-plugin-windicss windicss

2.然后，在你的 Vite 配置中安装插件 vite.config.js：

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

3.最后，在man.ts中导入virtual:windi.css你的 Vite 条目就可以正常使用啦

import 'virtual:windi.css'

4.如有其他配置需求可访问官网 https://windicss.org/integrations/vite.html 。样式需求可访问官网 https://tailwindcss.com/docs/installation

六、urql搭配graphql代码自动生成插件使用(查询字段-发起请求)

这些绑定是在考虑Vue 3@urql/vue的情况下编写的，并使用 Vue 更新的Composition API。这使 绑定功能更容易集成到您现有的功能中。@urql/vue``setup()

1.1安装@urql/vue

安装@urql/vue速度很快，无需立即安装其他软件包。

官网 formidable.com/open-source…

yarn add @urql/vue graphql
# or
npm install --save @urql/vue graphql

大多数与 GraphQL 相关的库也需要将graphql包安装为对等依赖项，以便它们能够适应您的特定版本控制要求。这就是为什么我们需要同时graphql安装@urql/vue.

@urql/vue和包都graphql遵循语义版本控制，所有@urql/vue包都将定义一系列兼容的graphql. 但是，请注意将来的重大更改，在这种情况下，您的包管理器可能会警告您 graphql超出定义的对等依赖范围。

1.2.设置Client(可以直接看提供client)

该@urql/vue包导出了一个方法createClient，我们可以使用它来创建 GraphQL 客户端。这个中央Client管理我们所有的 GraphQL 请求和结果。在src/plugins/@urql.ts

import { createClient } from '@urql/vue';


const client = createClient({
  url: 'http://localhost:3000/graphql',
});

url当我们创建一个Client开始时，我们至少需要传递一个 API 。

另一个常见的选项是fetchOptions. 此选项允许我们自定义在将fetch请求发送到给定 API 时将传递给的选项url。我们可以传入一个选项对象或一个返回选项对象的函数。

在下面的示例中，我们将为发送到 GraphQL API的每个fetch请求添加一个令牌。Client

const client = createClient({
  url: 'http://localhost:3000/graphql',
  fetchOptions: () => {
    const token = getToken();
    return {
      headers: { authorization: token ? `Bearer ${token}` : '' },
    };
  },
});

1.3.提供Client （第二种使用偏多）

要使用ClientVue，我们必须提供从父组件到子组件的服务。这将Client与我们的应用程序的其余部分共享一个。有@urql/vue两种不同的方法可以实现这一点。

第一种方法是使用@urql/vue'provideClient函数。这必须在您的任何父组件中调用，并Client直接接受或仅接受您传递给的选项 createClient。直接写在APP.Vue中即可使用

<script>
  import { createClient, provideClient } from '@urql/vue';


  const client = createClient({
    url: 'http://localhost:3000/graphql',
  });


  provideClient(client);
</script>

第二种方法，我们可以通过导入其默认导出并将其用作插件来使用导出的install函数并将其视为插件。@urql/vue

import { createApp } from 'vue';
import Root from './App.vue';
import urql from '@urql/vue';


const app = createApp(Root);


app.use(urql, {
  url: 'http://localhost:3000/graphql',
});


app.mount('#app');

注意： 这一段代码写在man.ts中

import urql from '@urql/vue';
app.use(urql, {
  url: 'http://localhost:3000/graphql',
});

该插件还接受createClient's 选项或 aClient作为其输入。

2.1.安装graphql插件

graphql可以直接设置需要的请求字段，再一键生成后端返回的数据类型，以及经过封装后的函数生成 garphql.ts文件，在页面直接调用里面的函数传入需要的参数直接发起请求

网址： graphql.org/code/#javas…

www.the-guild.dev/graphql/cod…

**dependencies 生产依赖**
 yarn add graphql
  
 yarn add graphql-tag
 
**devDependencies开发依赖**
 yarn add -D @graphql-codegen/cli
 
 yarn add -D @graphql-codegen/introspection
 
 yarn add -D @graphql-codegen/typescript
 
 yarn add -D @graphql-codegen/typescript-operations
 
 yarn add -D @graphql-codegen/typescript-urql

2.2.配置codegen.yml文件

注意：格式是写死的多一个空格都不行，该对齐的地方必须对齐

overwrite: true  运行删除上一次生成的文件
schema: 服务器地址
  - http://localhost:4000
documents: 'src/graphql/**/*.graphql' 解析的某个后缀名为graphql的文件
generates:
  src/generated/graphql.ts: 自动封装后生成的文件路径
    plugins: 用到的插件
      - typescript
      - typescript-operations
      - typescript-urql
    config:
      urqlImportFrom: '@urql/vue'
      skipTypename: false 是否跳过某个模块
  src/generated/graphql.schema.json:自动生成的文件路径
    plugins:
      - introspection

2.3.在src/graphql/.graphql文件中填写需要返回的需求字段

query表示GET请求，Mutation表示POST请求

例：
query getUser($userId: String!){
  getUser(userId: $userId) {
    userId
    firstName
    lastName
    accounts {
      accountToken
      accountType
      accountNumber
      accountBalance
      nickName
    }
  }
}

2.4.运行命令,开始查询

yarn graphql-codegen

2.5.生成后的文件

graphql.schema.json

1s.png

graphql.ts

自动生成的类型 2s.png 自动封装生成的函数 3s.png

2.6.graphql在页面中的使用（直接引入调用）

注意：(GET)query请求必须写在setup中调用，不能在其他函数中调用，也不能在事件中调用。 (post)Mutation请求就可以 参数必须写在variables对象中,用它来为我们的查询提供变量

const portal=useGetUserQuery({
    variables:{
    userId:{
      userId
     }
    }
  })
  console.log(portal);
avatar
文章
阅读
粉丝