1.前端项目初始化步骤

1.  安装 Vue 脚手架
2.  通过 Vue 脚手架创建项目
3.  配置 Vue 路由
4.  配置 Element-UI 组件库
5.  配置 axios 库
6.  初始化 git 远程仓库 (前端项目必须使用远程仓库代码管理)
7.  将本地项目托管到GitHhub或码云中

步骤一，安装Vue脚手架

可通过全局方式安装vue脚手架 ，只需要安装一次，便可以正常使用了。

安装vue脚手架步骤:

 1.先检查一下是否安装node环境。如果没有node环境，就需要先安装node环境

    node.js 下载 | Node.js (nodejs.org)

 2.再安装vue脚手架。

•  检查node.js是否安装成功

node -v

显示版本号，即代表node.js安装成功 

•  安装vue-cli脚手架 （全局安装）

npm install -g vue-cli

•   vue3.0以上的安装方式和2.0的有点区别，添加了@符号

• npm install -g @vue-cli

•  删除vue-cli脚手架

npm uninstall -g vue-cli

• 卸载vue3.0脚手架  

  
  npm uninstall -g @vue/cli

   
• 检测vue-cli脚手架是否安装成功 

vue --version

 显示版本号，即代表vue-cli安装成功 

如若安装vue失败，解决方法：

npm 安装vue cli脚手架报错 npm err code EEXIST 解决方案 - 知乎 (zhihu.com)

步骤二，通过Vue脚手架创建项目

• 创建vue项目方式有很多种 ，在这里推荐使用GUI(可视化面板)形式来创建vue项目

1.打开cmd终端窗口，键入 vue ui 

vue ui

 2.回车之后，稍等一会更可自动在浏览器启动GUI（可视化）面板，我们就可以通过可视化的形式创建vue项目。

 3.点击创建项目的按钮，进入到目录选择面板。

•  选择项目存放路径。默认打开cmd，输入vue ui  打开Gui界面，默认的创建项目路径是C盘

1. 默认项目的存放路径，比如，存放到桌面。往下拉，找到Desktop，选择项目存放的目录

   2.那如果我们想把项目创建在其他位置的话，例如，我想创建项目在D盘项目实战的文件夹中

     3.打开项目实战文件到夹，点击方框中路径，进入可编辑状态

    4.直接输入cmd，这个cmd命令的输入是在D\vueproject\项目实战文件夹中,选择上面的路径，进入可编辑状态，输入cmd，敲回车。

   5.回车之后 ，cmd就直接打开的是我们项目的目录了 

   6.接着，再输入vue ui

   7.然后路径就会变成我们想要的位置了

 8.选择项目存放位置后,点击在此创建新项目 

 9.创建项目的名称必须是英文的,并且添加创建git的一个初始化信息,包管理器填npm

10.填写完成后，点击下一步，进入预设

   ① 选择手动的形式来配置vue的项目

 ② 进入功能面板，功能面板的作用是选择在此项目安装那些主要的功能

       一定要安装的功能：

1. Babel
2. Router （路由）
3. Linter/Formatter  （代码格式校验）
4. 使用配置文件  （将不同的配置，单独存放在不同的配置文件）

③ 点下一步，进入配置。有几个选项。特别注意，vue.js版本，要选择3.0的

㈠.是否使用历史模式这种路由，一般把该选项关闭。推荐使用哈西路由。

㈡.选择一种linter或formatter。选择标准的配置文件（ESLint+Standard config）

㈢.默认选择Lint on save (意思是只要点击了Ctrl+S保存文件，那么就会对所写的代码进行可视校    验)

㈣.如果需要把刚才的配置保存成一个预设，就输入预设名。如果不需要就直接点创建项目.

    当选择保存预设并创建项目后，下一次使用GUI (可视化面板)创建项目时，到选择预设的步骤时，会加载保存过的预设。

---

㈤.项目创建完成，就会显现出项目仪表盘。项目仪表盘的功能，可以进行可视化添加插件，依赖，更改配置，(任务)编译项目等操作。

步骤三，配置Vue路由

配置路由在步骤二中勾选Router 就已算是配置完成了。

步骤四，配置Element-UI组件库

① 打开项目仪表盘，点击插件。

② 在插件中，可以添加新的插件。也可以看当前项目安装的所有插件

③ 注意：vue3.0要使用Element-ui, 一定要安装Element-ui plus才能支持vue3.0

④ 选择后点击安装，等待安装完成

⑤ 安装完成后，还需要进行最后一步，把全局引用（默认选项），改成按需引用。不想改也行。默认全局引用只是导致文件过于宠大而已。修改完成后，点击安装。

⑥ 显示如下界面，证明element-plus已经安装完成了

步骤五，配置Axios库 

 ① 配置axios库，点依赖，进行添加该网络请求库

② 添加依赖

③ 注意：安装的是运行依赖。然后选中axios，点击安装 

④ 等待安装完成

⑤依赖中有显示刚才安装的axios，证明安装成功了

步骤六，初始化 git 远程仓库 (前端项目必须使用远程仓库代码管理)

①在码云上面创建一个仓库，如果没有则自行注册一个码云账户 我的工作台 - Gitee.com

 

②创建好后，需要进行Git全局设置。 由于我只是不想配置全局，所以我改成了局部的方式

③ 设置完成后，由于，我们已有一个vue现成的项目了，所以不用初始化那个步骤。如果还没有现成的项目，只是一个空文件夹，需要走创建git仓库那一步。然后直接敲，已有仓库下面的命令。先进行add,commit后配置一下远程地址，然后提交即可。

步骤七，将本地项目托管到GitHhub或码云中

① 使用命令形式提交代码到仓库。进入到项目目录，按住Shift+鼠标右键， 打开PowerShell终端

 使用Git Bash Here进行操作也行

② 把所有代码文件添加到本地暂存区 git add . 

③ 然后需要先把代码提交到本地仓库 git commit -m "add files"

   -m "这里添加自己的提交说明" 

④ 使用git status 查询当前工作目前状态。如下图，显示当前位于master分支，工作目录是干净的

⑤ 本地操作完成后，就是进行commit命令后，下一步就需要把当前代码推送到远程仓库了。

  先来配置一下远程仓库的地址，只需要配置一次即可。

 在PowerShell中，进入当前项目的目录，输入 git remote add origin "仓库地址"

 回车，没有任何提示，即成功。

⑥ 接着使用 git push -u origin master 把本地仓库和云端仓库，做一下关联。

  即推送本地代码到远程仓库

如果有弹框提示输入账户和密码，输入码云账户和密码即可。敲回车，如图，则提交成功

⑦ 刷新一下远程仓库，代码已经同步成功

 以上出自于：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibili