Vue3 + Typescript + Vite projects are created manually

Create a Vue3 project through Vite with the following instructions

Create-viet-app project name \\ Create projectcdThe project name \\ goes into the project folder NPM install \\ processing relies on NPM run dev \\ to runCopy the code

At this point you should be able to see the sample project Vite has ready for you

Now prepare the dependency

NPM install vue-router@4 \ load route dependency NPM install -d sass-loader node-sass sass \ Install sass, if you do not want to use nass, you do not need to install this dependencyCopy the code

---

Second, edit the page

Delete the default created SRC/components/HelloWorld vue

Create directory views in SRC and create two files home. vue and about. vue in views

Edit home.vue to the following code:

<template>
  <div>
    <p>I am a home page</p>
  </div>
</template>

<script setup lang="ts">
</script>
<style lang="scss" scoped>// If you did not install sass when installing dependencies, change SCSS to CSS</style>
Copy the code

Edit about.vue to the following code:

<template>
  <div>
    <p>I was about</p>
  </div>
</template>

<script setup lang="ts"> 
</script>
<style lang="scss" scoped>// If you did not install sass when installing dependencies, change SCSS to CSS</style>
Copy the code

---

3. Import routes

(1) Create a router folder under SRC and create index.ts in it

(2) Configuration information

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/'.// Routing path
    name: 'Home'./ / name
    component: defineAsyncComponent(() = > import('.. /views/Home.vue')) // Load the vue file
  },
  {
    path: '/about'.name: 'About'.component: defineAsyncComponent(() = > import('.. /views/About.vue'))}]const router = createRouter({
  history: createWebHistory(), // Use history mode
  routes
})

export default router

Copy the code

Note that Typescript does not recognize.vue files, so it reports the following error

Unable to find module ".. /views/ home.vue "or its corresponding type declaration

To resolve the following error, simply create the file shims.d.ts in the root directory

The following changes take effect after the Settings are saved

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

(3) Application routing

It is best to apply and use routing in 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')

Copy the code

To keep things consistent, I changed main.js to main.ts, which is easy if you want to do the same. All you need to do is change the suffix of main.js from.js to.ts, and then open the index.html file in the root directory,

Change/SRC/app. vue to the following:

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

<script>

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

Copy the code

Four,

By now you should have done the great bootloader, so just type NPM run dev in the terminal and you should be done

We can see open http://localhost:3000/ with the words “I’m home page”, and open http://localhost:3000/about can see “I is about”

With that done, you can now develop your own project components and the like.

Five, all the code out

1. Final file structure

/src/App.vue

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

<script>

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

Copy the code

/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
Copy the code

/src/views/About.vue

<template>
  <div>
    <p>I was about</p>
  </div>
</template>

<script setup lang="ts">
</script>
  
<style lang="scss" scoped>// If you did not install sass when installing dependencies, change SCSS to CSS</style>
Copy the code

/src/views/Home.vue

<template>
  <div>
    <p>I am a home page</p>
  </div>
</template>

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

<style lang="scss" scoped>// If you did not install sass when installing dependencies, change SCSS to CSS</style>
Copy the code

Boy, no one’s gonna see this