开发 k8s 管理平台 - k8sailor 07. (前端) 使用 vite 初始化 vue 项目

原文地址: https://tangx.in/posts/books/k8sailor/chapter02/07-initial-vue3-vite2/

安装

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

# 初始化项目
yarn create vite webapp --template vue-ts

cd webapp

## 安装依赖
yarn

## 启动查看 vue3 是否正常
yarn dev


## 安装 less 支持， 以后写样式用
yarn add less

清理环境

  1. 删除 /webapp/src/components 下的 HelloWorld.vue。 并新建一个 Deployment.vue。 这里使用 vue3 的 setup 语法糖。

在 <template> 标签对中创建内容 <h3>hello deployments</h3>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<template>
<h3>hello deployments</h3>

</template>

<script setup lang='ts'>
</script>

<style lang='less' scoped>
</style>
  1. 修改 /webapp/src/App.vue, 将与 HelloWorld 相关的内容全部替换成 Deployment
1
2
3
4
5
6
7

<template>
  <Deployment/>
</template>

<script setup lang="ts">
import Deployment from './components/Deployment.vue'
</script>
  1. 运行 webapp 查看效果
1

yarn dev

vue3-clean.png

朴实无华的界面。