Vue3学习

news/2024/9/29 1:22:32

Vue3学习

Vue3学习(一)——创建Vue3工程

1. 安装 Node.js

首先,确保你的系统上已经安装了 Node.js。你可以通过运行以下命令检查:

node -v
npm -v

2. 使用 Vite 创建 Vue 3 项目

在终端(命令行)中,运行以下命令来创建一个新的 Vue 3 项目:

npm create vite@latest my-vue-app -- --template vue

其中:

  • my-vue-app 是你的项目名称,你可以根据需要更改。
  • --template vue 表示选择 Vue 作为模板,Vite 将会自动为你设置 Vue 3 的工程。

3. 进入项目目录

cd my-vue-app

4. 安装依赖

进入项目目录后,运行以下命令来安装项目依赖:

npm install

5. 启动开发服务器

完成依赖安装后,你可以启动开发服务器:

npm run dev

然后你可以在浏览器中打开 http://localhost:5173,预览你的 Vue 3 项目。

6. 构建项目

如果需要构建生产版本,可以运行:

npm run build

这将生成一个 dist 文件夹,其中包含用于部署的静态文件。

Vue3学习(二)——工程文件说明

Vue3学习(三)——静态网页github.io部署

  1. 首先修改vue3工程编译配置如下:

这样编译生成的文件将保存在docs文件夹下。

  1. 编译vue3工程

    npm run build
    
  2. 将Vue3工程整个上传至自己的上述仓库名的github仓库中

  3. 在github仓库中的setting选项中,点击Pages选项,选择要部署的仓库分支,并选择docs文件夹。 略等几分钟即可部署成功。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/59442.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

PbootCMS详情页里上一篇下一篇的“没有了”在哪里改啊

扫码添加技术【解决问题】专注中小企业网站建设、网站安全12年。熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。专业解决各种疑难杂症,您有任何网站问题都…

怎么修改PbootCms的邮件提醒标题

解决这个问题简单又复杂,首先你需要有网站源码的管理权限。 再去检索 PbootCMS,对搜索结果中的文件进行处理下就可以了。扫码添加技术【解决问题】专注中小企业网站建设、网站安全12年。熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。承接:企业仿站、网站修改、…

Redis集群slot迁移改造实践

Redis集群经常需要进行在线水平扩缩容,实际操作过程中发现迁移期间服务时延剧烈抖动,业务侧感知明显,为了应对以上问题对原生Redis集群slot迁移功能进行优化改造。作者:来自 vivo 互联网存储团队- Xu XingbaoRedis 集群经常需要进行在线水平扩缩容,实际操作过程中发现迁移…

pbootcms如何设置发布内容不自动提取缩略图

如果你想在PBootCMS后台发布内容时不自动提取缩略图,可以通过注释或删除相关代码来实现这一功能。以下是具体的步骤和代码示例: 步骤找到相关代码:在PBootCMS的代码中找到自动提取缩略图的逻辑。 通常这部分代码位于content.php或相关的内容处理文件中。注释或删除代码:注释…

pbootcms模板报错提示PHP Warning: Unknown: open_basedir restriction

当PBootCMS模板出现类似“PHP Warning: Unknown: open_basedir restriction ineffect. File”的错误提示时,通常是因为PHP的open_basedir限制设置不当或版本不兼容导致的。以下是如何解决这个问题的具体步骤: 问题分析open_basedir限制:open_basedir是一个PHP的安全设置,用…

nohup后台运行,关闭Xshell后,进程会被关闭

1.在使用nohup后台运行进程时,直接关闭远程Xshell终端窗口,发现进程就被停掉了,可以看到nohup.out日志显示停掉了2.解决方法,执行了nohup指令后,退回到shell输入命令窗口,然后通过在shell中输入exit来退出终端 3.然后再关闭Xshell进程就不会受影响了

pbootcms模板如何实现产品置顶

要在PBootCMS中实现产品的置顶功能,你可以按照以下步骤操作:定位到模板文件:打开你的网站后台。 导航到模板管理部分,找到templates default目录下的index.html文件。修改产品列表查询参数:在index.html文件中找到展示产品列表的部分。 修改产品列表的查询参数,将order=s…