web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

vue3项目的搭建(vue3+vite+ts)

1370 ℃

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

项目初始化

yarn create vite

选择vueTypeScript,创建项目后,进入项目目录,安装相关依赖:

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>

这样应该就可以了~

一款快速开发后中后台系统框架——Bag-Admin

Vite中文官方文档介绍

Element UI中文官网Element Plus是一套基于Vue3.0的桌面端组件库

vue3项目如何正确引入新版高德地图(完整代码)

vue3如何解决store.state.count错误的取值

标签: ts, vite, vue3

上面是“vue3项目的搭建(vue3+vite+ts)”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2952.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计3375个字,预计阅读时长23分钟
生活小工具,收录了80多款小工具
上一篇: win7系统设置防火墙报0x8007042c错误解决方法
下一篇: 国家送给全国人民的9个免费神器(赶紧收藏)
x 打工人ai神器