chore(projects): 增加unocss，添加全局样式表

README.md

@@ -43,12 +43,15 @@ pnpm dev
 pnpm build
 ```
 
-- cz插件提交git
-
+Git 提交规范
+项目已经内置angular提交规范，通过git cz 代替git commit 命令即可。
 ```bash
+pnpm cz
+or
 pnpm commit
 ```
 
+
 ## 素材来源
 
 [iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=39973)

build/plugins/index.ts

@@ -1,6 +1,7 @@
 import vue from './vue';
 import compress from './compress';
 import html from './html';
+import unocss from './unocss';
 
 /**
  * @description: 设置vite插件配置
@@ -8,7 +9,7 @@ import html from './html';
  * @return {*}
  */
 export function setVitePlugins(env) {
-  const plugins = [...vue, html(env)];
+  const plugins = [...vue, html(env), unocss];
 
   if (env.VITE_COMPRESS_OPEN === 'Y') {
     plugins.push(compress(env));

build/plugins/unocss.ts

@@ -0,0 +1,3 @@
+import Unocss from 'unocss/vite'; // https://github.com/unocss/unocss
+
+export default Unocss();

package.json

@@ -50,6 +50,7 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
+    "unocss": "^0.45.5",
     "vite": "^3.0.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",

src/main.ts

@@ -1,8 +1,11 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import { setupRouter } from './router';
+import { setupAssets } from './plugins';
 
 async function setupApp() {
+  // 引入静态资源
+  setupAssets();
   // 创建vue实例
   const app = createApp(App);
   // 安装router

src/plugins/assets.ts

@@ -0,0 +1,6 @@
+// 全局引入的静态资源
+import 'uno.css';
+
+export default function setupAssets() {
+  //
+}

src/plugins/index.ts

@@ -0,0 +1,3 @@
+import setupAssets from './assets';
+
+export { setupAssets };

src/router/guard/index.ts

@@ -2,7 +2,13 @@ import type { Router } from 'vue-router';
 
 export function setupRouterGuard(router: Router) {
   router.beforeEach((to, from, next) => {
-    console.log('%c [to]-24', 'font-size:13px; background:pink; color:#bf2c9f;', to);
+    // console.log('%c [to]-24', 'font-size:13px; background:pink; color:#bf2c9f;', to);
     next();
   });
+  router.afterEach((to) => {
+    // 设置document title
+    // useTitle(to.meta.title);
+    // 结束 loadingBar
+    // window.$loadingBar?.finish();
+  });
 }

src/views/login/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div style="text-align: center">
     <h1>{{ msg }}</h1>
-    <span>Already configured: vue3、vite3、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router</span>
+    <span>
+      Already configured: vue3、vite3、unocss、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router
+    </span>
     <div><router-link to="/">Go to layout</router-link></div>
   </div>
 </template>

src/views/test/test1.vue

@@ -1,5 +1,6 @@
 <template>
   <div style="text-align: center">I prove that you have made the jump test1.</div>
+  <div class="c-yellow">Uno css</div>
 </template>
 
 <script setup lang="ts">