Vue3+TS+pinia 0-1简单搭建

ℒℯℴ_de

已于 2023-08-11 10:58:45 修改

阅读量178

点赞数 2

文章标签：前端 vue.js typescript

于 2023-07-14 19:00:00 首次发布

本文链接：https://blog.csdn.net/qq_50705538/article/details/131707257

版权

一.使用yarn or pnpm 创建项目

yarn create vite or pnpm create vite
输入项目名 :如 vue3_demo
选择TS
使用Vscode编译器,推荐的插件 Vue Language Features (Volar) TypeScript Vue Plugin
注:如有安装Vetur的插件可以禁用掉,防止与新安装的Volar有冲突检查是否安装包管理器,首先查看 node -v 版本,查看yarn 或者 pnpm 是否安装 yarn -v or pnpm -v

二.启动项目

从VScode打开项目名
yarn 一下;(yarn 安装依赖包 node_modules)
启动项目:yarn dev

注:我这里是用yarn 创建的项目.如用pnpm创建的使用pnpm dev启动;

三.清理项目文件

初始项目打开后有默认的页面,那么咱们可以把这些清理掉;

删除compoents下的.vue文件
清空App.vue里面内容,然后使用快捷键 vtp 创建代码;内容随便写点占内容;方便观察浏览器页面的变化.后期开发开发项目再改.
删除style.css文件.(在mian.ts清除style.css的引入)

四.搭建工程目录

在src文件夹创建以下工程目录

api ajax(axios)工具管理文件夹
assets 静态资源目录,用来存放图片,CSS什么的
components 公共小组件
directives 自定义指令文件夹
hooks 全局hooks函数文件夹
layout 框架
router 路由
store pinia仓库
utils 工具文件夹
views 页面级别组件文件夹
types ts约束配置

五.简单配置 vite.config.ts

前期我们可以先配置路径的别名

//引入路径别名
import { resolve } from 'path'
//在defineConfig里面进行配置
     resolve: {
        alias: {
            '@': resolve(__dirname, 'src')
        }
    }

六.安装router 和 pinia

若你打开的 package.json 文件中的dependencies里只有vue,那么需要安装router和pinia

有的话则忽略;

安装方法: yarn add router 和 yarn add pinia

七.重置样式安装sass 配置预加载scss

/*找到.scss文件放到assets中**/

在mian.ts注入全局样式

        import '@/assets/你的路径名/你的文件名'

安装sass

        yarn add sass -D

在vite.config.ts 注入全局默认样式变量

     同样在defineConfig里面进行配置:
    css: {
        //css预处理配置项
        preprocessorOptions: {
            scss: {
                //注入全局样式变量 注意自己的文件名,别导错了,后面记得加上分号 ';''
                additionalData: `@import '@/assets/styles/variables.scss';`
            }
        }
    }

八.配置svg图标&&全局使用svg图标

1.先安装插件

yarn add vite-plugin-svg-icons -D 方便后期配置图标

2.在vite.config.ts进行配置svg

a.引入插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

b.在plugins 里面进行配置;

createSvgIconsPlugin({

//指定要缓存的文件夹 svg文件夹里面全是svg图标

iconDirs: [resolve(process.cwd(), 'src/assets/icons')],

//指定symolId格式,使用时候<use :xlink:href="'#'+name" :fill="color"></use>

symbolId: '[name]'

})

[注:如果报错cannot find package 'fast-glob' ,就安装插件yarn add fast-glob -D]

3.在mian.ts引入全局图标

import 'virtual:svg-icons-register'

4.在App.vue里面测试图标

<svg class="icon" aria-hidden="true">

//注意要跟你的svg文件名一样

<use xlink:href="#tiao" fill="red"></use>

</svg>

5.测成功之后咱们可以封装svg,供全局使用

在components文件夹下新建SvgIcon.vue
在main.ts下引入SvgICon.vue
使用createApp(app).component('组件名', 组件实例)
在app.vue使用根据需求名称,颜色,大小]进行父传子
SvgIcon里面拿到数据动态渲染可以使用计算属性拼接字符串

代码如下:

/** main.ts */

import { createApp } from 'vue'
import App from './App.vue'
//注册全局图标
import 'virtual:svg-icons-register'
//引入svg图标
import SvgIcon from '@/components/SvgIcon.vue';
const app = createApp(App)
app.component('SvgIcon', SvgIcon)
app.mount('#app')
/*
SvgICon.vue文件
*/
<template>
    <div>
        <svg :class="iconClass" aria-hidden="true">
            <use :xlink:href="'#' + name" :fill="color"></use>
        </svg>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

//接收父组件参数
type props = {
    name?: string
    color?: string
    size?: string
}
const prop = withDefaults(defineProps<props>(), {
    name: 'excel',
    color: '#FFFFFF',
    size: 'middle'
})
//计算属性 设置动态class
const iconClass = computed(() => {
    return `icon icon-${prop.size}`
})
console.log(prop);
</script>

<style scoped lang="scss">
.icon {
    //vertical-align 为了避免样式出问题
    vertical-align: -0.15em;
    // fill属性运行填充颜色
    fill: currentColor;
    overflow: hidden;

    // 宽高可控
    &-small {
        width: 1em;
        height: 1em;
    }

    &-middle {
        width: 2em;
        height: 2em;
    }

    &large {
        width: 2.5em;
        height: 2.5em;
    }


}
</style>

/**
app.vue文件
 */
 <template>
    <div>
        <!-- 自定义svg父子组件传参 -->
        <svg-icon color="skyblue" size="middle"></svg-icon>
    </div>
</template>

<script setup lang="ts">

</script>

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

九.安装UI组件库

比如 element-ui plus Arco Design ... 官网有安装教程自行安装

十.vue-router路由配置

建:建立页面级别组件
配:配置路由地址与页面级别组件一一对应
测:<router-view></router-view>出口测试

// 引入路由的相关方法
import { createRouter, createWebHashHistory } from 'vue-router'
//引入路由类型
// import type { RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/Layout.vue'
import { MyRoutes } from '@/types/router';
//配置项
const routes: MyRoutes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/login',
        component: () => import('@/views/login/index.vue')
    },
  
    {
        path: '/home',
        component: Layout,
        meta: { title: '唱', path: '/home' },
        children: [
            {
                path: '',
                component: () => import('@/views/home/index.vue')
            }
        ]
    },
]

//创建路由实例
const router = createRouter({
    routes,
    history: createWebHashHistory()
})
//导出路由实例
export default router;

/*types文件下的router.d.ts */
// 引入路由自带的约束
import { RouteRecordRaw } from 'vue-router';

//自定义的配置
export interface RouteItem {
    hidden?: boolean
    meta?: {
        title?: string
        path?: string
    }
    children?: Array<MyRouteTy>
}
//合并配置生成自己的配置
export type MyRouteTy = RouteRecordRaw & RouteItem
//合并配置的数组
export type MyRoutes = Array<MyRouteTy>

    <!-- app.vue出口 -->
<template>
    <div class="app">
        <router-view></router-view>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.app {
    height: 100%;
}
</style>

十一.消除影响观感的红波里线(了解)

1.如图:以下的红色波浪线虽然不影响项目的运行,但影响了个人的观感.

解决方法如下: 在tscongig.json中修改
"noUnusedLocals": true,改为 "noUnusedLocals": false

2.如图:安装UI组件库时引入中文库时出现波浪线(实际在项目中运行已生效中文字体)

解决:
 /*解决:在**.d.ts文件中声明,我因为懒直接在src目录下types文件夹中的vite-env.d.ts文件中写*/
  //由于ts无法解析我们的vue结尾的文件
        declare module '*.vue' {
            import { ComponentOptions } from 'vue'
            const componentOptions: ComponentOptions
            export default componentOptions
        }

十二.使用Pinia

1.首先在main.ts中引入pinia

//引入pinia
import { createPinia } from 'pinia'
app.use(createPinia());

2.在store文件创建一个.ts文件的pinia仓库

//定义pinia仓库
import { defineStore } from 'pinia';
import { ref } from 'vue';
//使用仓库
export const UseAppStore = defineStore('app', () => {
   //里面写你的逻辑代码
    //例如写一个菜单栏的伸缩
    const isCollapse = ref<boolean>(false)
    //方法展开和收起
    const toggleCollapse = () => {
        isCollapse.value = !isCollapse.value
    }
    
    return {
        isCollapse,
        toggleCollapse,
    }
})

3.在需要点击伸缩按钮上绑定一个事件,比如在我的头部nav.vue需要点击伸缩左边菜单栏

<template>

   <el-icon @click="toggleCollapse" size="26">
                <Fold />
    </el-icon>

</template>

<script setup lang="ts">
import { computed} from 'vue';
import { UseAppStore } from '@/store/app';
//解构方法
const $appStore = UseAppStore()
const { toggleCollapse } = $appStore;


</script>

<style scoped lang="scss">



</style>

4.在左边菜单栏sider.vue文件

<template>
    <div>
        <el-menu :collapse="isCollapse">
            <!-- 你的菜单栏 -->
        </el-menu>
    </div>
</template>

<script setup lang="ts">
//获取动态地址
import { computed } from 'vue';
import { UseAppStore } from '@/store/app';
//pinia仓库
const $appStore = UseAppStore()
const isCollapse = computed(() =>
    $appStore.isCollapse
)


</script>

<style scoped lang="scss">

</style>

十三:效果图

最后如有不明确的地方请大佬指出,希望大家可根据自己的需求开发~~~

十四.网上的兼职平台

https://zb.oschina.net--开源众包

https://zbj.com--猪八戒

https://www.proginn.com--程序员客栈

https://mart.coding.net--coding码市

http://linktion.cn--英选

http://www.kaifabang.com--开发邦

https://www.freelance.com--freelancer

http://stackoverfloow.com/#--stackoverflow

https://www.yuanjisong.com--猿急送

http://rrkf.com--人人开发

http://www.mayigeek.com--马易

温馨提示:

1.无第三方担保不要接单

2.不接无具体需求的单子

3.442收费方式（不给完钱不给完整代码）