前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >k8sailor - 07 初始化 vue3+vite

k8sailor - 07 初始化 vue3+vite

作者头像
老麦
发布2022-12-24 09:57:22
1510
发布2022-12-24 09:57:22
举报
文章被收录于专栏:Go与云原生Go与云原生

tag: https://github.com/tangx/k8sailor/tree/feat/07-initial-vue3-vite2

朴实无华的界面。

安装

代码语言:javascript
复制
# 初始化项目
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>

代码语言:javascript
复制
<template>
<h3>hello deployments</h3>

</template>

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

<style lang='less' scoped>
</style>
  1. 修改 /webapp/src/App.vue, 将与 HelloWorld 相关的内容全部替换成 Deployment
代码语言:javascript
复制
<template>
  <Deployment/>
</template>

<script setup lang="ts">
import Deployment from './components/Deployment.vue'
</script>
  1. 运行 webapp 查看效果
代码语言:javascript
复制
yarn dev
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 熊猫云原生Go 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装
  • 清理环境
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档