用CScode创建vue前端的环境配置

目录

简介

Nodejs安装及环境配置

下载安装

如何用vite创建一个vue项目

在cmd下输入命令

使用gitee

设置私人令牌

创建仓库

git的安装和环境配置

本地克隆仓库

提交修改后仓库


简介

vue官网

Vue.js - 渐进式 JavaScript 框架 | Vue.js

vite官网

Vite中文网

Vite 是一种具有明确建议的工具,具备合理的默认设置。您可以在 功能指南 中了解 Vite 的各种可能性。通过 插件,Vite 支持与其他框架或工具的集成。如有需要,您可以通过 配置部分 自定义适应你的项目。

Vite 还提供了强大的扩展性,可通过其 插件 API 和 JavaScript API 进行扩展,并提供完整的类型支持。

Nodejs安装及环境配置

下载安装

点击这里下载

根据自己电脑系统及位数选择,我这里选择windows64位.msi格式安装包

下载完成后,双击安装包,开始安装,一直点next即可,安装路径默认在C:\Program Files下,也可以自定义修改

安装完成后,.msi格式的安装包已经将node.exe添加到系统环境变量path中,如果你下载的是.zip格式,因为没有安装过程,所以需要手动将node.exe所在目录添加到环境变量path中,查看系统变量验证

如何用vite创建一个vue项目

在cmd下输入命令

首先输入npm create vite@latest

然后name后面输入文件夹名称

选择Vue项目和JavaScript脚本语言

根据产生的run,依次进入三个命令
 

Done. Now run:
 1、 cd 20231114-02
 2、npm install
 3、npm run dev

PS E:\2201software\20231114> cd ..
PS E:\2201software> npm create vite@latest
输入项目名称
√ Project name: ... 20231114-02
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
  选择vue项目
 ----------------------------------------------------------------------------------------------------
    √ Select a framework: » Vue
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   JavaScript
    Customize with create-vue ↗
    Nuxt ↗
选择脚本语言
 ----------------------------------------------------------------------------------------------------
Scaffolding project in E:\2201software\20231114-02...

Done. Now run:
  cd 20231114-02
  npm install  
  npm run dev  

PS E:\2201software>
Done. Now run:

  cd 20231114-02
  npm install
  npm run dev

PS E:\2201software> cd 20231114-02
PS E:\2201software\20231114-02> npm install
[#########.........] | idealTree:20231114-02: timing idealTree:#root ***pl
----------------------------------------------------------------------------------------
运行项目  npm run dev

PS E:\2201software\20231114-02> npm run dev

> 20231114-02@0.0.0 dev
> vite


  VITE v4.5.0  ready in 556 ms

  ➜  Local:   http://localhost:5173/
  ➜  ***work: use --host to expose
  ➜  press h to show help

使用gitee

进入gitee官网,注册登录账号,进入官网,进入个人主页。

gitee官网

设置私人令牌

进入个人设置

选择私人令牌

生成新令牌

输入私人令牌描述和密码后即可生成,并将令牌复制

设置令牌

打开vs,在设置中搜索gitee(已下载gitee插件,如未配置,请先下载gitee插件),点击扩展,粘贴进私人令牌中。设置完成后将vs关闭重启

创建仓库

重启后进入gitee插件

在新建仓库中输入仓库名称,回车确认

设置好后,会在仓库下方显示库名

返回gitee页面,在个人主页页面进入仓库,并点击库名进入demo仓库

点击初始化readme文件

进入此界面则仓库创建完成

git的安装和环境配置

Git下载网址

根据自己电脑系统及位数选择

下载完成后,双击安装包,开始安装,一直点next即可,安装路径默认在C:\Program Files下,也可以自定义修改

下载后自动将git.cmd所在目录添加到环境变量path中

本地克隆仓库

点击仓库中的下载,复制下载路径

返回vs中,选择源代码管理(需先将Node.js配置在环境变量中),点击克隆

将路径复制在文本框中

选择克隆位置并创建

第一次克隆需输入用户名和密码(如若在此时账号或密码输入错误,需在控制面板-管理Windows凭据中找到gitee.***修改)

成功后在资源管理器中显示仓库

提交修改后仓库

如果对仓库内容进行修改,需提交到仓库,在源代码管理器中可直观对比

点击提交

转载请说明出处内容投诉
CSS教程_站长资源网 » 用CScode创建vue前端的环境配置

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买