首页 > 其他分享 >vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目

vite + vue3 + vue-router4 + ts + element plus + pinia + axios构建项目

时间：2023-04-25 14:56:43浏览次数：37  
标签：vue ts router4 vueApp path import vite

最后是完整的vite.config.ts、main.ts配置

1、先用vite创建一个项目

npm create vite@latest

2、安装element plus

yarn add element-plus @element-plus/icons-vue

vite.config.ts配置组件按需导入，图标自动导入

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

 

import path from 'path'
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'
// @ts-ignore
import Icons from 'unplugin-icons/vite'
// @ts-ignore
import IconsResolver from 'unplugin-icons/resolver'
// @ts-ignore
const pathSrc = path.resolve(__dirname, 'src/types')

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // Auto import functions from Vue, e.g. ref, reactive, toRef...
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ['vue'],

            // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
            // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
            resolvers: [
                ElementPlusResolver(),

                // Auto import icon components
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon',
                }),
            ],

            dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
        }),
        Components({
            resolvers: [
                // Auto register icon components
                // 自动注册图标组件
                //{prefix}-{collection}-{icon},
                // By default, the prefix is set to i while you can customize via config
                // 'ep'是element plus 图标的标识（固定的）https://icon-sets.iconify.design/
                IconsResolver({
                    enabledCollections: ['ep'],
                }),
                // Auto register Element Plus components
                // 自动导入 Element Plus 组件
                ElementPlusResolver(),
            ],

            dts: path.resolve(pathSrc, 'components.d.ts'),
        }),
        Icons({
            autoInstall: true,
        }),

    ],
})

main.ts配置

/**ElementPlus*/
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

$vueApp.use(ElementPlus, {size: 'small', zIndex: 100});

页面文件使用

<i-ep-edit/>
<el-button type="primary">
     <i-ep-edit slot="icon"/>
     按钮
</el-button>

<el-button type="primary" @click="showMessage">showMessage</el-button>
<script setup lang="ts">

const {proxy} = getCurrentInstance() as any;

const showMessage = () => {
    proxy.$message.success({
        message: 'proxy: ',
        type: 'success'
    })
}
</script>

3、安装axios

yarn add axios

main.ts

/**axios*/
import axios from "@/plugins/axios";//配置封装

$vueApp.config.globalProperties.$axios = axios;

4、安装pinia

yarn add pinia

/stores/index.ts

import { createPinia} from 'pinia'
const pinia = createPinia()

export default pinia;

/stores/counter.ts

import {defineStore} from "pinia";
export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0 }),
    getters: {
        double: (state) => state.count * 2,
    },
    actions: {
        increment() {
            this.count++
        },
    },
})

main.ts

/**pinia*/
import pinia from './stores/index';

$vueApp.use(pinia)

页面使用

 <div>
            count:{{ count }},double:{{ double }}
            <el-button type="primary" @click="increment">increment</el-button>
</div>
import {storeToRefs} from 'pinia'
import {useCounterStore} from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const {count, double} = storeToRefs(store)
// 作为 action 的 increment 可以直接解构
const {increment} = store;

5、安装router4

yarn add vue-router

/router/index

import * as VueRouter from 'vue-router'

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home1111</div>' }

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
    { path: '/', component: Home },
    { path: '/about', component:  () => import('@/views/about.vue') },
    { path: '/test', component: () => import('@/views/test.vue') },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes, // `routes: routes` 的缩写
})
export default router;

main.ts

/**路由*/
import router from '@/router/index';
$vueApp.use(router)

 

6、vite.config.ts常用配置@文件路径、css预处理、代理服务https(需要证书，否则会报错)

npm install -D @vitejs/plugin-basic-ssl
import path from 'path'
import {defineConfig} from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        //https证书
        basicSsl(),
    ],
    resolve: {
        alias: [
            {
                find: '@',
                // @ts-ignore
                replacement: path.resolve(__dirname, 'src'),
            }
        ],
    },
    // css预处理器
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/style/constant.scss";`,//变量文件，在其他页面中可以直接使用变量，不用每次引入
            },
        },
    },
    server: {
        https: true,
        host: '0.0.0.0',
        port: 8080,
        proxy: {
            '/api': {
                target: 'https://*****/api',//local环境
                changeOrigin: true, //允许跨域
                rewrite: (path) => path.replace(/^\/api/, '/'),
            },
        }
    }
})

tsconfig.json文件加上如下配置，否则@引入文件会报错

{
  "compilerOptions": {
    ......
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"],
    }
  },

}

7、transition过度效果，和vue2区别是class名称变了

<router-view v-slot="{ Component }">
            <transition name="fade-transform">
                <component :is="Component" />
            </transition>
        </router-view>
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .2s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

 

8、自定义指令

yarn add throttle-debounce

/directive/clickDebounce

import {on, off} from '@/utils/dom'


let fn = null, $vueApp = null;
const debounceDirective = {
    name: 'debounce',
    install(Vue, {defaultTime = 300} = {}) {
        $vueApp.directive('debounce', {
            beforeMount(el, {value, arg}) {
                fn = debounce(arg || defaultTime, value)
                on(el, 'click', fn)
            },

            unMounted: function (el) {
                if (fn) {
                    off(el, 'click', fn)
                }
            },
        })
    },
}
export default (vueApp) => {
    $vueApp = vueApp;
    $vueApp.use(debounceDirective)
}

main.ts

/**指令*/
import debounceDirective from '@/directive/clickDebounce/index.js'

debounceDirective($vueApp);

9、过滤器

/filters/index

const getTime = (time, type = 1) => {
  return 'getTime'
}
export default{
  getTime
}

main.ts

/**过滤器*/
import filters from './filters/index.js'

Object.keys(filters).forEach(
    (k) =>
        ((
            $vueApp.config.globalProperties.$filters ||
            ($vueApp.config.globalProperties.$filters = {})
        )[k] = filters[k])
)

页面使用

   <div>
        {{ $filters.getTime(Date.now()) }}
    </div>

10、打包

打包报错把package.json中

"build": "vue-tsc && vite build",

改成

"build": "vite build",

总结 

import path from 'path'
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'
import basicSsl from '@vitejs/plugin-basic-ssl'
// @ts-ignore
import Icons from 'unplugin-icons/vite'
// @ts-ignore
import IconsResolver from 'unplugin-icons/resolver'
// @ts-ignore
const pathSrc = path.resolve(__dirname, 'src/types')

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // Auto import functions from Vue, e.g. ref, reactive, toRef...
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ['vue'],

            // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
            // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
            resolvers: [
                ElementPlusResolver(),

                // Auto import icon components
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon',
                }),
            ],

            dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
        }),
        Components({
            resolvers: [
                // Auto register icon components
                // 自动注册图标组件
                //{prefix}-{collection}-{icon},
                // By default, the prefix is set to i while you can customize via config
                // 'ep'是element plus 图标的标识（固定的）https://icon-sets.iconify.design/
                IconsResolver({
                    enabledCollections: ['ep'],
                }),
                // Auto register Element Plus components
                // 自动导入 Element Plus 组件
                ElementPlusResolver(),
            ],

            dts: path.resolve(pathSrc, 'components.d.ts'),
        }),
        Icons({
            autoInstall: true,
        }),
        //https证书
        basicSsl(),
    ],
    resolve: {
        alias: [
            {
                find: '@',
                // @ts-ignore
                replacement: path.resolve(__dirname, 'src'),
            }
        ],
    },
    // css预处理器
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/style/constant.scss";`,
            },
        },
    },
    server: {
        https: true,
        host: '0.0.0.0',
        port: 8080,
        proxy: {
            '/api': {
                target: 'https://*******/api',
                changeOrigin: true, //允许跨域
                rewrite: (path) => path.replace(/^\/api/, '/'),
            },
        }
    }
})

 

import {createApp} from 'vue'
import '@/style/index.scss'
import App from './App.vue'

const $vueApp = createApp(App);

/**ElementPlus*/
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

$vueApp.use(ElementPlus, {size: 'small', zIndex: 100});

/**过滤器*/
import filters from './filters/index.js'

Object.keys(filters).forEach(
    (k) =>
        ((
            $vueApp.config.globalProperties.$filters ||
            ($vueApp.config.globalProperties.$filters = {})
        )[k] = filters[k])
)

/**axios*/
import axios from "@/plugins/axios";

$vueApp.config.globalProperties.$axios = axios;

/**pinia*/
import pinia from './stores/index';

$vueApp.use(pinia)

/**指令*/
import debounceDirective from '@/directive/clickDebounce/index.js'

debounceDirective($vueApp);

/**路由*/
import router from '@/router/index';
$vueApp.use(router)

$vueApp.mount('#app')

 

标签：vue,ts,router4,vueApp,path,import,vite
From： https://www.cnblogs.com/gxp69/p/17352577.html

相关文章

  • 使用Vue实现点击事件变颜色并且显示选中文字
    首先需要引入Vue.js!!!!!   直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="../static/vue.js"></script><st......
  • 老杜2023最新Vue实战精讲（二）Vue核心技术
    动力节点老杜全新版Vue教程笔记分享给大家学习の地止：https://www.bilibili.com/video/BV17h41137i4视频教程从Vue2开始讲解，一步一个案例，知识点由浅入深，然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。视频中会把每一个Vue的知识点讲解的非常通透，不但举例......
  • Ubuntu 22.04.1 LTS 系统下JDK8的安装与配置
    一、下载安装包下载地址：JavaDownloads|Oracle二、解压和查看版本tar-zxfjdk-8u371-linux-x64.tar.gz-C/usr/local/java/cd/usr/local/java/jdk1.8.0_371./bin/java-versionjavaversion"1.8.0_371"Java(TM)SERuntimeEnvironment(build1.8.0_371-b09)......
  • uni-app中使用uCharts图表设置横向滚动无法滑动。
    opts:{ color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], padding:[15,10,0,0], enableScroll:true, upd......
  • vue3 拖拽操作学习
    AS-Editor组件git:https://gitee.com/was666/as-editor/tree/vue3.x/体验：http://was666.gitee.io/as-editor/#/home......
  • ts中interface转换class
    引在ts中interface可以表示具体的一种数据结构，但当我们需要将interface转换成class时，直接使用interface的话，会导致一些问题，比如interface中的属性无法被继承，所以我们需要将interface转换成class，这里介绍一种方法。例数据结构interfaceIPerson{name:strin......
  • Ubuntu 22.04.1 LTS 切换国内源
    1、备份原文件cp/etc/apt/sources.list/etc/apt/sources.list.bak 2、清空 sources.list文件中的内容，然后将以下任何一个源复制到文件中，以阿里源为例：vim/etc/apt/sources.listdebhttp://mirrors.aliyun.com/ubuntu/jammymainrestricteduniversemultiversed......
  • 实例解释BCELoss与BCEWithLogitsLoss的关联（二分类问题）
      BCEWithLogitsLoss=Sigmoid+BCELoss，      nn接口                       Function接口nn.BCELoss()                 F.binary_cross_entropy()nn.BCEWithLogitsLos......
  • vue3中如何引入element-icon并使用
    简单来说，步骤就是：安装——注册——按需引入——使用安装#NPM$npminstall@element-plus/icons-vue#Yarn$yarnadd@element-plus/icons-vue#pnpm$pnpminstall@element-plus/icons-vue注册您需要从@element-plus/icons-vue中导入所有图标并进行全局注册。......
  • 办公套件Microsoft Office LTSC 2021最新中文Mac版
    MicrosoftOfficeLTSC2021(office全家桶)中文版是Microsoft为Mac用户推出的一款新iPadMac系列电脑、iPad桌面应用程序。OfficeLTSC2021是MicrosoftOffice系列电脑、iPad电脑和桌面应用程序的新一代操作系统和办公自动化产品。它采用了Mac和Linux操作系统的同步版......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99