vite+vue3+ts【创建项目】基础配置

一. vite+vue3+ts【创建项目】

1. 通过vite 脚手架

# v3_blog(你的项目名称)
npm init vite v3_blog -- --template vue

2. 选择vue

3. 回车选择vue-ts

4. 回车继续执行下面图示三行代码

5. 执行完后浏览器预览效果

这样一个vite+vue3+ts的项目就创建成功了

二. 基础文件

1. vite.confing.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    }
  },
  base: './', // 打包路径
  server: {
    port: 3008, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    proxy: {
      '/api': {
        target: 'http://www.xxxx.com.cn',
        changeOrigin: true,
        rewrite: (path) => path.replace('/api', '')
      }
    }
  }
})

注：这块会有找不到path 的问题，我们需要先安装类型声明文件
npm install --save-dev @types/node

编辑tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
    "paths": {
      // 用于设置模块名到基于baseUrl的路径映射
      "@/*": [
        "src/*"
      ]
    }
  }
}

2. 添加路由

npm install vue-router@4  //安装路由

创建 src/router/index.ts 文件

/** * createRouter 这个为创建路由的方法 * createWebHashHistory 这个就是vue2中路由的模式， * 这里的是hash模式，这个还可以是createWebHistory等 * RouteRecordRaw 这个为要添加的路由记录，也可以说是routes的ts类型 */
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
// 路由记录，这个跟vue2中用法一致，就不做过多解释了
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/',
    name: 'home',
    component: () => import("@/views/Home/Home.vue"),
    alias: '/home',
    meta: {
      title: '首页'
    }
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;

3. main.ts

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


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