vue3.0+vite+router搭建项目

（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 文件

router:根据不同的地址跳转到不同的页面

一、vue-router的使用

1.下载路由模块 npm vue-router --save

2.在router.js中

先引入路由import Router from 'vue-router'

接着通过use在vue全局注册使用Vue.use（Router）

最后将路由表导出 export default new router({ })

3.在main.js中引入路由组件 import router from './router'

4.以参数的形式写运拿到根目录中 在vue实例对象中声明router

5.最后在App.vue的模板中设置路由出口<router-view></router-view>

二、添加组件步骤：

1.在src的components下添加组件 apple.vue

2.在app.vue的script标签

引入 新添的组件敏悄让 import apple from './componets/apple'

在data后注册每个组件 components:{apple}

在template标签里用组件名写一个标签<apple></apple>

3.通过命令npm run dev 运行项目查看组件是否添加成功

三、将组件添加到路由表的步骤：

1.安装路由 npm install vue-router --save

2.将components里的组件桥局引入配置到router.js中

先引入组件import...

再配置路由路径

3.在main.js中使用router

先引入路由 import...

再在vue实例中指定router

4.在App.vue中模板中添加路由链接 router-link和出口router-view

---