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 仓库中提交时需要用到。
- 配置提交人姓名:git config --global user.name 提交人姓名
- 配置提交人邮箱:git config --global user.email 提交人邮箱
- 查看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 测试后台项目接口是否正常