目錄

1.搭建一個空項目

?2.手動配置router+pinia

?3.使用jsx開發，更像react? ? ??

4.jsx使用方法

5. 按需自動引入ElementPlus

?6.多環境搭建

gitee地址?

? https://gitee.com/liu--zicheng/vue3-templatehttps://gitee.com/liu--zicheng/vue3-template

1.搭建一個空項目

?npm init vite@latest

?選擇vue項目，然后回車。就會搭建一個空項目，其中一些router，pinia，jsx等需要自己配置。

?如果不想自己配置也可以根據vue3官網進行使用。

npm init vue@latest

?選取自己項目使用到的模塊進行配置。

?2.手動配置router+pinia

首先下載vue-router和pinia插件，然后在main.ts全局引入，并使用app.use進行全局注冊。

import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import router from "./router"; import { createPinia } from "pinia";const app = createApp(App); app.use(createPinia); app.use(router); app.mount("#app");

?3.使用jsx開發，更像react? ? ??

? ? ???yarn add @vitejs/plugin-vue-jsx

?然后需要在tsconfig.json中配置如下：

"jsx": "preserve", "jsxFactory": "h", "jsxFragmentFactory": "React.Fragment",

然后vite.config.ts修改如下：

import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import vueJsx from "@vitejs/plugin-vue-jsx"; // https://vitejs.dev/config/ export default defineConfig({plugins: [vue(), vueJsx()], });

4.jsx使用方法

? ? ? ? 注意：jsx中ref是不會自動解包的，但是template中是可以的?，其中一些原始寫法在jsx寫法中是有變化的。 比如：v-if 轉為 三元運算符、v-for 變為? map遍歷、{{}}=>{}

// jsx寫法，這只能創建無狀態的組件import { ref } from "vue";let v = ref<string>("我是jsx寫法");const renderDom = () => {return (<div><div>{v.value}</div><div>hellow tsx</div></div>); };export default renderDom;// 原始寫法<template><div>{{ a }}</div></template> <script setup lang="ts">let a = ref<string>("我不是jsx寫法");</script>

要想創建有狀態的組件，需要借助defineComponent和setup中間件，如果不使用setup，在內部寫生命周期會警告，生命周期只能在setup中使用。tsx寫法不在支持v-for和v-if等指令，學過react會比較熟悉，v-if替換成三元運算符（true？’‘：’‘），v-for替換成如下。具體寫法如下：

import User from "@/api/user"; import {ref,onMounted,defineComponent,reactive,Ref,toRefs,isReactive, } from "vue"; import { ElButton } from "element-plus";export default defineComponent({setup() {let hh = ref("我是 HelloWorld 組件");let state1 = reactive<any>({data: [],});onMounted(async () => {await User.login("/api/query", { username: "llll" });const res = await User.req11("/api/data", { username: "llll" });state1.data.push(...res.data);});const change = () => {state1.data.push({ name: "7777" });};return () => {return (<><div>{hh.value}</div><ElButton onClick={change} type="primary">1231</ElButton>{state1.data.map((item: { name: string }) => {return <div>{item.name}</div>;})}</>);};}, });

在使用tsx時，我們不能想以前那樣，組件三部分代碼<template><script><style>?，F在需要在組件外部定義css或者scss或less樣式文件，命名：app.module.scss。

引入組件：import styles from '@/styles/app.module.scss'。

.module相當于css的作用域，避免全局污染。

使用：div class={styles.style}>內容?</div>

5. 按需自動引入ElementPlus

? ? ? ? elementPlus官網推薦使用這種方式。但是樣式會丟失，然后我是將css通過script引入cdn鏈接，樣式才生效。大哥們知道為什么，給小弟說一聲。

<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

?6.多環境搭建

? ? ? ??在根目錄，不是在src目錄，否則不生效哦。其中也有許多的坑，莫名的報錯等。

? ? ? ?1.、用@引入組件時會報錯。解決方法：在vite.config.ts配置

resolve: {alias: {"@": resolve(__dirname, "src"),// extensions: [".js", ".json", ".ts"],// 使用路徑別名時想要省略的后綴名，可以自己 增減},},

?????????2、在使用import.meta.env.VITE_RES_URL，訪問自己定義的變量時，會爆紅。解決方法：需要在vite-env.d.ts中配置。

declare global {interface ImportMeta {env: Record<string, unknown>;} }

總結

以上是生活随笔為你收集整理的vue3搭建项目，tsx写法的注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。