vue3.0+vite+elementPlus+ts项目搭建

vite脚手架搭建基础demo

一、安装vite

使用npm

npm create vite@latest

使用yarn

yarn create vite

Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

二、创建基础demo

npm

npm create vite@latest my-vue-app --template vue

yarn更换命令即可

执行后选择vue+ts模板（键盘上下键选择回车即可）

三、启动基础demo

npm install
npm run dev

跑起来后需要配置一哈IP访问才能通过IP进行访问

vite.config.ts文件

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  ++ server: {
    host: '0.0.0.0'
  }
})

引入UI组件elementPlus

一、安装elemenPlus

npm install element-plus --save

二、引入elementPlus

跟elementUI一样有全局引入和按需引入两种方式

1.全局引入

在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
++import ElementPlus from 'element-plus'
const app = createApp(App)
++app.use(ElementPlus, { size: 'small', zIndex: 3000 }).mount('#app')

引入即可全局使用，但是这种方式会导致打包文件过大

1.按需引入

安装插件

npm install -D unplugin-vue-components unplugin-auto-import

配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
++import AutoImport from 'unplugin-auto-import/vite'
++import Components from 'unplugin-vue-components/vite'
++import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
   ++ AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
   ++ Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    host: '0.0.0.0'
  }
})

然后在用到的页面进入单独引入即可使用

这种方式大大渐少了包的体积

使用proxy配置代理转发以及配置使用@路径引入

一、proxy配置代理转发+变更启动端口

主要是为了解决跨域

vite.config.ts文件中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    host: '0.0.0.0',
   ++ port: 9999,//更改启动端口
    // 反向代理
  ++  proxy: {
        '/api': {
            target: 'http://10.111.42.142:8000',//代理的地址
            changeOrigin: true,
            // rewrite: path => path.replace(/^\/api/, '')
        }
    }
  }
})

二、配置使用@路径引入（@替换‘…/…/’）

根目录下vite.config.ts文件

/*
 * @Author: jona
 * @Date: 2022-03-07 16:03:06
 * @LastEditTime: 2022-03-09 11:47:41
 * @LastEditors: jona
 * @Description: 
 * @FilePath: \sasp2.0\vite.config.ts
   */
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import AutoImport from 'unplugin-auto-import/vite'
   import Components from 'unplugin-vue-components/vite'
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
++import { resolve } from 'path' // 主要用于alias文件路径别名
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    host: '0.0.0.0',
    port: 3001,//更改启动端口
    // 反向代理
    proxy: {
        '/api': {
            target: 'http://10.111.42.142:8000',//代理的地址
            changeOrigin: true,
            // rewrite: path => path.replace(/^\/api/, '')
        }
    }
  },
  ++resolve: {
    alias: {
      '@': resolve(__dirname, '.', 'src'),
    },
  },
})
//
import { resolve } from 'path' // 主要用于alias文件路径别名
resolve: {
    alias: {
        '@': resolve(__dirname, '.', 'src'),
    },
},

在 tsconfig.json中

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    ++"baseUrl": ".",
    ++"paths": {//路径映射相对于baseUrl
      "@/*": [
        "src/*"
      ]
    },
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置完成使用

import request from "@/uitls/request"

若要有路径选择提示安装插件： Path Intellisense

vscode插件库中搜索安装即可

其他ide自行安装

tip：import { resolve } from ‘path’ 会报错找不到path模块

因为path是node.js的用法，但是此处事ts文件需要安装ts的类型识别文件

npm install -D ts-node               # 在你的本地项目中
npm install -g ts-node               # 或者全局TypeScript使用（推荐）
npm install -D tslib @types/node     # 取决于你的配置

这样就可以正常识别node.js的path