- 创建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
文件:
未完待续~