前端vue项目初始化步骤以及后台项目的环境安装配置

文章目录

• • 前端项目初始化步骤
  • • • 1. 安装vue脚手架
      • 2. 通过vue脚手架创建项目
      • 3. 配置vue路由
      • 4. 配置Element-UI组件库
      • 5. 配置axios库
      • 6. 初始化git远程仓库
      • 7. 将本地项目托管到GitHub或码云中
  • 后台项目的环境安装配置
  • • • 1. 安装MySQL数据库
      • 2. 安装node.js 环境
      • 3. 配置项目相关信息
      • 4. 启动项目
      • 5. 使用Postman测试后台项目接口是否正常

前端项目初始化步骤 1. 安装vue脚手架

先安装nodejs，配置环境，然后安装合适版本的vue-cli，这在学习vue基础时应该已经都安装好了

2. 通过vue脚手架创建项目 3. 配置vue路由

有两种方法，一种是直接在命令提示符里面操作，一种是在浏览器中可视化地创建vue项目

以管理员身份打开命令提示符后切换路径的方法

在电脑导航栏找到搜索，输入命令提示符，选择以管理员身份打开，输入d:去往D盘，输入cd 空格 +路径，比如：cd D:前端学习路程Vue

• 方法一：

  直接输入命令vue create 文件名：vue create vue_test
  

• 方法二：

1. 以管理员打开命令提示符并选择好文件路径，输入vue ui自动打开浏览器，记得不要关闭哦，不然浏览器会显示未连接导致无法操作，不小心关闭了的话，按照打开的顺序，重新打开一次就行
   

2. 开始创建项目，输入项目文件夹名，初始化git仓库，其他默认即可，点击下一步
   

3. 选择手动创建项目或者是自动创建

前两个选项是自动创建项目，自主选择Vue3或是Vue2

4. 如果选择了手动创建，那么点击下一步会出现以下页面，默认选择了Babel和Linter/Formatter，需要自己选择打开Router，使用配置文件两个选项，点击下一步，弹幕中有人说不要下载ESlint，其实下载了也没有关系，可以在vue.config.js文件夹中使用lintOnSave:false, //关闭语法检查

5. 选择2x，ESLint+Standard config，其他默认，点击创建项目，等待一会儿，项目创建成功

4. 配置Element-UI组件库

点击添加插件，搜索vue-cli-plugin-element，点击图标选中，点击右下角安装，进入配置插件页面，选择import on demand"按需引入"，完成组件库配置

5. 配置axios库

选择依赖，点击添加依赖，搜索axios，点击头像图标选中并安装

6. 初始化git远程仓库 7. 将本地项目托管到GitHub或码云中

注册登录码云，登录后的第一步是打开设置，选择SSH公钥，点击’怎么生成公钥‘，跳转到生成/添加SSH公钥页面，根据步骤提示进行操作

1. 复制ssh-keygen -t ed25519 -C "xxxxx@xxxxx.com" ，xxxx改为自己的邮箱，cmd打开命令提示符
   

2. 在C盘找到.ssh文件夹中的.pub文件，将里面的内容全部复制粘贴到码云中，点击确认后进行密码验证，添加公钥成功

3. 公钥生效了吗？需要进行测试，在终端输入ssh -T git@gitee.com进行验证

4. 新建仓库

5. 创建成功后，进行配置

   git config --global user.name "minor"
   git config --global user.email "2234327121@qq.com"
   

   遇到问题：fatal: unsafe repository

   D:前端学习路程Vuevue_shop>git status
   fatal: unsafe repository ('D:/前端学习路程/Vue/vue_shop' is owned by someone else)
   To add an exception for this directory, call:
   
           git config --global --add safe.directory 'D:/前端学习路程/Vue/vue_shop'
   
   D:前端学习路程Vuevue_shop>
   

   解决办法

   git config --global --add safe.directory *
   

   接着输入git add . 一定要注意add后的空格

   D:前端学习路程Vuevue_shop>git add .
   

   在本地做一次提交

   D:前端学习路程Vuevue_shop>git commit -m "add files"
   

   重新输入一次git status查看

   D:前端学习路程Vuevue_shop>git status
   On branch master
   nothing to commit, working tree clean
   

   将仓库上传到码云上，第一次提交的话需要输入用户名邮箱和登录密码

   D:前端学习路程Vuevue_shop>git remote add origin https://gitee.com/bee2e7/vue_shop.git
   
   D:前端学习路程Vuevue_shop>git push -u origin "master"
   

上传成功，在VSCode里面安装扩展GitLens，可以很方便的操作git

后台项目的环境安装配置

前端项目想要正常开发必须要依赖于一个后台的接口项目才行

1. 安装MySQL数据库

上一篇文记录了phpStudy中遇到的问题：
https://blog.csdn.net/holive_9/article/details/124998653?spm=1001.2014.3001.5501

根据上文成功开启了mysql，接下来进行mysql数据导入

1. 点击phpStudy导航栏的数据库，需要先修改root密码，才可以创建新的数据库

2. 输入自定义的数据库名称、用户名和密码，点击确认，新的数据库创建成功

3. 点击右侧操作中的导入，等待一会儿，提示完成

4. 那么怎么查看自己是否导入成功呢？找到新建的数据库文件夹D:phpstudy_proExtensionsMySQL5.7.26datamydb，里面有如下大致内容即成功导入了

2. 安装node.js 环境 3. 配置项目相关信息 4. 启动项目

1. 安装依赖包npm install
   

2. 用node执行app.js，从而把api接口项目跑起来，在执行之前，需要先修改老师素材里的vue_api_serverconfig，把default.json里的user和password都修改成自己在phpStudy新创建的数据库用户名和密码，点击保存再去执行node .app.js，如果不修改postman的接口测试会失败

5. 使用Postman测试后台项目接口是否正常

1. 安装postman并注册账号

2. 进行测试

   接口基准地址：http://127.0.0.1:8888/api/private/v1/

   登录验证接口

   • 请求路径：login
   • 请求方法：post
   • 请求参数

   参数名	参数说明	备注
   username	用户名	不能为空
   password	密码	不能为空

测试完成，这里的token相当于session，后续会讲解