vue3+vite+typeScript+vue-router@next项目搭建

项目创建

1. 进行全局vite安装

yarn global add [email protected]

2. 使用vite创建项目

yarn create vite-app projectName
或者
npx create-vite-app projectName

命令.png

提示：npx 除了可以调用项目内部的模块，还可以避免进行全局的安装。这里的npx将 create-vite-app 下载到了一个临时的目录，使用以后再删除，所以以后再次执行命令的时候，会再重新下载 create-vite-app。

3. 创建的目录结构

   
   
   目录.png

4. 进行依赖安装与运行

yarn
yarn dev

依赖安装.png

运行.png

ts的集成

1. 将main.js修改为main.ts

   
   
   ts修改.png

2. 引入vue文件报错

   
   
   报错.png
   
   

   由于在ts中并不能识别.vue是什么文件，所以需要进行一个处理，需要在src目录下创建shims-vue.d.ts

declare module '*.vue' {
  import { Component } from 'vue'
  const component: Component
  export default component
}

3.将index.html中的main.js 重命名为main.ts

重命名.png

至此vue3+vite+ts 已经可以运行起来了。

myproject.png

路由的集成

1. 安装vue-router

yarn add vue-router@next 

使用 yarn add vue-router 上安装的vue-router3,这里我们需要安装vue-router@next。
可以使用 npm info vue-router versions 来查看所有的vue-router 的版本，然后指定版本去安装。

versions.png

2. 创建src/components/Home.vue src/components/About.vue src/router/index.ts

import  { createRouter ,createWebHashHistory} from "vue-router"
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import errorPage from '../components/404.vue'
const routes = [
  { path: '/', component: Home},
  { path: '/about', component: About },
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export { router }  

3.在main.ts中引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import {router} from './router'
createApp(App).use(router).mount('#app')

4.Helloworld.vue文件进行改造

至此，最简单的vue-router已经集成进入，最终呈现：

router-page.png

总结

至此， 一个简单的vue3+vite+typeScript+vue-router@next的项目尝鲜完成。当然要达到企业级的应用的话，还是有很多路需要去走的，这仅仅是开始。