1
2
3
4

cd ~
# yarn create vite <project-name>
# pnpm create vite <project-name>
pnpm create vite share-blog

1
2
3
4
5
6

# 安装依赖
pnpm install
# 开发预览
pnpm dev
# 打包
pnpm build

1
2
3
4
5

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

1
2
3
4

vite v2.7.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0'
  }
})

1
2
3
4
5
6
7
8
9

vite v2.7.13 dev server running at:

  > Network:  http://172.27.128.1:3000/
  > Network:  http://192.168.0.109:3000/
  > Local:    http://localhost:3000/
  > Network:  http://172.25.176.1:3000/
  > Network:  http://172.25.224.1:3000/

  ready in 692ms.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

share-blog-vite
├─ .gitignore
├─ index.html
├─ package.json
├─ pnpm-lock.yaml
├─ public
│  └─ favicon.ico
├─ README.md
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  └─ logo.png
│  ├─ components
│  │  └─ HelloWorld.vue
│  ├─ env.d.ts
│  └─ main.ts
├─ tsconfig.json
├─ vite.config.ts
└─ yarn.lock

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

cd ~
vue create share-world
# Choose # Manually select features
----
# Choose  Choose Vue version
 (*) Babel
 (*) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing
----
# Choose # 3.x
----
# Choose # y
----
# Choose # y
----
# Choose # n
----
# Choose # Sass/SCSS (with dart-sass)
----
# Choose # ESLint with error prevention only
----
# Choose #  ( ) Lint on save
>(*) Lint and fix on commit
----
# Choose # Jest
----
# Choose # In dedicated config files
----
# Choose # N

cd share-world
yarn serve

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

λ pnpm install
 WARN  deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
 WARN  deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported                                 
 WARN  deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'        
 WARN  deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
 WARN  deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x 
fewer dependencies
 WARN  deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
 WARN  deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'                                 
 WARN  deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
 WARN  deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
 WARN  deprecated har-validator@5.1.5: this library is no longer supported                                   
 WARN  deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain cir
cumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
 WARN  deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
 WARN  deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain cir
cumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
 WARN  deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fse
vents 2.
 WARN  deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
 WARN  deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API
 instead.
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x 
fewer dependencies
 WARN  deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated     
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated   
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of 
issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even i
f nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

1
2

# yarn add sass --dev
pnpm add sass -D

1

$test-color: red;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

...
css:{
    // 指定传递给 CSS 预处理器的选项
    preprocessorOptions:{
      scss:{
        additionalData:'@import "@/assets/style/main.scss";'
      }
    }
  },
...

1
2
3

.test{
  color: $test-color;
}

1

1
2

# yarn add @vitejs/plugin-vue-jsx -D
pnpm add @vitejs/plugin-vue-jsx -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",// 在.tsx文件里支持JSX
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "esnext",
      "dom"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx", // 在.tsx文件里支持JSX
    "src/**/*.jsx",
    "src/**/*.vue"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from '@/components/HelloWorld.vue';
import {defineComponent} from 'vue';
import appClass from '@/styles/app.module.scss' // css modules
import logoImg from '@/assets/logo.png'; // static assets

// 用defineComponent定义组件且要导出
// noinspection JSXNamespaceValidation
export default defineComponent({
  render: () => (
    <>
      <img alt="Vue logo" src={logoImg}/>
      <HelloWorld msg="Hello Vue 3 + TypeScript + Vite"/>
      <router-link to="/">Go to Home</router-link>
      &nbsp;
      <router-link to="/about">Go to About</router-link>
      &nbsp;
      <router-view></router-view>
    </>
  ),
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path'; // @types/node
import vueJsx from '@vitejs/plugin-vue-jsx';
import ...

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    VueSetupExtend(),
    autoComponents({...}),
    AutoImport({...}),
  ],
  server: {...},
  resolve: {
    alias: {...},
  },
  css: {
    // 配置 css modules 的行为
    modules: {
      scopeBehaviour: 'local', // 作用域
      // generateScopedName: // 使用默认配置,
      localsConvention: 'camelCase', // 识别样式命名方式
    },
    preprocessorOptions: {
      scss: {
        additionalData: `...`,
      }
    }
  },
});

1
2
3
4
5
6
7
8

.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import HelloWorld from '@/components/HelloWorld.vue';
import {defineComponent} from 'vue';
import appClass from '@/styles/app.module.scss' // css modules
import logoImg from '@/assets/logo.png'; // static assets

// 用defineComponent定义组件且要导出
export default defineComponent({
  render: () => (
    <main class={appClass.app}>
      <img alt="Vue logo" src={logoImg}/>
      <HelloWorld msg="Hello Vue 3 + TypeScript + Vite"/>
      <router-link to="/">Go to Home</router-link>
      &nbsp;
      <router-link to="/about">Go to About</router-link>
      &nbsp;
      <router-view></router-view>
    </main>
  ),
});

1
2
3
4
5
6
7

<div className={
    this.state.isHide?styles.hide+' ':''+
    this.state.isActive?styles.active+' ':''+
    this.state.isAlarm?styles.alarm+' ':''
    }>
    {...data}
</div>

1
2
3
4
5
6
7
8
9

dataClass: {
    isHide: true,
    isActive: true,
    isAlarm: true
}

<div className={classname(dataClass)}>
    {...data}
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// tsx
...
// multiClass
import classnames from 'classnames';

// CSS module
import basic from '@/styles/basic.module.scss';
import test1 from '@/styles/test1.module.scss';
import test2 from '@/styles/test2.module.scss';
const btnClass = [test1.test1, test2.test2]

export default defineComponent({
  name: 'BlogIndex',
  props: {},
  setup(/*props, ctx*/) {
    return {
    };
  },
  render() {
    return (
      <>
        <Button class={classnames(...btnClass, basic.blogBtn)}>
          博客首页
        </Button>
      </>
    );
  }

});

1
2

<section class={classNames([cssDetail.article, 'article'])}>
</section>

1
2
3
4
5

// vue
<template>
  <van-circle v-bind:radius="d/2"/>
  <van-circle :radius="d/2" />
</template>

1
2
3
4
5

...
  return (
    <van-circle radius={this.d/2}/>
  )
...

1
2
3
4
5

// vue
<template>
  <van-circle v-model:current-rate="currentRate" />
  <van-circle :current-rate="currentRate" />
</template>

1
2
3

// tsx
...
<van-circle  v-model={[state.currentRate, 'current-rate']} />

1
2
3
4
5
6
7
8
9

// vue
<script>
/* key尽量使用 item.id 。迫不得已使用 index */
  const list = [1,2,3]
</script>

<template>
  <li v-for="item in [1,2,3]" :key="item">{{item}}</li>
</template>

1
2
3
4
5
6
7

// jsx
{
  list.map(item => (
    <li key={item}> { item } </li>
  ))
}

1
2
3
4
5
6
7
8
9

// vue
<script>
const flag = true;
</script>

/* v-if */
<template>
  <div v-if="flag" /> 
</template>

1
2

// tsx
{ flag && <div /> }

1
2
3
4
5

// vue
<template>
  <div v-if="flag" />
  <div v-else />
</template>

1
2
3
4

// tsx
{
  flag ? <div>真</div> : <div>假</div>
}

1
2
3
4
5

// vue
<template>
  <div @click="handleClick" />
  <div @change="handleChange">
</template>

1
2
3

// tsx
<input onClick={handleClick} />
<input onChange={handleChange} />

1
2
3
4
5
6
7
8
9

// tsx
<button type="button"
        onClick={this.handleClick.bind(this, 11)}>
    使用bind传参
</button>
<button type="button"
        onClick={(/*event: MouseEvent*/) => this.handleClick(11)}>
    使用箭头函数
</button>

1

1
2
3
4
5
6
7
8

// tsx
const doInput = (event: MouseEvent) => { this.text = e.target.value }
...

<input type="text"
       value={this.text}
       onInput={doInput}/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// tsx
if (event.target !== event.currentTarget){
  return ...

}

// .enter与keyCode: 在特定键触发时才触发回调

if(event.keyCode === 13) {
  // 执行逻辑
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { withModifiers } from 'vue'

const handleClick = withModifiers() => {
    // ...
  }, ['stop', 'prevent'])

// tsx
<button type="button"
        onClick={this.handleClick}>
    使用bind传参
</button>

1
2
3
4
5
6
7
8

// vue
<template>
  <van-nav-bar title="标题" left-text="返回" left-arrow>
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// tsx
<van-nav-bar title="标题"
             left-text="返回"
             left-arrow
             v-slots={{ 'left': () => <van-icon name="search" size="18" /> }}
...

// 子组件
export default defineComponent({
    name: "Test",
    render() {
        return (
            <>
                <span>I'm Child</span>
                { this.$slots.default?.() }
                { this.$slots.header?.() }
            </>
        )
    }
})

// 父组件
import TestComponent from './TestComponent'

export default defineComponent({
    name: "Test",
    components: {
        TestComponent
    },
    render() {
        return (
            <TestComponent v-slots={{
                default: () => (
                    <>这是默认插槽</>
                ),
                header: () => (
                    <>这是header插槽</>
                )
            }}>
            </TestComponent>
        )
    }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// vue
// 子组件
<template>
    <div>
        <span>I'm Child</span>
        <slot name="content" :value="value"></slot>
    </div>
</template>

<script setup>
const value = ref({name: 'xzw'})
</script>

// 父组件
<template>
    <TestComponent>
        <template #content="scope">
            {{ scope.value.name }}
        </template>
    </TestComponent>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// tsx
// 子组件
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    name: "Test",
    setup() {
        return {
            value: {
                name: 'xzw'
            }
        }
    },
    render() {
        return (
            <>
              <span>I'm Child</span>
              { this.$slots.content?.(this.value) }
            </>
        )
    }
})

// 父组件
import TestComponent from './TestComponent'

export default defineComponent({
    name: "Test",
    components: {
        TestComponent
    },
    render() {
        return (
            <TestComponent v-slots={{
                content: scope => (
                    <>{scope.name}</>
                )
            }}>
            </TestComponent>
        )
    }
})

1

pnpm add unplugin-vue-components -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import vueJsx from '@vitejs/plugin-vue-jsx';
// 自动引入组件
import autoComponents from 'unplugin-vue-components/vite';
import {
  ElementPlusResolver,
  AntDesignVueResolver,
  VantResolver,
  HeadlessUiResolver,
  ElementUiResolver
} from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    // unplugin-vue-components/vite
    autoComponents({
      // ui库解析器，也可以自定义
      // resolvers: [ElementPlusResolver()],
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver(),
        HeadlessUiResolver(),
      ],
      // 指定组件位置，默认是src/components
      dirs: ['src/components'],
      // valid file extensions for components.
      // 组件的有效文件扩展名。
      extensions: ['vue', 'tsx'],
      // 配置文件生成位置
      dts: 'src/components/components.d.ts',
      // search for subdirectories
      // 搜索子目录
      deep: true,
      // Allow subdirectories as namespace prefix for components.
      // 允许子目录作为组件的命名空间前缀。
      directoryAsNamespace: false,
      // filters for transforming targets
      include: [/.vue$/, /.vue?vue/],
      exclude: [/[\/]node_modules[\/]/, /[\/].git[\/]/, /[\/].nuxt[\/]/],
    })
  ],
  ...
});

1
2
3
4
5
6
7
8

// 引入前
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

//引入后
const count = ref(0)
const doubled = computed(() => count.value * 2)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// 引入前
import { useState } from 'react'
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

// 引入后
export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

1
2

# yarn add unplugin-auto-import -D
pnpm add unplugin-auto-import -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
...
export default defineConfig({
  ...,
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      // dts: 'src/auto-import.d.ts'
    }),
    ...
  ]
})

1
2

# yarn add vite-plugin-vue-setup-extend -D
pnpm add vite-plugin-vue-setup-extend -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// vite.config.ts
import { defineConfig } from 'vite'
...
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  ...,
  plugins: [
    ...,
    VueSetupExtend(),
    ...,
  ],
  ...
})

1
2
3
4
5
6
7

<script lang="ts" setup name="OrderList">
import { onMounted } from 'vue'

onMounted(() => {
  console.log('mounted===')
})
</script>

1
2

pnpm add marked
pnpm add -D @types/marked

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import {createRouter, /*createWebHistory, hash 模式 */ createWebHashHistory, RouteRecordRaw} from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Login',
    component: () => import('@/pages/login/Login.vue'), // 注意这里要带上 文件后缀.vue
  },
];

const router = createRouter({
  history: createWebHashHistory(), // hash 模式
  routes,
});

export default router;

1
2
3
4
5
6
7

import {createApp} from 'vue';
import App from './App.vue';
import router from './router/index';

const app = createApp(App);
app.use(router);
app.mount('#app');

1

pnmp add @types/node -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入 path 的时候提示报错，需要安装 @types/node 类型检测
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  ...
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

1

pnpm add mockjs vite-plugin-mock cross-env -D

1
2
3

...
"dev": "cross-env NODE_ENV=development vite"
...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { viteMockServe } from 'vite-plugin-mock'

plugins: [
  vue(),
  viteMockServe({
    mockPath: './mock',
    supportTs: true
  }),
  ...
  ],

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/getUser',
    method: 'get',
    response: (req: Record<string, unknown> /*拿到请求的数据*/) => {
      // console.log('body>>>>>>>>')
      return {
        code: 0,
        message: 'ok',
        data: ['aa', 'bb']
      }
    }
  }
] as MockMethod[]

1
2
3
4
5
6

// 代码请求
axios.get('/api/getUser')
  .then(res => {
  console.log(res)
})

1
2
3
4
5
6
7

<div>
  <BlogHeader></Header>
  <main>
    <router-view/>
  </main>
  <BlogFooter></Footer>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import Layout from '@/components/Layout';
import {defineComponent, provide} from 'vue';

// Comps ant
import {message} from 'ant-design-vue';

// CSS Style
import 'ant-design-vue/es/button/style/index.css';
import 'ant-design-vue/es/message/style/index.css';

// 用defineComponent定义组件且要导出
export default defineComponent({
  name: 'App',
  // components: {BlogHeader, BlogFooter, Button}, // 无需注册组件，components是用于template模板中
  setup(/*props, ctx*/) {
    // 将 message 方法挂载到全局
    provide('$message', message);
  },
  render: () => {
    const renderLayout = () => { return (<Layout/>)}
    return (
      renderLayout()
    );
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import {defineComponent,} from 'vue';

// Comps
import BlogHeader from '@/components/BlogHeader';
import BlogFooter from '@/components/BlogFooter';

// css modules
import layoutClass from '@/styles/layout.module.scss';

const LayoutProps = {
  isSHow: Boolean
};
export default defineComponent({
  name: 'Layout',
  props: LayoutProps,
  setup(/*props, ctx*/) {

    return {};
  },
  render() {
    const renderBlogHeader = () => {return (<BlogHeader class={layoutClass.blogHeader}/>);};
    const renderBlogFooter = () => {return (<BlogFooter class={layoutClass.blogFooter}/>);};
    return (
      <div class={layoutClass.app}>
        {renderBlogHeader()}
        <main class={layoutClass.blogMain}>
          <router-view/>
        </main>
        {renderBlogFooter()}
      </div>
    );
  }

});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// layout 布局
.app {
  display: grid;
  grid-template-areas: "header header header"
                       ".      main  ."
                       "footer footer footer";
  grid-template-columns: 12% auto 12%;
  grid-template-rows: auto 1fr auto;
  height: 100vh;

  .blog-header {
    grid-area: header;
    padding-left: 12%;
    padding-right: 12%;
  }

  .blog-main {
    grid-area: main;
  }

  .blog-footer {
    align-self: end;
    grid-area: footer;
    padding-left: 12%;
    padding-right: 12%;
  }

}

@media (max-width: 768px) {
  .app {
    grid-template-columns: 10px auto 10px;

    .blog-header,
    .blog-footer {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

// BlogHeader.tsx
import {computed, defineComponent, ref} from 'vue';
import {Button,} from 'ant-design-vue';

// CSS module
import classNames from 'classnames';
import blogClass from '@/styles/blog.module.scss';
import basic from '@/styles/basic.module.scss';

const BlogHeaderProps = {
  isSHow: Boolean
};

export default defineComponent({
  name: 'BlogHeader',
  props: BlogHeaderProps,
  components: {},
  setup(/*props, ctx*/) {
    const isLogin = ref(false);

    const isLoginClass = computed(() => {
      console.log(blogClass.login);
      return (
        isLogin
          ? [blogClass.blogHeader, blogClass.login]
          : [blogClass.blogHeader]);
    });
    return {
      isLogin,
      isLoginClass
    };
  },
  render() {
    const renderBtn = (btnString: string) => (<Button class={basic.blogBtn}>{btnString}</Button>);
    const renderUnLogin = () => (
      <div class={blogClass.btns}>
        {renderBtn('立即登录')}
        {renderBtn('注册账号')}
      </div>
    );

    const renderLogin = () => (
      <>
        <i>123</i>
        <img src="" alt=""/>
      </>
    );

    return (
      <header class={classNames(...this.isLoginClass)}>
        <h1>Let's share</h1>
        <p>精品博客汇聚</p>
        {this.isLogin
          ? renderLogin()
          : renderUnLogin()
        }
      </header>
    );
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

@import 'src/assets/style/variables';

%h1-style {
  color: $white;
  font-size: 40px;
  text-transform: uppercase;
}

.blog-header {
  // 默认为未登录状态
  background: $bg-color-veg;
  display: grid;
  justify-items: center;
  padding: 0 12% 30px;

  .slogan {
    @extend %h1-style;
    margin: 60px 0 0;
  }

  .tips {
    color: $white;
    margin: 15px 0 0;
  }

  .btns {
    margin-top: 20px;
  }

  button {
    margin: 20px 5px 0;
  }

}

// 切换为登录状态 覆盖未登录状态样式
.login {
  align-items: center;
  background: $bg-color-veg;
  display: flex;

  .slogan {
    @extend %h1-style;
    flex: 1;
    margin: 0;
    padding: 0;
  }

  .user {
    .edit-icon {
      color: $white;
      font-size: 30px;
    }

    .avatar {
      border: 1px solid $white;
      border-radius: 50%;
      height: 40px;
      margin-left: 15px;
      width: 40px;
    }
  }
}

.blog-footer {
  background-color: $bg-color-footer;
  color: $font-color-footer;
  font-size: 13px;
  padding: 10px;
  text-align: center;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

import {message} from 'ant-design-vue';
import {defineComponent, inject} from 'vue';
// CSS module
// import basic from '@/styles/basic.module.scss';
import blogIndex from '@/styles/blog-index.module.scss';

// multiClass
// const btnClass = [basic.blogBtn];

import blogApi from '@/api/blog';

const {getBlogs} = blogApi;

export default defineComponent({
  name: 'BlogIndex',
  props: {},
  setup(/*props, ctx*/) {
    const popMessage = inject<typeof message>('$message');

    const getBlogList = async () => {
      const BlogDataList = await getBlogs();
    };

    return {
      popMessage
    };
  },
  render() {
    return (
      <>
        <section class={blogIndex.blogPost}>
          <div class={blogIndex.item}>
            <figure class={blogIndex.avatar}>
              <img class={blogIndex.img} src="" alt=""/>
              <figcaption class={blogIndex.info}>姓名</figcaption>
            </figure>

            <h3 class={blogIndex.title}>文章标题
              <span class={blogIndex.date}>时间</span>
            </h3>
            <p class={blogIndex.article}>正文，最多显示前200字</p>
          </div>

          <div class={blogIndex.item}>
            <figure class={blogIndex.avatar}>
              <img class={blogIndex.img} src="" alt=""/>
              <figcaption class={blogIndex.info}>姓名</figcaption>
            </figure>

            <h3 class={blogIndex.title}>文章标题
              <span class={blogIndex.date}>时间</span>
            </h3>
            <p class={blogIndex.article}>正文，最多显示前200字</p>
          </div>

          <div class={blogIndex.item}>
            <figure class={blogIndex.avatar}>
              <img class={blogIndex.img} src="" alt=""/>
              <figcaption class={blogIndex.info}>姓名</figcaption>
            </figure>

            <h3 class={blogIndex.title}>文章标题
              <span class={blogIndex.date}>时间</span>
            </h3>
            <p class={blogIndex.article}>正文，最多显示前200字</p>
          </div>
        </section>
      </>
    );
  }

});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

@import 'src/assets/style/variables';

.blog-post {
  .item {
    display: grid;
    grid: auto auto / 80px 1fr;
    margin: 20px 0;

    .avatar {
      grid-column: 1;
      grid-row: 1 / span 2;
      justify-self: center;
      margin-left: 0;
      text-align: center;

      .img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }

      .info {
        font-size: 12px;
        color: $theme-lighter-color;
      }
    }

    .title {
      grid-column: 2;
      grid-row: 1;

      & > .date {
        color: $theme-lighter-color;
        font-size: 12px;
        font-weight: normal;
      }
    }

    .article {
      grid-column: 2;
      grid-row: 2;
      margin-top: 0;
    }


  }
}