前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第三章 项目创建

news/2024/5/17 20:09:05 标签: 前端, sass, css, github, gitee
github-gist">

系列文章目录

第一章 技术栈简介 (开篇)
第二章 环境部署 (Node等环境安装)
第三章 项目创建 (Vite项目初始化)
第四章 样式格式化 (Sass)
第五章 路由配置 (vue-router路由守卫)
第六章 请求配置 (Axios请求和响应拦截)
第七章 Layout组件 (Element-Plus的使用)
第八章 登录开发 (Pinia使用和数据持久化)
第九章 基础界面开发 (组件封装和使用)
第十章 常用工具函数 (Utils配置)


文章目录

  • 系列文章目录
  • 前言
  • 一、Vite创建项目
    • 1、创建
    • 2、具体步骤
  • 二、GitHub上传
    • 1、创建账号
    • 2、创建仓库
    • 3、首次提交
  • 总结


前言

本篇文章开始,我们就要开始创建自己的项目,并进行配置和开发啦。


一、Vite创建项目

1、创建

windows电脑进入此电脑,选择要创建项目的文件夹,右键用git bash打开terminal或者打开cmd,mac则使用terminal进入到创建项目的文件夹

使用 NPM:
$ npm create vite@latest

使用 Yarn:
$ yarn create vite

使用 PNPM:
$ pnpm create vite

在这里插入图片描述

2、具体步骤

1、输入项目名称
在这里插入图片描述

2、选择vue
在这里插入图片描述

3、选择TypeScript
在这里插入图片描述

4、创建成功
在这里插入图片描述
5、也可以使用快捷命令直接创建
在这里插入图片描述

6、进入项目文件夹
在这里插入图片描述

7、npm install / yarn
在这里插入图片描述

8、npm run dev / yarn dev
在这里插入图片描述
在这里插入图片描述

二、GitHub上传

1、创建账号

官方网站:https://github.com/
在这里插入图片描述
通过Sign Up注册自己的github账号

2、创建仓库

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3、首次提交

按照文档命令将本地项目和远端仓库关联并提交代码

git init
git add .
git commit -m "init"
git remote add origin https://github.com/SmallTeddy/testing-web.git
git push -u origin main

在这里插入图片描述
提交后刷新仓库界面,确认代码提交成功

在这里插入图片描述


总结

本文介绍了如何使用Vite工具创建自己的vue项目


http://www.niftyadmin.cn/n/5190923.html

相关文章

react 手机端 rc-table列隐藏(根据相关条件是否隐藏)、实现图片上传操作

最近公司某一项目的手机端,新增需求:table中的附件要可以编辑,并且是在特定条件下可编辑,其他仅做展示效果。 查阅官方文档,没有发现是否隐藏这一属性,通过css控制样式感觉也比较麻烦,后面发现可…

uni-app顶部导航栏背景色如何设置,微信小程序返回键设置

百度经验 https://jingyan.baidu.com/article/67508eb48c5c37dcca1ce499.html 这样设置微信小程序没有返回键 {"path": "pages/index/index","style": {"navigationBarTitleText": "首页","app-plus": {"ti…

七、基础算法精讲:回溯

目录 一、子集型回溯1.1 电话号码1.2 子集1.3 分割回文串 二、组合型与剪枝2.1 组合2.2 组合总和 III2.3 括号生成 三、排列型3.1 全排列3.2 N 皇后3.3 N 皇后 II 一、子集型回溯 1.1 电话号码 Leetcode 17 MAPPING "", "", "abc", "de…

怎么使用Cpolar+Lychee搭建私人图床网站并实现公网访问?

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站,可以看做是云存储的一部分,既可…

Unity 场景烘培 ——LensFlare镜头光晕(三)

提示:文章有错误的地方,还望诸位大神指出! 文章目录 前言一、镜头光晕 (Lens Flares)是什么?二、使用Lens Flares组件总结 前言 一般情况下都会忽略的东西,镜头光晕。理论上不加镜头光晕,也不会有什么影响…

Pandas+Matplotlib 数据分析

利用可视化探索图表 一、数据可视化与探索图 数据可视化是指用图形或表格的方式来呈现数据。图表能够清楚地呈现数据性质, 以及数据间或属性间的关系,可以轻易地让人看图释义。用户通过探索图(Exploratory Graph)可以了解数据的…

〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

web前端页面基础

web具备三要素: 1、浏览器:通过浏览器访问html页面,发送请求提交到web服务器,并接收和展示服务器返回的html内容 2、web服务器:接收访问浏览器的请求,并将结果发送给浏览器 3、http协议:浏览…