3分钟教你创建一个vite+ts+vue3的脚手架2024年。

main.ts 文件

import { createApp } from ‘vue’

import App from ‘./App.vue’

import store from ‘./store’// 引入

createApp(App).use(store).mount(‘#app’) // 使用

配置路由

在src下面创建一个 view 文件 在里面创建一个 index.vue home.vue 文件 文件里面要写如内容

index.vue文件 的内容 还有一个 home.vue （自己创建）

首页

在src里面新建 router文件夹创建 index.ts 文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from ‘vue-router’

import HomeView from ‘…/view/index.vue’

const routes: Array = [

{

path: ‘/’,

name: ‘index’,

component: HomeView,

},

{

path: ‘/home’,

name: ‘home’,

component: () => import(‘…/view/home.vue’)

}

]

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

在main.js文件里面引入

import { createApp } from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

createApp(App).use(store).use(router).mount(‘#app’)

清除vite自带的文件

找到 App.vue 写入

components 清除 HelloWorld.vue 文件 （如果没有引入HelloWorld.vue 文件 还是显示引入了重新启动）

tsconfig.json 文件夹写入

{

“compilerOptions”: {

“target”: “esnext”,

“useDefineForClassFields”: true,

“module”: “esnext”,

“moduleResolution”: “node”,

“strict”: true,

“jsx”: “preserve”,

“sourceMap”: true,

“resolveJsonModule”: true,

“esModuleInterop”: true,

“lib”: [“esnext”, “dom”] ,

“baseUrl”: “.”,

“paths”: {

“@/": ["src/”]

}

},

“include”: [“src//*.ts", "src//.d.ts", "src/**/.tsx”, “src/**/*.vue”],

“references”: [{ “path”: “./tsconfig.node.json” }]

}

vite.config.ts 文件夹

import { defineConfig } from ‘vite’

import vue from ‘@vitejs/plugin-vue’

import { resolve } from ‘path’

// https://vitejs.dev/config/

export default defineConfig(({ command, mode }): any => {

// 如果是command:serve|build

// mode:development | production

const BASE_URL = command === ‘serve’ ? ‘/’ : ‘/’

return {

// 自定义全局变量

define: {

‘process.env.BASE_URL’: "${BASE_URL}"

},

plugins: [vue()],

// 设置路径别名

resolve: {

alias: {

“@”: resolve(__dirname, ‘src’),

},

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0
me, ‘src’),

},

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

[外链图片转存中…(img-jyozAdU2-1725621753569)]
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0