搭建简单的vue-ts程序框架并引入常用的包的包

最新推荐文章于 2024-07-24 16:02:13 发布

creawse

最新推荐文章于 2024-07-24 16:02:13 发布

阅读量311

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xxxmou/article/details/132155466

版权

本文介绍了如何使用Vite创建Vue TypeScript项目，详细讲解了安装路由、配置axios以及添加ElementPlus组件的过程。首先，创建Vue项目，接着安装路由并配置，再安装axios并对其进行封装，最后添加ElementPlus组件并完成全局配置。

摘要由CSDN通过智能技术生成

首先使用vite创建一个vue项目
使用以下命令创建一个vue项目项目名为vueproductdeom
npm init vite@latest vueproductdeom -- --templete vue-ts
在这里插入图片描述选择Vue
语言选择ts

对于ts，还有修改文件配置，无法直接打开项目

安装 @types/node
npm install @types/node --save-dev

配置vite.config.ts文件

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


// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [vue()],
  server: {
   
    port: 5000  // 你需要定义的端口号
  },
  resolve: {
   
    // 配置路径别名， @就代表当前项目的绝对路径 
    // __dirname是一个全局变量，表示当前模块所属目录的绝对路径
    // path.resolve返回一个以相对于当前的工作目录（working directory）的绝对路径, 
    alias: {
   
      '@': path.resolve(__dirname, './src'),
    }
  },

})

到这里就可以使用
npm run dev启动项目了。
在这里插入图片描述接下来安装一些必要的组件和简单使用

在这里插入图片描述
将App.vue，HelloWorle.vue，style.css文件中的内容删除，我用不到。

2安装路由并配置

npm install vue-router@4

在这里插入图片描述
创建router目录,创捷index.ts文件，在index.tx文件写路由信息、
在tsconfig.ts文件中加入上图配置

"baseUrl": ".",
    "paths": {
   
      "@/*": ["src/*"]
    }

以下为一个简单的路由

import {
    createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
   
        path: '/',
        name: 'home',
        component: () => import("@/views/Index.vue"),
        meta: {
    title: '首页' }
    }
]

const router