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

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

1. 通过vite 脚手架

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

2.选择vue

3. 回车选择vue-ts

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

5. 执行完后浏览器预览效果 不出意外会出错

vite不像node或cli，会自动帮助我们执行npm i (install)命令去下载相关依赖，需要我们手动下载
执行 npm i 果然下载很多依赖

6. 完成之后

二. 基础文件

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

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')

三 出现的问题

如果新建vue3+ts+vite的项目出现了找不到模块“./App.vue”或其相应的类型声明的报错，是因为ts不能识别.vue的文件，如果要解决这个问题就需要在根目录下的env.d.ts文件添加一下配置

// 按照官网创建项目的方式就有这个文件，没有就自己创建一个
declare module "*.vue" {
  import { defineComponent } from "vue";
  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

如果在没有这个文件的情况下自行创建了文件，那么还需要在tsconfig.ts文件里面添加下面的配置

安装scss

npm install --save-dev sass