Vue项目初始化

Vue项目初始化

一、安装Vue脚手架

二、通过Vue脚手架创建项目

1.ctrl+r打开cmd,输入vue ui，回车，浏览器会弹出UI的视图界面，借助视图界面创建Vue项目

2.点击创建按钮进入创建页面

3.选择好你的项目路径，然后点击 在此创建新项目

4.填入项目名称，打开git初始化按钮，填入init project(不知道啥子意思，回头查查能不能改别的），然后点击下一步

5.前两个是自己建的预设，第三个是默认预设，这里选择第五个，手动配置项目，然后点击下一步

6.选择你需要的插件，点开对应的开关，然后点击下一步

7.选择需要的配置，然后点击创建项目

8.如果想要将这个配置保存为预设，就写入预设名，然后点击保存预设并创建项目；否则就点击创建项目，不报存预设

9.等待创建

10.创建完成后就进入新项目界面，可以“为所欲为”啦~

三、配置Vue路由

配置路由已包含在第二步中

四、配置element-UI组件库

1.在视图界面中，点击左边栏的插件，然后点击右上角的添加插件

2.在搜索栏中写入vue cli plugin element找到对应的插件，点击选中，然后点击下方的安装按钮

3.配置插件，选中按需安装import on demand,第二个框选默认的中文，然后点击下方的完成安装按钮

4.再次点击左边栏的插件，能在所有插件中看到新安装的element插件

五、配置axios库

1.点击左边栏依赖，然后点击其右上角的添加依赖

2.选中运行依赖部分，在搜索栏中输入axios，找到对应的依赖，点击选中，然后点击右下角的安装

3.安装完成后，能在运行依赖中看到axios插件

六、初始化git远程仓库

1.进入git官网，没有账号就先注册，有账号就登录进入

2.鼠标悬浮在右上角自己的头像上，然后点击设置按钮

3.进入账号信息页面，找到SSH公钥，点击进入

4.添加公钥

1）如果有SSH公钥就在公钥栏填入，然后输入标题

2）没有公钥，进行如下操作
（1）右键怎样生成公钥，点击在新标签页中打开
（2）在新标签页中，右键公钥管理，点击在新标签页中打开

（3）在新标签页中，点击生成/添加SSH公钥

（4）进入gitee官网提供的生成公钥教程，按着这个操作做，就能得到公钥

（4）将得到的复制进去，输入标题，点击确认

3.如果需要权限验证，输入gitee账号密码，点击确定即可

4.看到下图的页面，证明已成功添加公钥（因为懒惰没有再次生成公钥操作，用的教程的图）

5.点击返回公钥列表，能看到一分钟前添加的公钥

6.添加后，在终端中输入ssh -T git@gitee.com,在生成/添加SSH公钥教程页面中也有教程

首次使用需要确认并添加主机到本机SSH可信列表。若返回 Hi XXX! You’ve successfully authenticated, but Gitee.com does not provide shell access. 内容，则证明添加成功。

七、将本地项目托管到Github或码云中

1.在gitee首页中，鼠标悬浮在加号上，点击新建仓库

2.输入仓库名称，不可重复，否则出错，最下边的第一个选项不能打勾选上，（现在好像都是默认没选上的，但是还是要注意），然后点击创建按钮

3.创建成功后进入如下页面

4.Ctrl + r 打开cmd,全局输入上图中的GIt全局设置内容（两句）

5.找到项目所在文件目录，shift+右键，点击在此打开powershell窗口

6检查项目状态，输入git status

还有包未导入

7.把所有文件载入暂存区git add .

8.在本地做提交git commit -m "add files"

9.再次查看工作目录状态git status

上图显示，本地目录是干净的，就可以做提交工作了，到目前为止，还只是在本地操作

10.将代码上传到云端，输入已有仓库后面的两句代码,

git remote add origin https://gitee.com/su-yanxia/vue_demp.git
git push -u origin master

11.第一次上传需要输入用户名和密码

12.出现如下操作就表示已经成功上传，刷新码云网页，可以看到最新的上传