vue3.0+vite+router搭建项目

Posted 2023-03-20

参考技术A （1）、去 Node.js 官网 安装node

（2）、配置git bash

（3）安装yarn（yarn比npm更加好用）

（4）、安装yarn淘宝源和npm淘宝源
yarn设置镜像:

npm设置为淘宝镜像

（1）、安装全局vite

可以改成这个创建

（2）、创建项目（项目名：mangoUI）

创建成功之后有三个指令 cd mangoUI 和 yarn install ， yarn dev 依次执行，项目创建成功。

注意：使用vscode打开最好安装一个插件：Vue 3 snippets，方便模板建立。

（1）、查看所有路由版本：

（2）、安装路由（vue-router>=4.0.0）

（3）、初始化路由

情景一：打开main.js，初始化路由。

情景二：（使用ts语法）将main.js改成main.ts，初始化路由。别忘了index.html引用main.js路径后续要改成main.ts。

这时组件引用路径会报一个错误，这是因为Typescript只能理解.ts文件，不能理解.vue文件。

解决报错方法：在根目录新建目录shims-vue.d.ts，告诉TS如何理解.vue文件

如果关闭shims-vue.d.ts还是报错，再在根目录创建一个 tsconfig.json 文件

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

参考技术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可以调整为：