Vue3 + Typescript + Vite 项目创建起手式

一、通过以下指令通过Vite创建Vue3项目

create-vite-app 项目名 \\创建项目
cd 项目名 \\进入项目文件夹
npm install \\处理依赖
npm run dev \\运行

此刻你应该可以看到vite为你准备好的示例项目

现在准备一下依赖

npm install vue-router@4 \\加载路由依赖
npm install -D sass-loader node-sass sass  \\安装sass，如果你不想使用nass，可以不安装此依赖

二、编辑页面

删除默认创建的src/components/HelloWorld.vue

在src中创建目录views，并在views中创建Home.vue和 About.vue两个文件

将Home.vue编辑为以下代码:

<template>
  <div>
    <p>我是主页</p>
  </div>
</template>

<script setup lang="ts">
</script>
<style lang="scss" scoped> //如果你在安装依赖的时候没有安装sass，请将scss改成css
</style>

将About.vue编辑为以下代码:

<template>
  <div>
    <p>我是关于</p>
  </div>
</template>

<script setup lang="ts"> 
</script>
<style lang="scss" scoped>  //如果你在安装依赖的时候没有安装sass，请将scss改成css
</style>

三、引入路由

(1)在src文件夹下创建router文件夹，并在其内创建index.ts

(2)配置信息

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { defineAsyncComponent } from 'vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/', //路由路径
    name: 'Home', //名称
    component: defineAsyncComponent(() => import('../views/Home.vue')) //加载vue文件
  },
  {
    path: '/about',
    name: 'About',
    component: defineAsyncComponent(() => import('../views/About.vue'))
  }
]

const router = createRouter({
  history: createWebHistory(), //使用历史模式
  routes
})

export default router

注意，Typescript不认识.vue格式的文件，所以会报出以下错误

找不到模块“../views/Home.vue”或其相应的类型声明

要解决以下错误很简单，只需要在根目录创建文件shims.d.ts

修改为以下内容，保存后生效

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

（3）应用路由

最在main.js中应用并使用路由即可

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'

const app = createApp(App);

app.use(router)

app.mount('#app')

为了保持统一，我把main.js改成了main.ts，如果你也想要这么做，很简单。
你只需要将main.js的后缀名从.js改为.ts，然后打开根目录下的index.html，将其中的<body>标签下的
<script type="module" src="/src/main.js"></script>修改为<script type="module" src="/src/main.ts"><\script>

修改/src/App.vue为以下内容:

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: "App"
};
</script>

四、完成

现在照理来说应该已经完成了伟大的起手式，现在在终端中输入npm run dev照理来说就可以了

我们打开http://localhost:3000/ 就可以看到“我是主页”字样，而打开http://localhost:3000/about 就可以看到"我是关于"

至此，起手式就完成了，你现在就可以开发自己需要的项目组件之类的坨坨了。

五、所有代码大举出

最终文件结构

/src/App.vue

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: "App"
};
</script>

/src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { defineAsyncComponent } from 'vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: defineAsyncComponent(() => import('../views/Home.vue'))
  },
  {
    path: '/about',
    name: 'About',
    component: defineAsyncComponent(() => import('../views/About.vue'))
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

/src/views/About.vue

<template>
  <div>
    <p>我是关于</p>
  </div>
</template>

<script setup lang="ts">
</script>
  
<style lang="scss" scoped> //如果你在安装依赖的时候没有安装sass，请将scss改成css
</style>

/src/views/Home.vue

<template>
  <div>
    <p>我是主页</p>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped> //如果你在安装依赖的时候没有安装sass，请将scss改成css
</style>

好家伙，不会有人看到这里了吧~ 针不戳