1、安装pnpm npm install pnpm -g 2、安装vite pnpm install vite -D 3、在需要的文件夹下建项目 npm create vite@latest 打开 4、main.ts引入element-plus npm install element-plus--save main.ts import ElementPlus from 'element-plus' import * as ElementPlusIconsVue from '@element-plus/icons-vue'...
打开viteconfig.ts文件夹: importvuefrom'@vitejs/plugin-vue'import{UserConfig,ConfigEnv,loadEnv,defineConfig}from"vite";//配置路径别名importpathfrom"path";constpathSrc=path.resolve(__dirname,"src");//自动导入插件importAutoImportfrom"unplugin-auto-import/vite";importComponentsfrom"unplugin-vue-compo...
Vue-cli提供以下特性供选择，可根据项目需要进行选择添加的配置项：通过上下键进行配置项切换，对需要选择的配置项使用空格键进行选中/反选 Babel：使用babel，便于将我们源代码进行转码（把es6=>es5）TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处Progressive Web App(PWA)...
1、修改vite.config.ts import{defineConfig}from 'vite'import vue from '@vitejs/plugin-vue'import path from "path";//这个path用到了上面安装的@types/node// https://vitejs.dev/config/export default defineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve('./src')//@代替src}}})...
1、修改vite.config.ts 2、修改tsconfig.app.json (ts) 在compilerOptions中添加下面的最后2项:“baseUrl"和"paths” 添加下面代码 "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } 13.项目结构,在src文件夹下,添加api,router ,store,views文件夹 ...
TS实战项目三十:Vue3项目创建 1349观看 0弹幕 一、界面预览 二、相关知识点 1. tsc编译 2. tsconfig.json配置项 3. 模块定义及导入导出 4. 类定义 5. 参数属性 6. 存取器 7. 继承 8. 抽象类 9. 抽象方法 10. 接口 11. 枚举 12. 静态变量 ...
本文章实现了vue3 + ts 的组件库,实现了如下功能呢: 1、可以进行对组件进行全局注册或者按需引入; 2、组件在使用时有较有好的参数以及类型提示; 3、对代码进行压缩减小代码包的大小; 开始 1、准备 开始前需要先安装vue-cli,因为项目使用vue-cli进行模板初始化; ...
项目目录下新建views文件夹,添加文件(home、login、test) image.png 三、创建router文件夹 3.1、在src下新建router文件夹,在router文件下创建index.ts和modules文件夹 image.png 3.2、在 modules 文件夹下创建模块化的 ts 文件,并填入对应的代码 image.png ...
vue3已经正式发布有一段时间了,本着学习使人进步的原则,就开始了vue3的实践之路。vue3推出了一个web开发构建工具vite,那就放弃使用vue-cli尝尝鲜吧。vue3项目也是用了typescript,并且现在ts也很火,就正好一起实践一下。 准备工作 确保安装了node 开始 ...