这是我参与「第四届青训营」笔记创作活动的第8天」
『第四届青训营」 random一个好了 团队笔记产出
本篇文章是团队项目的基础配置说明记录，以供参考。代码质量风格规范化具有一定复杂性，故不再同一篇文章中阐述。如果有成功配置代码规范化的道友，若能帮助指明一条道路，团队感激不尽。有能提高的地方也欢迎指正。
根据本篇文章，你应该能够搭建较为完善的基础项目配置，文章后续也会继续更新。
涉及工具及官网：
Vite：配置 Vite {#configuring-vite} | Vite中文网
Vite-plugins ： GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js
Vue-router@4: 安装 | Vue Router
Pinia: Pinia 🍍
步骤
GitHub：
- 在Github上创建仓库
- 在本地git clone
本地VSCode：
创建vite3+vue3+ts4项目
-
# npm 7+，需要加上额外的双短横线 $ npm init vite@latest <project-name> -- --template vue-ts
Install vite插件，支持项目TSX、JSX语法
-
- 为什么 Vue3 的组件库都在使用 jsx/tsx? - 知乎
- npm install @vitejs/plugin-vue-jsx -D
- 安装官方维护的vite插件
@vitejs/plugin-vue-jsx,这个插件其实核心还是@vue/babel-plugin-jsx,只是在这个插件上封装了一层供vite插件调用。所以关于vue的jsx语法规范可以直接参看@vue/babel-plugin-jsx。关于插件末尾写的是jsx而不是tsx，下面是GitHub上的提要： Provides Vue 3 JSX & TSX support with HMR.。
-
在vite config中配置应用端口和src路径别名
-
-
如果 import { resolve } from "path"; 报错，则安装node的TypeScript声明。
-
npm i -D @types/node -
此时在项目中就可以直接使用新的路径别名了，使用vscode可能会没有路径提示，这个时候只需要在jsconfig.json/tsconfig.json配置paths和baseUrl就会出现路径提示了
-
//tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], }, }, } -
Vite官网-共享配置- resolve.alias 说明： 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。
-
path.resolve([...paths]): Thepath.resolve()method resolves a sequence of paths or path segments into an absolute path. -
//vite.config.ts export default defineConfig({ //... resolve: { alias: [ { find: "@", replacement: path.resolve("./src"), }, ] //alias: { // "@": path.resolve(__dirname, "src"), // } //两种alias配置方式均可 })//tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], }, }, }
-
-
配置 vite.config.ts - server-proxy
集成vue-router4
-
-
npm i vue-router@4 -
//配置src/router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Index", component: () => import("@/App"), }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; -
//在main.ts中引入router import router from "@/router"; //... const app = createApp(App); app.use(router); //... app.mount("#app"); -
//在App.tsx中使用vue-router import { defineComponent } from "vue"; import { RouterView } from "vue-router"; export default defineComponent({ setup() { return () => ( <div> <div>Hello world!</div> <RouterView></RouterView> </div> ); }, }); - 效果展示：（简单细节问题不过多展示了，比如JSX需要有唯一根节点..)
- 官网链接：Vue-router@4: 安装 | Vue Router
-
集成pinia
-
-
npm i pinia -
//配置src/store/index.ts import { createPinia } from "pinia"; const store = createPinia(); export default store; -
之后在main.ts中引入，参考vue-router配置流程
-
//配置src/store/User/index.ts 模块, 定义state - user import { defineStore } from "pinia"; export const useUserStore = defineStore({ id: "user", //id项必填，且需要唯一 state: () => { return { name: "zzx", }; }, actions: { updateName(name: string) { this.name = name; }, }, }); -
//获取state，在App.tsx中消费 //... import { useUserStore } from "@/store/User"; export default defineComponent({ setup() { const userStore = useUserStore(); +++ const handleClick = () => userStore.updateName("zzinx"); return () => ( <div> <div>Hello world!</div> <RouterView></RouterView> +++ <div>{userStore.name}</div> +++ <button onClick={handleClick}>ChangeName</button> </div> ); }, }); - 官网链接：Pinia: Pinia 🍍
-
集成windiCSS
npm i -D vite-plugin-windicss windicss
//vite.config.ts
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [WindiCSS(),],
}
//main.ts中引入WindiCSS样式
import 'virtual:windi.css'
集成axios
-
-
npm install --save axios vue-axios
-
集成Element-Plus：
-
-
npm install element-plus --save - 自动导入（推荐）
-
//首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件 npm install -D unplugin-vue-components unplugin-auto-import //然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中 // vite.config.ts import { defineConfig } from 'vite' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ... plugins: [// ... AutoImport({ resolvers: [ElementPlusResolver()],}), Components({ resolvers: [ElementPlusResolver()], }),], }) -
TSX无法使用组件自动引入，（如有知原因者请给予点拔，感谢），使用Element按需导入，并使用unplugin-element-plus自动导入样式。(warning: unknown)
npm install -D unplugin-element-plus
-
集成scss支持
npm i -D sass sass-loade
待阐述的知识点：
代码质量风格规范化
Sever - proxy:
-
- 正则表达式知识点解释
- changeOrigin配置解释
- target配置解释
resolve-alias：
两种配置方式中一个需要__dirname,一个不需要的原因，即差异点的原因
Windi CSS：
import "virtual:windi.css";
ElementPlus：
element-plus/es 与 element-plus 区别
tsx中使用element组件需要import？而.vue文件中不需要？
el-button 与 ElButton
可探索分支：
vite插件
Storybook组件库
vue-styled-component
在Vue项目中使用React超火的CSS-in-JS库: styled-components - 掘金
\
