Vite + Vue3 + TS项目创建和配置
Vite官方中文文档:https://cn.vitejs.dev/guide/
1 项目创建
npm create vite@latest
切换至项目目录下,安装初始环境依赖npm i
npm run dev
直接就能跑了
2 使用scss
npm add -D sass
- 设置scss全局变量
// vite.config.ts
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/style/variables.scss";' //这边用了路径别名
},
},
}
})
3 设置路径别名
vite初始化项选择了ts, 引入"path"模块时便会导致ts类型检查提示错误,找不到模块“path”或其相应的类型声明
解决办法:npm i @types/node -D
// 安装完毕,tsconfig.node.json会自动添加
"compilerOptions": {
...
"allowSyntheticDefaultImports": true
},
- 路径别名设置
// vite.config.ts
...
import { resolve } from 'path'
export default defineConfig({
...
resolve: {
alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
}
})
//tsconfig.json 导入文件时,识别
"compilerOptions": {
...
"baseUrl": ".", // 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响
"paths": { // 用于设置模块名到基于baseUrl的路径映射
"@/*": ["src/*"]
}
...
4 配置vue-router
vue-router官方中文文档:https://router.vuejs.org/zh/introduction.html
- 安装
npm install vue-router@4
- 创建路由配置文件
(我习惯的目录结构)
- src
- - router
- - - index.ts
- - - routes.ts
// index.ts
import {createRouter, createWebHashHistory} from "vue-router"
import {routes} from "./routes"
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
// routes.ts
const routes = [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
name: "home",
component: () => import("@/views/Home.vue")
}
]
export {routes}
- app使用路由中间件
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
createApp(App).use(router).mount('#app')
5 开发服务器代理
全栈开发的时候,我们通常会在本地开启两个服务,一个跑客户端(如vite),一个跑后台(如express);因为服务端口不同,通常会有跨域问题。借助vite配置文件里的服务器代理,可以变相地转化为服务器之间的互相请求,以解决跨域问题。
(发布之后,本地的请求就不存在了,异地的用nginx代理下就行了)
官方文档:https://cn.vitejs.dev/config/server-options.html#server-proxy
// vite.config.ts
export default defineConfig({
server: {
proxy: {
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghhak
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01