Vue框架項(xiàng)目初始化
1. 前端項(xiàng)目初始化步驟
1.1 安裝 Vue 腳手架
安裝 3.x 版本的 Vue 腳手架：
npm install -g @vue/cli
-g 全局安裝下次直接使用 npm(nodejs的第三方模塊管理工具) 安裝nodejs自動(dòng)集成
Vue 腳手架用于快速生成 Vue 項(xiàng)目基礎(chǔ)架構(gòu)
1.2 通過 Vue 腳手架創(chuàng)建項(xiàng)目
基于3.x版本的腳手架創(chuàng)建vue項(xiàng)目
// 1. 基于 交互式命令行 的方式，創(chuàng)建 新版 vue 項(xiàng)目
vue create my-project
// 2. 基于 圖形化界面 的方式歪沃，創(chuàng)建 新版 vue 項(xiàng)目(推薦)
vue ui
// 3. 基于 2.x 的舊模板娃殖，創(chuàng)建 舊版 vue 項(xiàng)目
npm install -g @vue/cli-init
vue init webpack my-project
Vue 腳手架自定義配置
通過單獨(dú)的配置文件配置項(xiàng)目
①在項(xiàng)目的跟目錄創(chuàng)建文件 vue.config.js
②在該文件中進(jìn)行相關(guān)配置轨域，從而覆蓋默認(rèn)配置
// vue.config.js
module.exports = {
devServer: {
port: 8888
}
}
項(xiàng)目創(chuàng)建成功默認(rèn)開啟本地端口8080的服務(wù)器
1.3 配置 Vue 路由
在 Vue 腳手架的圖形化界面的初始化中配置 Vue 路由
1.4 配置 Element-UI 組件庫
在圖形化界面的插件選項(xiàng)里搜索 vue-cli-plugin-element 安裝 之后按需導(dǎo)入
1.5 配置 axios 庫
在圖形化界面的依賴選項(xiàng)里的運(yùn)行依賴中搜索 axios 安裝
開發(fā)依賴中搜索 less-loader less 安裝
1.6 初始化 git 遠(yuǎn)程倉庫
在使用 git 前解总，需要告訴 git 你是誰漠秋，在向 git 倉庫中提交時(shí)需要用到肉盹。
- 配置提交人姓名：git config --global user.name 提交人姓名
- 配置提交人郵箱：git config --global user.email 提交人郵箱
- 查看git配置信息：git config --list
在腳手架中已經(jīng)自動(dòng)初始化了git
手動(dòng)初始化：
git init
git add .
git commit -m "first commit"
1.7 將本地項(xiàng)目托管到 Github 或 碼云 中
git status
git add .
git commit -m '提交說明'
git remote add 遠(yuǎn)程倉庫地址別名 遠(yuǎn)程倉庫地址 (給遠(yuǎn)程倉庫起別名)
git push -u 遠(yuǎn)程倉庫地址別名 分支名稱 (下次提交遠(yuǎn)程倉庫直接 git push)
git checkout -b 分支名稱 (創(chuàng)建一個(gè)分支并切換到這個(gè)分支)
2. 后臺項(xiàng)目的環(huán)境安裝配置
①安裝 MySQL 數(shù)據(jù)庫
②安裝 Node.js 環(huán)境
③配置項(xiàng)目相關(guān)信息
④啟動(dòng)項(xiàng)目
⑤使用 Postman 測試后臺項(xiàng)目接口是否正常
