项目创建
- 进行全局vite安装
yarn global add create-vite-app@1.18.0
- 使用vite创建项目
yarn create vite-app projectName
或者
npx create-vite-app projectName
命令.png
提示：npx 除了可以调用项目内部的模块，还可以避免进行全局的安装。这里的npx将 create-vite-app 下载到了一个临时的目录，使用以后再删除，所以以后再次执行命令的时候，会再重新下载 create-vite-app。
-
创建的目录结构
目录.png 进行依赖安装与运行
yarn
yarn dev
依赖安装.png
运行.png
ts的集成
-
将main.js修改为main.ts
ts修改.png -
引入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
路由的集成
- 安装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
- 创建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文件进行改造
<template>
<div>
路由跳转
<router-link to="/">Go to Home</router-link>|
<router-link to="/about">Go to About</router-link>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
}
})
</script>
至此，最简单的vue-router已经集成进入，最终呈现：
router-page.png
总结
至此， 一个简单的vue3+vite+typeScript+vue-router@next的项目尝鲜完成。当然要达到企业级的应用的话，还是有很多路需要去走的，这仅仅是开始。
