【前端】Vue-Cli 快速创建Vue3项目及一些项目初始化相关

文章目录

  • 前言
  • 1. 安装
    • 1.1 安装 Vue 脚手架
    • 1.2 创建项目
    • 1.3 本地运行项目
  • 2. 推送到仓库
    • 2.1 远程仓库准备
    • 2.2 关于gitIgnore文件
    • 2.3 通过git推送至远程仓库
  • 3. 补充与总结
    • 3.1 npm 版本是否要升级到最新？
    • 3.2 这个项目建议的各种版本
    • 3.3 一般前端gitIgnore文件
    • 3.4 推荐使用CZ规范提交
  • 参考文章

Vue3 前端脚手架

记录一下自己搭建的过程。

前言

这不年初，和小伙伴们做一个项目练手嘛，准备工作是数据库准备以及框架选取、脚手架搭建等。

本文记录一下个人前端Vue3脚手架搭的过程。

学习目标

  • 本地搭建Vue3脚手架，初始化项目，并推送到前端代码仓库

前提
在本地安装脚手架需要本地有 Node.js，日常若需要频繁使用多个 Node.js，推荐使用 NVM Node管理工具。由于我个人本地已经配过了，本文不赘述安装过程。

镜像源
原来的 registry.npm.taobao.org已替换为 registry.npmmirror.com
这里我已经配过了，因此本地CMD检查下来：

执行：

npm config get registry

结果为：

https://registry.npmmirror.com/

1. 安装

1.1 安装 Vue 脚手架

卸载已有的脚手架

npm uninstall vue-cli -g

出现以下类似结果即为成功

up to date in 80ms

安装脚手架

npm install -g @vue/cli

查看脚手架版本
若能正确显示 vue cli 版本，则为vue 脚手架下载成功：

vue -V# 或者使用
vue --version

我本地的结果：

E:\Study\Projects\FrontEnd\kcl2024_admin_frontend>vue --version
@vue/cli 5.0.8

说明成功。

1.2 创建项目

创建项目
在目标文件夹，cmd 键入：

vue create [projectname]

例如，当前项目名是：

vue create kcl2024_background_front_end

之后会进入如下选择界面。

选择版本

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)Manually select features

既然 Vue 3 兼容 Vue 2，那么我们直接来Vue 3 吧。当前版本VueCli搭建过程种的选择少了很多可选项，再接下来等待执行即可。

1.3 本地运行项目

进入到我们的项目目录，注意，具体是在我们生成基础项目后的文件夹里的我们自定义命名的文件夹内，如：
1

接着，cmd，或在集成IDE工具里终端，执行默认的：

npm run serve

出现以下即为成功：

 DONE  Compiled successfully in 3250ms                                                                          14:41:43App running at:- Local:   http://localhost:8080/- Network: http://192.168.101.32:8080/Note that the development build is not optimized.To create a production build, run npm run build.

默认是在8080，若我们占用了本地8080端口，则Vue会顺次帮我们加端口号，直到 65535，再超过这个端口就报错了，除非你的计算机比较特殊。

访问8080，查看页面
2

2. 推送到仓库

基础脚手架生成了，我们用git管理并推送到远程仓库。

2.1 远程仓库准备

此处我们用Gitee示例。
3

具体创建过程不赘述了，都是简单的填写，下一步下一步…

2.2 关于gitIgnore文件

作为后端程序猿，我们时不时地会关注gitIgnore文件，以区分需要上传的文件，以及特别注意target等文件不要上传到远程仓库。同样的道理，前端项目中一些工具相关的log文件、打包部署的dist文件夹以及node_modules一般情况下不要上传到远程仓库。太大，且没必要。

如果是没有用框架的纯HTML+CSS+JS项目，则需要手动指定.gitIgnore文件。

幸运的是，VueCli已经帮我们生成了.gitIgnore文件。
因此使用VueCli脚手架的过程中，我们不必过于关心上传范围，后续开发过程中有需要直接在项目中手动添加。

至于具体的git忽略文件，请参考下面的补充章节。

2.3 通过git推送至远程仓库

考虑到组内小伙伴都是后端，且比较少用VSCode做前端开发，我将个人的在VSCode推拉代码过程记录一下：

首先先在VSCode打开我们刚刚创建好的项目。
然后，Windows 下 VSCode ctrl + ` 快捷键打开终端，注意是esc下面那个```````

创建本地仓库
执行：

git init

这个命令表示初始化一个git文件

PS E:\Study\Projects\FrontEnd\kcl2024_admin_frontend> git init
Initialized empty Git repository in E:/Study/Projects/FrontEnd/kcl2024_admin_frontend/.git/

添加远程仓库

git add remote [origin_name] [remote_address]

一般情况下，远程名字我们都命名为origin，约定俗成的方便。远程地址就是我们仓库的git地址，注意是git地址，而不是仓库访问地址。
如：

git remote add origin https://gitee.com/programmersharry/kcl2024_background_front_end.git

之后，执行git remote -v即可查看远程仓库地址配置。

add 添加到暂存区
由于是初次创建的项目与仓库，我们配置好远程仓库之后，需要将全部文件先添加到本地缓存区：

git add .

commit

创建初次提交。

git commit -m 'feat(scope) : project init'

push 到远程分支
由于是gitee，默认master分支，直接初步推送到master，后续再选择分支模型进行分支切换与管理。

git push origin master

注意，日后开发中，更多使用的是 pull 与 push。

VSCode 图形化操作
上面介绍的是VSCode 的 terminal 推拉代码。下面我们用图形化操作试一试。IDEA就不说了，相信大家都用得很多。

如图所示，选中 VSCode 分支，将修改commit，push
4

5

3. 补充与总结

3.1 npm 版本是否要升级到最新？

当我们npm版本不是最新的时候，执行一些命令可能会报警告。

例如，我本地的 Node.js 为 18.16.0 ，由NVM一起下载，其默认的 npm 版本为 9.5.1：

E:\Study\Projects\FrontEnd\kcl2024_admin_frontend>node -v
v18.16.0E:\Study\Projects\FrontEnd\kcl2024_admin_frontend>npm -v
9.5.1

执行npm install -g @vue/cli的时候，我本地报：

added 859 packages in 17s
npm notice
npm notice New major version of npm available! 9.5.1 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g npm@10.4.0 to update!
npm notice

可以按照其中的建议，执行：

npm install -g npm@10.4.0

但是，一般情况下，为了各种依赖版本不报错，方便日后开发，我们还是不用最新的，这里只是给个建议。

3.2 这个项目建议的各种版本

Node ： 16 以上，建议使用LTS版本
Vue ： 3

至于工具的选用，趁手就行，个人是常用VSCode 以及 IDEA、WebStorm。

3.3 一般前端gitIgnore文件

.DS_Store
node_modules
/dist# local env files
.env.local
.env.*.local# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3.4 推荐使用CZ规范提交

参考：CSDN-CZ规范管理

其中，npm 下查看各种工具版本命令如下：

npm view [tool_name] version

例如：

npm view commitization version

参考文章

CSDN-CZ规范管理
CSDN-前端GitIgnore优秀参考文章
以及Sharry许久未维护的小号：
CSDN-VueCli入门
CSDN-git入门

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

UnityWebGL UGUI中文不显示问题

UnityWebGL UGUI中文不显示问题

这是Unity编辑中效果 打包成webgl后的效果（中文没有显示出来） 解决方法 将Unity默认使用的Arial替换成中文字体。 1.找到电脑字体库（win电脑字体库路径：C:\Windows\Fonts ；Mac电脑搜索“字体册”）。 2.将…
阅读更多...
【更换yarn的位置】解决yarn和nodejs不在同一盘下产生的某些命令应用失败问题

【更换yarn的位置】解决yarn和nodejs不在同一盘下产生的某些命令应用失败问题

具体问题我记得是command fail什么error，记不太清楚了，文章主要写了如何替换yarn路径，希望可以帮助到大家。
阅读更多...
Jetpack Compose 架构层

Jetpack Compose 架构层

点击查看：Jetpack Compose 架构层 官网 本页面简要介绍了组成 Jetpack Compose 的架构层，以及这种设计所依据的核心原则。 Jetpack Compose 不是一个单体式项目；它由一些模块构建而成，这些模块组合在一起，构成了一个完…
阅读更多...
Zookeeper简介及选举机制

Zookeeper简介及选举机制

1.概述 Zookeeper是一个开源的，分布式的，为分布式框架（如下图中的Hadoop和Hive）提供协调服务的Apache项目。 工作机制：基于观察者设计模式的分布式服务管理框架，负责存储和管理数据，接受观察者…
阅读更多...
RabbitMQ 部署方式选择

RabbitMQ 部署方式选择

部署模式 RabbitMQ支持多种部署模式，可以根据应用的需求和规模选择适合的模式。以下是一些常见的RabbitMQ部署模式： 单节点模式： 最简单的部署方式，所有的RabbitMQ组件（消息存储、交换机、队列等）都运行在…
阅读更多...
2023年12月CCF-GESP编程能力等级认证C++编程七级真题解析

2023年12月CCF-GESP编程能力等级认证C++编程七级真题解析

一、单选题（共15题，共30分） 第1题 定义变量 double x ，如果下面代码输入为 100 ，输出最接近( )。 A：0 B：-5 C：-8 D：8 答案：B 第2题 对于下面动态规划方法实现的函数，以下选项中最适合表达其状态转移函数的为( )。 A： B： C： D：
阅读更多...
【自然语言处理-二-attention注意力 是什么】

【自然语言处理-二-attention注意力 是什么】

自然语言处理二-attention 注意力机制 自然语言处理二-attention 注意力记忆能力回顾下RNN（也包括LSTM GRU）解决memory问题改进后基于attention注意力的modelmatch操作softmax操作softmax值与hidder layer的值做weight sum 计算和将计算出来的和作为memo…
阅读更多...
C++ 学习之Set容器

C++ 学习之Set容器

C++ Set容器构造和赋值 在C++中，std::set是一个用于存储唯一元素的有序集合容器。下面介绍一下std::set容器的构造和赋值操作： 构造 std::set 默认构造函数： std::set<int> mySet; // 创建一个空的set使用初始化列表构造： std::set<int> mySet
阅读更多...
【Java程序设计】【C00285】基于Springboot的游戏分享网站（有论文）

【Java程序设计】【C00285】基于Springboot的游戏分享网站（有论文）

基于Springboot的游戏分享网站&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的游戏分享网站 本系统分为系统功能模块、管理员功能模块以及用户功能模块。 系统功能模块&#xff1a;在网站首页可以查看首页、游戏…
阅读更多...
深入探究node搭建socket服务器

深入探究node搭建socket服务器

自从上篇中sokect实现了视频通话&#xff0c;但是是使用ws依赖库实现的服务端&#xff0c;所以最近再看ws源码&#xff0c;不看不知道&#xff0c;一看很惊讶。 接下来一点点记录一下&#xff0c;如何搭建一个简易的服务端socket&#xff0c;来实现上次的视频通讯。 搭建一个…
阅读更多...
IP 电话

IP 电话

1 IP 电话概述 IP 电话是在互联网上传送多媒体信息。 多个英文同义词&#xff1a; VoIP (Voice over IP) Internet Telephony VON (Voice On the Net) 1.1 狭义的和广义的 IP 电话 狭义的 IP 电话&#xff1a;指在 IP 网络上打电话。 广义的 IP 电话&#xff1a;不仅仅是…
阅读更多...
Linux学习方法-框架学习法——Linux应用程序编程框架

Linux学习方法-框架学习法——Linux应用程序编程框架

配套视频学习链接&#xff1a;https://www.bilibili.com/video/BV1HE411w7by?p4&vd_sourced488bc722b90657aaa06a1e8647eddfc 目录 Linux应用程序编程 Linux应用程序编程 Linux文件I/O(input/output) Linux文件I/O(五种I/O模型) Linux多进程 Linux多线程 网络通信(s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023