vite+typescript从入门到实战(一）

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

npm init vite@latest

npm i

npm i @nutui/nutui@next

npm install vue-router@4

npm install vuex@next --save

/**
 * 路由meta对象参数说明
 * meta: {
 *      title:          菜单栏及 tagsView 栏、菜单搜索名称（国际化）
 *      isLink：        是否超链接菜单，开启外链条件，`1、isLink:true 2、链接地址不为空`
 *      isHide：        是否隐藏此路由
 *      isKeepAlive：   是否缓存组件状态
 *      isAffix：       是否固定在 tagsView 栏上
 *      isIframe：      是否内嵌窗口，，开启条件，`1、isIframe:true 2、链接地址不为空`
 *      roles：         当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
 *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
 * }
 */

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

const dynamicRoutes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: '/',
        component: () => import('@/layout/index.vue'),
        redirect: '/home',
        meta: {
            isKeepAlive: true,
        },
        children: [
            {
                path: '/home',
                name: 'home',
                component: () => import('@/views/Index/index.vue'),
                meta: {
                    title: 'message.router.home',
                    isLink: '',
                    isHide: false,
                    isKeepAlive: true,
                    isAffix: true,
                    isIframe: false,
                    icon: 'iconfont icon-shouye',
                },
            },
        ],
    },
];

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

// 导出路由
export default router;

import router from './router';
const app = createApp(App);


app
.use(router)
.mount('#app');

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

import router from './router';
const app = createApp(App);

import NutUI from "@nutui/nutui";
import "@nutui/nutui/dist/style.css";
app
.use(router)
.use(NutUI)
.mount('#app');

<template>
  <router-view />
</template>

@/views/Index/index.vue
@/views/User/index.vue

<template>
  <nut-tabbar :bottom="true" :safeAreaInsetBottom="true" @tab-switch="tabSwitch">
    <nut-tabbar-item tab-title="首页" to="/home" icon="home" num="11"></nut-tabbar-item>
    <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
    <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
    <nut-tabbar-item tab-title="商城" icon="cart" num="110"></nut-tabbar-item>
    <nut-tabbar-item tab-title="我的" to="/userCenter" icon="my"></nut-tabbar-item>
    
  </nut-tabbar>
  <!-- 主内容区域 -->
  <div class="main-content">
      <router-view />
  </div>
</template>

<script setup lang="ts">
//tab点击事件
const tabSwitch = (v:String):any=>{
    console.log(v)
}

</script>

<style scoped>
.main-content{
    height:calc(100% - 48px);
}

</style>

<nut-tabbar-item tab-title="我的" to="/userCenter" icon="my"></nut-tabbar-item>

/* eslint-disable */

/**
* shims-vue.d.ts的作用
* 为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，
* 加这一段是是告诉 ts，vue 文件是这种类型的。
* 可以把这一段删除，会发现 import 的所有 vue 类型的文件都会报错。
*/

// 声明文件，*.vue 后缀的文件交给 vue 模块来处理
declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

// 声明文件，定义全局变量。其它 app.config.globalProperties.xxx，使用 getCurrentInstance() 来获取
interface Window {
  nextLoading: boolean;
}

/**
 * shims-vue.d.ts的作用
 * 为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，
 * 加这一段是是告诉 ts，vue 文件是这种类型的。
 * 可以把这一段删除，会发现 import 的所有 vue 类型的文件都会报错。
 */

declare module '*.vue' { //declare声明宣告， 声明一个ambient module(即:没有内部实现的 module声明) 
  import Vue from 'vue'
  export default Vue
}

declare module 'vue-echarts'  // 引入vue-echarts

<script lang="ts">
    /* eslint-disable @typescript-eslint/camelcase */
    import { Vue, Component, Watch } from 'vue-property-decorator'
    import ECharts from 'vue-echarts' //报错,按上面的方法在shims-vue.d.ts文件中引入即可
    import 'echarts/lib/chart/line'
    import 'echarts/lib/chart/pie'
    import 'echarts/lib/component/tooltip'
</script>

declare module '*.json';
declare module '*.png';
declare module '*.jpg';
declare module '*.scss';
declare module '*.ts';
declare module '*.js';

declare module "*.json" {
    const value: any;
    export default value;
}

import * as data from './xxx.json';
const word = (<any>data).name;

import type { UserConfig } from 'vite';

const viteConfig:UserConfig = {
    port: 8080,
    hostname: "localhost",
    proxy: {
        '/api': {
            target: 'http://zhanhongzhu.top',
            changeOrigin: true,
            ws: true,
            rewrite: path => path.replace(/^\/api/, '')
        }
    }
}
//导出
export default viteConfig;

/**
 * vite总配置文件
 */
const path = require('path');
import type { UserConfig } from 'vite';
//
const viteConfig: UserConfig = {
    // 端口号(默认3000)
    port: 8080,
    // 是否自动打开浏览器(默认false)
    open: true,
    // 是否开启 https
    // https: false,
    // 服务端渲染
    // ssr: false,
    // 引入第三方的配置
    // optimizeDeps: {
    //     include: ["moment", "echarts", "axios", "mockjs"]
    // },
    // 生产环境路径，类似webpack的assetsPath
    base: './',
    // 打包后目录,默认dist
    outDir: 'www',
    // 别名配置
    alias: {
        // 键必须以斜线开始和结束
        '/@/': path.resolve(__dirname, './src')
    },
    // 代理配置
    port: 8080,
    hostname: "localhost",
    proxy: {
        '/api': {
            target: 'http://zhanhongzhu.top',
            changeOrigin: true,
            ws: true,
            rewrite: path => path.replace(/^\/api/, '')
        }
    }
}

//
export default viteConfig;