vite+vue3+ts【创建项目】基础配置
vite+vue3+ts
·
一. vite+vue3+ts
【创建项目】
1. 通过vite
脚手架
# v3_blog(你的项目名称)
npm init vite v3_blog -- --template vue
2. 选择vue
3. 回车选择vue-ts
4. 回车继续执行下面图示三行代码
5. 执行完后浏览器预览效果
这样一个vite+vue3+ts
的项目就创建成功了
二. 基础文件
1. vite.confing.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
}
},
base: './', // 打包路径
server: {
port: 3008, // 服务端口号
open: true, // 服务启动时是否自动打开浏览器
cors: true, // 允许跨域
proxy: {
'/api': {
target: 'http://www.xxxx.com.cn',
changeOrigin: true,
rewrite: (path) => path.replace('/api', '')
}
}
}
})
注:这块会有找不到path 的问题,我们需要先安装类型声明文件
npm install --save-dev @types/node
编辑tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
// 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响
"paths": {
// 用于设置模块名到基于baseUrl的路径映射
"@/*": [
"src/*"
]
}
}
}
2. 添加路由
npm install vue-router@4 //安装路由
创建 src/router/index.ts
文件
/** * createRouter 这个为创建路由的方法 * createWebHashHistory 这个就是vue2中路由的模式, * 这里的是hash模式,这个还可以是createWebHistory等 * RouteRecordRaw 这个为要添加的路由记录,也可以说是routes的ts类型 */
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
// 路由记录,这个跟vue2中用法一致,就不做过多解释了
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home'
},
{
path: '/',
name: 'home',
component: () => import("@/views/Home/Home.vue"),
alias: '/home',
meta: {
title: '首页'
}
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
3. main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
// app.use(store)
// app.use(ElementPlus)
app.mount('#app')
// createApp(App).mount('#app')
更多推荐
已为社区贡献2条内容
所有评论(0)