vuepress学习笔记-遇到的问题总结1

vuepress安装时遇到的问题

首先需要安装nodejs,然后打开dos窗口,转换到nodejs路径下

npm install -g vuepress

运行上边的命令后报了一大串npm WARN deprecated ***,然后运行vuepress -v提示vuepress不是内部命令之类的,说明没安装成功

看了很多文章没有找到适合的解决方案

就根据log里看到的路径C:\Users\Administrator\AppData\Roaming,把这个路径下的npm文件,和npm_cache文件全部删掉

重新执行

npm install -g vuepress

这次只报了四个deprecated和其他一大堆warn,然后执行vuepress -v就打印出了当前vuepress的版本信息,安装成功!

vuepress中文文档

根据文档开启vuepress探索之路吧

vuepress使用时遇到的问题

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

vuepress dev . 类似于启动命令,完成之后如下

在浏览器里输入打印出的路径,就可以展示README.md的信息啦,当然还有其他的一些效果,比如config.js中配置的主题

如果想要继续使用命令操作需要重新打开一个git-bash窗口,我很傻很天真(chun)的以为就在这页面开始编辑了,然而怎么也退不出去,实际上是告诉你可以编辑你的README.md了

如果在新的窗口重新运行vuepress dev . 命令,会在新的端口启动一个新的服务,需要关掉服务就要把窗口关闭(目前我还不知道其他方式)

对README.md文件的修改会立刻反应到网页中,但是对config.js的修改需要重启,使用vuepress build . 命令也没有起作用

vuepress发布代码到github遇到的坑

需要安装git,然后运行git-bash.exe,在这个窗口中使用linux命令

运行发布到github的shell脚本出现以下错误

需要把deploy.sh移到了package.json同级目录

然后再次运行出现了加载的过程,当时一阵激动以为要成功了,结果加载完还是报了错

原因是这是我第一次使用git

第一次使用git时需要和github建立信任关系

上边引用文章中容易引起误会的地方:

  1. user.email 是你github的邮箱,user.name是github的用户名,不是密码,
  2. 生产秘钥对的时候有好几个enter,那里不用输入字符,直接回车就可以

除此之外在github的settings里需要设置github pages的source,把None修改成其他的

如果有不正确的地方,欢迎指正,感谢!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,我知道你想问什么。首先,我们需要创建一个 Tabs 组件,并且在组件中使用 v-for 循环来渲染标签页。以下是一个简单的示例代码: ```html <template> <div class="tabs"> <div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }" @click="activeTab = index"> {{ tab.label }} </div> <div class="tab-content"> <slot :name="tabs[activeTab].label"></slot> </div> </div> </template> <script> export default { name: 'Tabs', data() { return { activeTab: 0, tabs: [ { label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' } ] } } } </script> <style> .tabs { display: flex; flex-direction: column; } .tab { cursor: pointer; padding: 10px; border: 1px solid #ccc; border-bottom: none; } .tab.active { background-color: #ccc; } .tab-content { border: 1px solid #ccc; padding: 10px; } </style> ``` 在上面的示例中,我们使用了一个名为 tabs 的数组来存储每个标签页的信息。我们使用 v-for 循环来渲染每个标签页的标签,并且使用 activeTab 变量来追踪当前选中的标签页。当用户单击标签页时,我们将更新 activeTab 变量,并使用插槽来渲染相应的标签页内容。 如果你想根据不同的标签页来显示不同的表格内容,你可以在插槽中使用 v-if 或者 v-show 来判断应该显示哪个表格。例如: ```html <template> <div class="tabs"> <div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }" @click="activeTab = index"> {{ tab.label }} </div> <div class="tab-content"> <table v-if="tabs[activeTab].label === 'Tab 1'"> <!-- 表格 1 的内容 --> </table> <table v-else-if="tabs[activeTab].label === 'Tab 2'"> <!-- 表格 2 的内容 --> </table> <table v-else-if="tabs[activeTab].label === 'Tab 3'"> <!-- 表格 3 的内容 --> </table> </div> </div> </template> ``` 在上面的示例中,我们使用了 v-if 和 v-else-if 来判断当前选中的标签页是哪个,并根据不同的标签页显示不同的表格内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值