vue3+TypeScript+vite+ElementPlus项目创建及后续优化

• 创建vue3+ts+vite项目：npm init @vitejs/app vue3-vite-ts-elementplus --template vue-ts
• 初始化：
  

• 项目初始化后默认无router和vuex，需npm安装：npm i vue-router@next vuex@next -S
• 

注意：vue3.0只支持router和vuex必须是4.0及以上版本

• 启动服务：npm run dev 

出现此问题

• 因为IP没有做配置，所以不能从IP启动，需要在 vite.config.ts做相应配置： 在 vite.config.ts中添加 server.host 为 0.0.0.0

 

保存后重启解决~

• 配置别名alias：

vite构建的vue默认是没有@别名的，所以需要我们手动在 vite.config.ts配置

import { resolve } from 'path';

resolve:{
	alias:[{ find: '@', replacement: resolve(__dirname, 'src') }]
},

 vite.config.ts 中，如果使用 __dirname + path 方式写地址的话，如果 TS 报错提示找不到，则需要下载 @types/node

npm i -D @types/node

• 使用Element Plus UI组件：

先npm安装组件：npm install element-plus --save

按需加载操作：首先，安装vite-plugin-style-import：npm install vite-plugin-style-import -D

安装sass预编译组件：npm install sass --save-dev

npm install sass-loader --save-dev

新建elementplus.ts文档：

import 'element-plus/packages/theme-chalk/src/base.scss';
import {
    ElButton,
    ElLoading,
    ElMessage,
    ElMessageBox,
    ElNotification,
} from 'element-plus';
​
export const components: any[] = [
    ElButton,
]
​
export const plugins: any[] = [
    ElLoading,
    ElMessage,
    ElMessageBox,
    ElNotification,
]

在main.ts文件引入elementplus.ts

修改vite.config.ts文件：

未完待续~