【Vue3+Vite+TS】1.0 项目搭建

Posted 2023-03-24

参考技术A 搭建vite项目的命令。

我的目前是6.14.15，升级一下：

目前是8.3.0

新建vite项目命令行：

输入y即可。
安装完毕：

用vscode打开：

运行node初始化：

安装完成：

vite项目默认端口3000，修改方式如下：

修改vite.config.ts

启动命令：

安装路由和element-plus：

安装完成：

新建src\router\index.ts

新建src\views\Home\index.ts

修改src\router\index.ts

修改main.ts

修改src\App.vue

运行项目:

引用element-ui，去官网抄：

修改src\views\Home\index.vue

因为我们要用到sass（全新版本叫scss），需要安装一下sass
：

安装完成：

修改src\App.vue

element-plus版本将图标单独打包， 需要单独引入
)：

修改src\main.ts

可以看到打印了很多对象名称。

新建src\utils\index.ts

修改src\main.ts

使用,修改src\App.vue

为了更方便使用，可以优化如下：
修改src\App.vue

这样src\views\Home\index.vue可以调整为：