432 vue項目開啟本地服務器

**畫圖 : ** 接口訪問路徑
前端頁面 ===> 接口服務器 ===> 數據庫服務器 ==> 數據庫

---

第一小步 : 打開 : 數據庫服務器

打開 phpStudy , 點擊啟動 【啟動MySQL】

---

第二小步 : 導入數據庫

1. 打開 navicat 【雙擊navicat.exe即可 】

2. 點擊連接 : 創建一個MySQL連接

3. 用戶名和密碼 : root-root(不能亂寫) ，這個是和 config 里的配置一樣的

4. 創建一個數據庫 : shop_admin 不要亂寫, 選擇倒數找到 unt-8

5. 雙擊打開數據庫

6. 導入 sql語句 => 右鍵運行 SQL 文件 => shop-api 最后一個 sql 文件

   如果沒有反應 : 表 => 右鍵刷新，無效，則關閉 navicat，然后重啟。

---

第三小步 : 開啟接口服務器

1. 打開 shop-api

2. 運行 npm start

   一直報錯：Cannot find module '.lib/compat' ，就把node_modules文件夾刪除，然后執行 cnpm install，即可解決。

3. 顯示成功 : API 接口服務啟動成功，占用端口 8888

---

第四小步 : 測試接口

http://localhost:8888/api/private/v1/login?username=admin&password=123456

項目使用接口 :  (記得保存)
// shop-api里面有


{
    data: {
        id: 500,
        rid: 0,
        username: "admin",
        mobile: "12345678",
        email: "[e-mail]",
        token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1ODU3MDUzMjksImV4cCI6MTU4NTc5MTcyOX0.1tYcDbUPLigR_Ti3o0lyCKtzjtVzUh2RrTIgTWRNqYw"
    },
        meta: {
            msg: "登錄成功",
            status: 200
    }
}

安裝JSONView-for-Chrome-master
地址： https://github.com/gildas-lormeau/JSONView-for-Chrome
下載zip包，git clone 也可以，
然后把JSONView-for-Chrome-master目錄下的 WebContent文件夾拖到瀏覽器的擴展程序中，完成。

---

第五小步 : 使用

• 每天做項目之前 :
• 1. 每次都要先開啟 phpStudy 中的 mySql
• 2. 每次都要打開shop-api , 運行 npm start

---

筆記

# 腳手架創建項目

1. 安裝腳手架 : `npm i vue-cli -g`
2. 檢測 : `vue -V` (version)
3. 使用 : `vue init webpack demo01`

```js
> npm 清除緩存
> 1. 路徑 : C:\Users\ma250\AppData\Roaming\npm-cache
> 2. 命令  npm cache clean -f

> 1. 假如  npm i XXX 報錯了
> 錯誤 : LINK  NetWork 找不到包
> 清緩存 : `npm cache clean -f `
> npm i XXX

> 2. vue init webpack demo01  報錯
>   清緩存 : `npm cache clean -f `
> npm i  ? 成功率低
>  vue init webpack demo01  再來一次
```


# 文件介紹
- build - webpack 的配置文件
- config - vue 項目的配置文件
- node_modules 依賴包
- src : 源文件 (重點)
- static - 靜態文件 (不打包的)
  .gitkeep 保持一個空文件夾能夠上傳到 github/碼雲等托管代碼網站
- .editorconfig 編輯器配置

  - 1. vscode 插件 : `EditorConfig fro VS Code`  【Vetur】
  - 2. 找到 .editconfig 配置

- .eslintignore eslint 忽略檢測的部分
- .gitignore git 上傳忽略的
- .postcssrc.js 處理 css 的配置文件
- index.html 入口頁面


# src
- assets - 靜態資源 (打包的)
- components 組件
- router 路由
- app.vue 根組件


# eslint
1. 作用 :檢測代碼是否規范 , 保證代碼的一致性 和避免錯誤

2. 如何使用
- 安裝 vscode 插件 : `ESLint`
- 設置配置

3. ctrl + S => 自動格式化 + 修復
4. 參考 : Prettier + Standand

5. 兩個忽略注釋
- 忽略下一行 : // eslint-disable-next-line /_ eslint-disable-next-line _/
- 忽略文件的全部警告 /_ eslint-disable _/

# @ 其實就是 src 的絕對路徑