vue3项目的搭建（vue3+vite+ts）

今天给大家简单介绍一下关于vue3项目的搭建（vue3+vite+ts）。

项目初始化

yarn create vite

选择vue和TypeScript，创建项目后，进入项目目录，安装相关依赖：

yarn
#或者
npm install

#安装完成后，执行yarn dev或npm run dev，即可启动项目。

配置路径别名

#在vite.config.ts中配置路径别名
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias: {
      "@": path.resolve(__dirname,"src")
    }
  }
})

如果提示无法识别path模块，需要安装一个依赖@types/node:

npm install @types/node
#或者
yarn add @types/node 

router配置

yarn add vue-router@4
#或者
npm install vue-router@4

然后在src目录下创建router/index.ts文件。

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: () => import("@/views/home/index.vue"),
  },
];
const router = createRouter({
      history,
      routes
})
export default router

在src目录下创建views目录，然后创建home/index.vue文件:

<template>
    <div>hello world!</div>
</template>

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

<style scoped>
</style>

在main.ts中引入router文件

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

createApp(App).use(router).mount('#app')

如果引入router的时候编译器报错：找不到模块“@/router”或其相应的类型声明。ts(2307)，这时候需要在tsconfig.json中配置一下：

{
  //...
  "compilerOptions": {
    //...
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
    //...
  }
  //...
}

store配置

#安装pinia

yarn add pinia
# 或者
npm install pinia

在main.ts文件中引入pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia'
const pinia = createPinia()

createApp(App).use(router).use(pinia).mount('#app')

在src目录下创建store/user.ts文件

import { defineStore } from "pinia";

const storeUser = defineStore('user',{
    state: ()=>({
        username: '小李',
        school: '清北',
    }),
})

export default storeUser

引入user.ts

<template>
    <div>hello world!</div>
    <div>姓名：{{username}}，学校：{{school}}</div>
</template>

<script lang="ts" setup name="Home">
import storeUser from '@/store/index'
const {username,age} = storeUser()
</script>

<style scoped>

</style>

自动导入vue

#安装插件unplugin-auto-import

yarn add unplugin-auto-import
#或者
npm install unplugin-auto-import

在vite.config.ts文件中进行配置

import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
  plugins: [
    //...
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      //...
    })
    //..
  ] 
  //...
})

UI配置

#安装element-plus

yarn add element-plus
#或者
npm install element-plus

#安装unplugin-vue-components 和 unplugin-auto-import：

yarn add npm install -D unplugin-vue-components unplugin-auto-import
#或者
npm install unplugin-vue-components unplugin-auto-import

在vite.config.ts中进行配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

//按需引入ui组件
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

组件样式引入

<template>
    <div>hello world!</div>
    <div>姓名：{{username}}，学校：{{school}}</div>
    <el-button @click="showMessage" type="success">Success</el-button>
</template>

<script lang="ts" setup name="Home">
import storeUser from '@/store/index'
//需要手动换导入样式
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

const showMessage = ()=>{
    ElMessage.success('test')
}

const {username,age} = storeUser()
</script>

<style scoped>

这样应该就可以了~

以上是编程学习网小编为您介绍的“vue3项目的搭建（vue3+vite+ts）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。