Vue项目初始化

一、安装Vue脚手架

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

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_git


初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_02

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_git_03

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_04

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_05

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_git_06

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_07

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_08


初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_09

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_10

9.等待创建

初始化vue项目报failed to remove some directories vue项目初始化步骤_ssh_11


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

初始化vue项目报failed to remove some directories vue项目初始化步骤_ssh_12

三、配置Vue路由

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

四、配置element-UI组件库

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_ssh_13

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_14


初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_15


初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_16

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_17


初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_18

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_19

五、配置axios库

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_git_20

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_21

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_ssh_22

六、初始化git远程仓库

1.进入git官网,没有账号就先注册,有账号就登录进入
2.鼠标悬浮在右上角自己的头像上,然后点击设置按钮

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_23

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_git_24

4.添加公钥
1)如果有SSH公钥就在公钥栏填入,然后输入标题

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_25


2)没有公钥,进行如下操作

(1)右键怎样生成公钥,点击在新标签页中打开

初始化vue项目报failed to remove some directories vue项目初始化步骤_git_26


(2)在新标签页中,右键公钥管理,点击在新标签页中打开

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_27


(3)在新标签页中,点击生成/添加SSH公钥

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_28


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

初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_29


(4)将得到的复制进去,输入标题,点击确认

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_30

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_31

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_32

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_33

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_34


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

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

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_git_35

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_36


初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_37

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_38

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_39

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_40

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_41


初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_42


还有包未导入

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_43

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_44

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_45


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

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

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_Vue_46

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_47

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue_48

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

初始化vue项目报failed to remove some directories vue项目初始化步骤_vue.js_49

初始化vue项目报failed to remove some directories vue项目初始化步骤_ssh_50