一、项目搭建与前期环境准备

38 阅读1分钟

1. 项目初始化

今天是 2023.6.1 参考官方文档创建项目,这里只记录当前版本创建过程,如果版本出入较大,还请参考官方最新文档。
官网地址: cn.vuejs.org/guide/quick…

1.1 创建一个 Vue 应用

shell
复制代码
npm init vue@latest

通过官方脚手架工具,创建初始化项目

图片.png

在当前目录下输入 code csyblog-vue3 快捷打开 vscode 编辑器

图片.png

可以看到已经为我们生成了一个初始的项目结构

图片.png

如果你也使用的是vscode, 这里还需求安装一下 Volar 插件扩展

图片.png

1.2 安装依赖并运行

shell
复制代码
npm install
npm run dev

启动成功 默认访问地址 http://127.0.0.1:5173/ 图片.png

浏览器打开

图片.png

到这里项目初始化就完成了

2. git代码管理

为了方便管理,以及版本信息记录。将代码托管至码云上,具体操作也可参这篇文章 juejin.cn/post/703297…

2.1 登录码云创建一个代码仓库

图片.png

2.2 将本地的代码同步到远程仓库

这里的前提是本地已经正确安装好了 git 工具

在当前项目目录下打开 git bash 操作窗口

图片.png

按顺序执行以下命令

bash
复制代码
git init 
git add .
git commit -m "项目初始化"
git remote add origin https://gitee.com/cao-shen-yang/csyblog-vue3.git
git push -u origin "master"

同步远程仓库成功

图片.png

查看码云提交记录,是否提交成功

图片.png