vue3初探----项目构建

项目构建

一、vue3初探—vue3新特性学习

二、vue3初探—在vue3和vuex4.x中使用typescript

三、vue3初探----(vue3项目)vuex4.x中使用typescript最终写法

四、在三中用到的一些TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters

五、vue3初探----项目构建

六、vue3初探----vue3的一些变化

vite

构建

npm init @vitejs/app demo-vue3-vite
选择vue,选择vue-ts
cd demo-vue3-vite
npm install
npm run dev

打包

npm run build

配置 @ 指向 src 目录、 服务启动端口、打包路径、代理

vite.config.ts的配置和vue.config.js基本一致

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
        }
    },
    base: './', // 设置打包路径
    server: {
        port: 4000, // 设置服务启动端口号
        open: true, // 设置服务启动时是否自动打开浏览器
        cors: true, // 允许跨域
        // 设置代理，
        proxy: {
            '/api': {
                target: 'http://xxx.xxx.xxx.xxx:8000',//代理的地址
                changeOrigin: true,
                secure: false,
                rewrite: (path) => path.replace('/api/', '/')
            }
        }
    }
})

Vue Router 4

npm install vue-router@4

基本用法和之前一致有少许的改变

src\routers\index.ts

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

// 可以通过扩展 RouteMeta 接口来配置 meta 字段的TypeScript支持呢？
declare module 'vue-router' {
    interface RouteMeta {
        // 是可选的
        requiresAuth?: boolean
        // 每个路由都必须声明
        title: string
    }
}

// 引入 RouteRecordRaw 类型以提供内容的校验与提示
const routes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'HomePage',
        component: () => import('@/views/store-demo.vue'),
        meta: { requiresAuth: true, title: 'store-demo' }
    },
]

// new Router 变成了 createRouter
const router = createRouter({
    // 使用 hash 模式。
    history: createWebHashHistory(),
    routes,
})
//  和之前一样
router.beforeEach((to, from, next) => {
})
export default router

main.ts

import router from '@/routers/index'
app.use(router);

vue中

import {useRoute} from 'vue-router'
export default defineComponent({
    setup() {
        const route = useRoute()
        return {
           
        };
    }
});
  

vuex4

在vue3对typeScript的支持中文件中