Vue3+vite+ts project construction

node environment preparation

node -v  //查看node版本,Vite 需要 Node.js 版本 >= 12.0.0

install vite

npm init vite@latest //或者yarn create vite

After the installation is successful, select the vue enter key with the arrow keys, as shown in the figure below:
insert image description here
After selection, select the vue-ts enter key with the arrow keys, as shown in the figure below:

Follow the prompt command to enter the project directory to install the dependent execution script. The prompt command is as shown in the figure below:
insert image description here
After the execution is completed, the following prompt appears, which proves that the project initialization is successful.

Copy http://localhost:3001/ link or ctrl + left mouse button browser to open
vscode editor installation Volar
has some problems with ts support due to vetur. It is recommended to uninstall or disable vetur and install the Volar plug-in directly.
The project integrates Element Plus

 npm install element-plus --save //或yarn add element-plus

Automatic on-demand import
The unplugin-vue-components and **unplugin-auto-import** plug-ins recommended by Element Plus documents can realize automatic on-demand import,

npm install -D unplugin-vue-components unplugin-auto-import

Add the following configuration in vite.config.ts

// 
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
    
    
  plugins: [
    // ...
    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

In this way, there is no need to manually import
the project integration vue-router every time a new component is used

npm install vue-router@4

Note: The version using vue-router 4.x in vue3 is very different from the previous one in writing

// 以前是
// import Router from 'vue-router'
//我们需要new Router()

//在src目录下新建router文件夹 ,在router文件夹中新建index.ts,写入如下代码
//在src目录下新建views文件夹,在views文件夹下新建Home.vue文件
import {
    
     createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'//引入自己建的vue组件
const routes: RouteRecordRaw[] = [
  {
    
    
    path: '/',//必填项
    component: Home,//必填项
  },
]
const router = createRouter({
    
    
  history: createWebHistory(),
  routes,
})
export default router

Modify the main.ts file code as follows:

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

So far we have integrated Element Plus and vue-router. Let’s verify it.
Modify the Home.vue file code as follows:

<script setup lang="ts">
import {
    
     ref } from 'vue'
// defineProps<{ msg: string }>()
const count = ref(5)
console.log(count.value)
</script>

<template>
  //直接使用 Element Plus的button组件
  <el-button type="primary" @click="count++">count is: {
    
    {
    
     count }}</el-button>
</template>

<style scoped></style>

Modify the code in App.vue as follows:

<template>
  <router-view></router-view>
</template>
<script setup lang="ts"></script>

<style></style>

Enter npm run dev on the command line to start the project, I will see Local: http://localhost:3001/, and enter your Local: in the browser to see the following address

call it a day

Vue3+vite+ts project construction

Guess you like