目录
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>。现在需要在组件外部定义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>;
}
}