Vue框架项目初始化

1. 前端项目初始化步骤

1.1 安装 Vue 脚手架

安装 3.x 版本的 Vue 脚手架：

npm install -g @vue/cli     

-g 全局安装下次直接使用 npm(nodejs的第三方模块管理工具) 安装nodejs自动集成

Vue 脚手架用于快速生成 Vue 项目基础架构

1.2 通过 Vue 脚手架创建项目

基于3.x版本的脚手架创建vue项目

// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目
vue create my-project
// 2. 基于 图形化界面 的方式，创建 新版 vue 项目(推荐)
vue ui
// 3. 基于 2.x 的旧模板，创建 旧版 vue 项目
npm install -g @vue/cli-init
vue init webpack my-project

初始化文件

Vue 脚手架自定义配置

通过单独的配置文件配置项目
①在项目的跟目录创建文件 vue.config.js
②在该文件中进行相关配置，从而覆盖默认配置

// vue.config.js 
module.exports = { 
    devServer: { 
        port: 8888 
    } 
}

项目创建成功默认开启本地端口8080的服务器

1.3 配置 Vue 路由

在 Vue 脚手架的图形化界面的初始化中配置 Vue 路由

1.4 配置 Element-UI 组件库

在图形化界面的插件选项里搜索 vue-cli-plugin-element 安装 之后按需导入

1.5 配置 axios 库

在图形化界面的依赖选项里的运行依赖中搜索 axios 安装

开发依赖中搜索 less-loader less 安装

1.6 初始化 git 远程仓库

在使用 git 前，需要告诉 git 你是谁，在向 git 仓库中提交时需要用到。

1. 配置提交人姓名：git config --global user.name 提交人姓名
2. 配置提交人邮箱：git config --global user.email 提交人邮箱
3. 查看git配置信息：git config --list

在脚手架中已经自动初始化了git

手动初始化：

git init
git add .
git commit -m "first commit"

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

git status
git add .
git commit -m '提交说明'
git remote add 远程仓库地址别名 远程仓库地址  (给远程仓库起别名)
git push -u 远程仓库地址别名 分支名称   (下次提交远程仓库直接 git push)

git checkout -b 分支名称 (创建一个分支并切换到这个分支)

2. 后台项目的环境安装配置

①安装 MySQL 数据库
②安装 Node.js 环境
③配置项目相关信息
④启动项目
⑤使用 Postman 测试后台项目接口是否正常