6-1 Vue项目预热 – 环境配置
本文最后更新于 1600 天前,其中的信息可能已经有所发展或是发生改变。

项目环境准备

node.js 安装

官网

node.js

安装完成后,控制台输入 node -v 进行版本查询,返回版本信息证明安装成功了

node版本

npmnode 的一个包管理工具,安装 node 的时候 npm 也随之安装了。控制台输入 npm -v 检查 npm 是否随之安装成功,返回版本信息即证明安装成功。

npm版本

码云平台注册

模拟正式工作流程,代码git提交,并进行版本控制
创建私有仓库,进行代码的存储

官网:https://gitee.com

git 安装

安装 git 本地代码与码云代码仓库进行绑定。

通过 git --version 进行检测 git 版本及是否安装成功

git 版本

本地仓库与码云关联

如何生成ssh公钥

1.生成公钥

你可以按如下命令来生成 sshkey:

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"  

# Generating public/private rsa key pair...
# 三次回车即可生成 ssh key

2.查看你的 public key,并把他添加到码云(Gitee.com) SSH key添加地址:https://gitee.com/profile/sshkeys)

cat ~/.ssh/id_rsa.pub
# ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC6eNtGpNGwstc....

3.添加后,在终端(Terminal)中输入

ssh -T git@gitee.com

4.若返回

Welcome to Gitee.com, yourname!

则证明添加成功。

怎么添加用户 ssh key?

  1. 进入个人设置页面—》SSH 公钥添加,具体链接
  2. 截图如下
    输入图片说明

项目的 ssh key 和用户的 ssh key 两处地方有什么不同?

项目的 sshkey 只针对项目,且我们仅对项目提供了部署公钥,即项目下的公钥仅能拉取项目,这通常用于生产服务器拉取仓库的代码。 而用户的 key 则是针对用户的,用户添加了 key 就对用户名下的项目和用户参加了的项目具有权限,一般而言,用户的key具有推送和拉取的权限,而项目的 key 则只具有拉取权限。

项目初始化

项目 clone

把刚才新建的项目通过 ssh clone 到本地。

命令行工具 (CLI)安装

大型项目需要通过 webpack 打包工具进行项目的构建,然后做一些语法的解析等操作。所有但引入一个 vue 文件是不行的,官方推荐了 命令行工具 (CLI) 来进行构建工程。具体的使用方法可以参考官方详细文档https://cli.vuejs.org/zh/

安装命令:

npm install -g @vue/cli-service-global

官网新版教程已经与视频稍微有点不一致了
参考官方最新教程

安装Vue CLI

npm install -g @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue --version

创建 vue 项目

初始化项目命令

vue init webpack myvue  

输入完提示下面这段代码,大概意思是通过 init 初始化需要先运行 npm install -g @vue/cli-init 下载依赖(应该是新版已经不用这种方法了)。

Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.

为了根据视频的教程学习,我安装了这个依赖,然后接下来的操作就和视频中的一样了。

初始化 vue 项目

vue init webpack myvue

vue init

然后进入创建的项目文件夹下,运行即可

cd myvue

访问:http://localhost:8080

代码提交到码云

通过 git 命令把代码提交到码云代码托管平台

git status
git add .
git commit -m "注释"
git push
标题:6-1 Vue项目预热 – 环境配置
地址:https://xiaodongxier.com/122.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇