vue3+vite+ts project construction and pitfalls

Project setup

I have also built a vue3 project before, but I did not introduce ts because I considered it simple to get started. This time we used it completely
vue3+vite+ts
For some environment and directory configuration, you can read the following article
Build a simple vue3 project

Start creating a project

1. Open the DOS window at the location of the project that needs to be created (shift+right mouse button) and select to open the powershell window here.
2. Type npm init @vitejs/app and press Enter

 npm init @vitejs/app

3. Project name: Enter the project name
4. Select a framework: select vue
5. Select a variant Select vue-ts
6. cd project name
7. npm install
8. npm run dev

You can first make a specification for the file and create the following folder to store the corresponding resources.

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

Add an alias and configure @ to point to src

根更目录找到 vite.config.ts

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    
     resolve } from "path" 
const pathResolve = (dir: string) => resolve(__dirname, dir)

export default defineConfig({
    
    
  server:{
    
    
    port: 9981 // 端口号
  },
  plugins: [
    vue(),
  ],
  resolve: {
    
    
    alias: {
    
    
      "@": pathResolve("./src"),   // 别名
    }
  }
})

Step on the trap

These two lines after the configuration
import { resolve } from “path”
const pathResolve = (dir: string) => resolve (__dirname, dir)
There is an error message
Solution
The path is marked red and the module 'path' cannot be found

Run the following command to solve the problem perfectly

npm install @types/node --save-dev

Introducing Element UI

Refer to Element pipe network installation

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

Complete introduction

If you don't care much about the size of the packaged file, it will be more convenient to use a full import.

// main.ts
import {
    
     createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Volar support

If you use Volar, specify the global component type via compilerOptions.type in tsconfig.json.
We are using volar here, so we need to configure it

// tsconfig.json
{
    
    
  "compilerOptions": {
    
    
    // ...
    "types": ["element-plus/global"]
  }
}

Routing configuration

1. Install vue-router

npm i vue-router@4

2. Find the router folder in the src directory and add the index.ts file under the folder

import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: '/home',
    name: 'Home',
    component: () => import('@/pages/demo/home.vue')
  },
  {
    
     path: '/', redirect: {
    
     name: 'Home' } }
]
 
const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})
 
export default router

3. Mount in main.ts

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

Create the corresponding test file home.vue in the pages folder

<template>
    <h1>hello, world</h1>
</template>

Modify App.vue file

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

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

<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

View page

Problems that arise

router.ts

After modification, the error will not be reported if the alias @ is not used

At this time, you may think that the alias does not work but when you reported the error before You can also open the corresponding routing page
and the routing configuration in route.ts is also using @, so there should be no problem

Test whether element UI is introduced correctly

Simply introduce a button on the home page

<template>
    <h1>hello, world</h1>
    <el-button type="primary">elmentUi button </el-button>
</template>

The problems I encountered before when using element and router were not encountered this time.

The element-plus label is highlighted in red

tsconfig.ts

"vueCompilerOptions": {
    
    
  "experimentalDisableTemplateSupport": true
 }

I have searched a lot for this problem online but have not been able to solve it
The reason for reporting this error should be that the router version is incompatible with vue3
The information only says vue3 needs to be used with router4 or above, but I am right here
Anyone who knows can tell me the solution