使用vite搭建vue3.0和ts项目过程

比眉伴天荒 2022-11-19 00:18 300阅读 0赞

本篇豆芽主要也是分享怎么使用vite去搭建vue-ts项目，搭建之前先来说一说vite,vite是一种新型前端构建工具，能够显著提升前端开发体验。那么豆芽对它的感觉来说，就是快。搭建快，运行快。想了解比较详情的可以访问vite的中文网([https://cn.vitejs.dev/][https_cn.vitejs.dev])可以进一步了解，那么我们也不多说直接进入到正事。

首先我们先要去安装vite(以下的下载我都将使用npm)

npm init @vitejs/app

这个时候我们会发现

npx: 5 安装成功，用时 1.15 秒
    ? Project name: › vite-project//我们项目的名称

继续下一步,因为我们这里主要是创建vue-ts项目所以我们现在vue-ts就好了，点击下一步，会发现创建特别快。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70]  
当我们创建完成之后，需要

npm install
    
    npm run dev//instll完成输入运行

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70 1]

查看项目目录。会发现比较干净，这个时候我们需要先去配置路由。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70 2]  
配置路由，我们下载vue-router

npm install vue-router

下载完成，我们在src文件新建router文件夹，在router文件夹下新建index.ts

index.ts

import {  createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
    // import.meta.env.VITE_APP_URL as any
    
    const routes: Array<RouteRecordRaw> = [
      { 
        path: "/",
        redirect:"/login"
      },
      { 
        path: "/login",
        name: "Login",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import("../view/login/index.vue"),
      },
    ];
    // import.meta.env.VITE_APP_URL as any
    const router = createRouter({ 
      history: createWebHistory(import.meta.env.BASE_URL),
      routes,
    });
    
    export default router;

当我们搭建完路由的时候，我们再去搭建vuex文件，新建store文件夹，文件夹下新建index.ts  
index.ts

import {  createStore } from "vuex";
    
    export default createStore({ 
      state: { },
      mutations: { },
      actions: { },
      modules: { },
    });

一个基本的vuex搭建完成，后续使用可以参考vuex网站，接下来是我们可以对于vite项目跨域配置，我们新建vite.config.ts文件，它的作用等同于vue.config.js

vite.config.ts

import {  defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    // https://vitejs.dev/config/
    export default defineConfig({ 
      plugins: [vue()],
      server: { 
        proxy: { //跨域
          // 如果是 /api 打头，则访问地址如下
          '/api': { 
            target: 'http://localhost:3000',
            changeOrigin: true,
            rewrite: path => path.replace(/^\/api/, '')
          },
        },
      },
    })

一些复杂的配置可以参考vite中文网,这个时候我们一些基本的东西就已经搭建完了，可以去开始开发了

那么豆芽主要是将我们的基本的项目文件夹目录搭建好了，可以参考规范。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70 3]

[https_cn.vitejs.dev]: https://cn.vitejs.dev
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70]: /images/20221022/0538e5b6fe0444d391216144928d0018.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70 1]: /images/20221022/6d8cd82609294d1cbc37d500a5755a0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70 2]: /images/20221022/2d8feeed773c48acb712f5a56d1b3fad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTA4OTcy_size_16_color_FFFFFF_t_70 3]: /images/20221022/fc069b8bd2e247709c4bee21269d0a7d.png