Vue 學習筆記（4）Vue-cli4 項目搭建 + 目錄結構 + 項目打包、部署

Vue筆記目錄

Vue CLI 介紹

CLI是什麼?
命令行界面（英語：command-line interface，縮寫：CLI）是在圖形用戶界面得到普及之前使用最爲廣泛的用戶界面，它通常不支持鼠標，用戶通過鍵盤輸入指令，計算機接收到指令後，予以執行。也有人稱之爲字符用戶界面（CUI）。

Vue CLI 是什麼？
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。使用 Vue 腳手架之後我們開發的頁面將是一個完整系統(項目)。

---

Vue CLI 的優勢：

• 通過 vue-cli 搭建交互式的項目腳手架。
  主流前端框架比如 bootstrap、jquery 等可以通過執行命令方式下載相關依賴
• 通過 @vue/cli + @vue/cli-service-global 快速開始 零配置原型開發
• 一個運行時依賴 (@vue/cli-service)，該依賴：
  • 可升級（一條命令）；
  • 基於 webpack 構建，並帶有合理的默認配置；
    webpack 是一種項目打包方式：將編譯好的項目源碼 ===>部署到服務器上直接使用；
  • 可以通過項目內的配置文件進行配置；
    通過修改默認配置文件達到自己想要的項目環境。
  • 可以通過插件進行擴展。
    vue、v-charts、elementui …
• 一個豐富的官方插件集合，集成了前端生態中最好的工具。
  Nodejs、Vue、VueRouter、Webpack、yarn …
• 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面；

Vue CLI 安裝

Node.js 環境準備

1. 前往這裏下載 Node.js：http://nodejs.cn/download/
2. 配置 Node.js 環境變量；（建議百度）
3. 使用 node -v 驗證 Node.js 是否安裝成功

npm 介紹：
nodejs包管理工具（node package mangager）:

• npm 對前端主流技術進行統一管理

• 可以將 nodejs 想象成 Maven：
  maven 管理 java 後端依賴 — 遠程倉庫(中心倉庫) — 阿里雲鏡像；
  npm 管理前端系統依賴 — 遠程倉庫(中心倉庫) — 配置淘寶鏡像；

Node.js 配置淘寶鏡像：

npm config set registry https://registry.npm.taobao.org

查看 Node.js 配置的遠程倉庫：

npm config get registry

Node.js 配置 npm 依賴下載位置：（位置自定義）

npm config set cache "D:\CodeTool\nodereps\npm_cache"
npm config set prefix "D:\CodeTool\nodereps\npm_global"

驗證 Node.js 環境配置：

npm config ls

安裝 Vue 腳手架

Vue CLI 官網：https://cli.vuejs.org/zh/guide/

npm uninstall -g @vue/cli  # 卸載3.x版本腳手架
npm uninstall -g vue-cli   # 卸載2.x版本腳手架

安裝 3.x 版本的 Vue CLI：

npm install -g @vue/cli

驗證安裝成功：（如果顯示無法識別 “vue”，需要將 vue.cmd 配置到環境變量）

vue --version

第一個 Vue 腳手架項目

Vue CLI 中項目開發方式：一切皆組件！

1. VueCLI 開發方式是在項目中開發一個一個組件對應一個業務功能模塊，日後可以將多個組件組合到一起形成一個前端系統。
2. 日後在使用 Vue CLI 進行開發時不再書寫html，編寫的是一個個組件(.vue文件)，打包時 Vue CLI 會將組件編譯成運行的 html 文件。

命令創建項目

（1）使用以下命令來創建一個新項目：

vue create hello-world

（2）我們選擇 手動配置：用方向鍵 ↑ ↓ 操控選項，Enter 確定；

Please pick a preset: (Use arrow keys)
> default (babel, eslint) # 默認配置
  Manually select features # 手動配置

（3）選擇配置，勾選如下即可：方向鍵 ↑ ↓ 操作，按空格選中，Enter 確定；

Vue CLI v4.4.6
Please pick a preset: Manually select features
Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
>( ) E2E Testing

（4）首先檢查剛纔選擇的配置；
然後問我們是否使用 history mode，其實就是頁面路由含不含有 #；這裏我們選擇 Y

Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 
y

（5）選擇CSS預編譯器，這裏我們選擇Less；

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

（6）選擇 ESLint 代碼校驗規則，提供一個插件化的 javascript 代碼檢測工具，這裏我們選擇 ESLint + Prettier;

Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier

（7）選擇什麼時候進行代碼校驗，Lint on save：保存就檢查，
Lint and fix on commit：fix 或者 commit 的時候檢查，這裏我們選擇第一個；

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

（8）選擇把配置保存到哪個文件中，
In dedicated config files 存放到獨立文件中，In package.json 存放到 package.json 中，
這裏我們選擇放到 package.json 中；

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files
> In package.json

（9）問我們是否保存剛纔的配置，以後的文件可以直接使用，選擇 N。

Save this as a preset for future projects? (y/N)
N

至此項目搭建完畢。

使用如下命令運行項目：

cd hello-world # 首先進入項目根路徑

npm run serve # 運行項目

瀏覽器輸入如下路徑來訪問項目：

http://localhost:8080

圖形化界面創建項目

使用圖形化界面創建和管理項目：

vue ui

vue-cli4 目錄結構

• node_modules：用於存放我們項目的各種依賴；
• public：用於存放靜態資源（不會變動的）；
  • public/index.html：模板文件，作用是生成項目的入口文件。
    瀏覽器訪問項目的時候就會默認打開的是生成好的 index.html。
• src：是存放各種 .vue 文件的地方。
  • src/assets：用於存放着各種靜態文件（可能會變動），比如圖片。
  • src/components：存放公共組件（可複用），比如 header.vue、footer.vue 等。
  • src/router/index.js：vue-router 路由文件。
    需要引入 src/views 文件夾下的 .vue，配置 path、name、component。
  • src/store/index.js：是 vuex 的文件，主要用於項目裏邊的一些狀態保存。
    比如 state、mutations、actions、getters、modules。
  • src/views，存放頁面組件（不可複用），比如 Login.vue，Home.vue。
  • src/App.vue：App.vue 是項目的主組件；
    App.vue 中使用 router-link 引入其他模塊，所有的頁面都是在 App.vue 下切換的。
  • src/main.js：入口文件，主要作用是初始化 vue 實例，同時可以在此文件中引用某些組件庫或者全局掛載一些變量。
• .gitignore：配置 git 上傳想要忽略的文件格式。
• babel.config.js：一個工具鏈，主要用於在當前和較舊的瀏覽器或環境中將 ES6 的代碼轉換向後兼容（低版本ES）。
• package.json：模塊基本信息項目開發所需要的模塊，版本，項目名稱。
• package-lock.json：是在 npm install 時候生成的一份文件，用於記錄當前狀態下實際安裝的各個 npm package 的具體來源和版本號。

vue-cli 中使用 Axios

安裝 axios：

npm install axios --save-dev

配置文件 main.js 中引入 axios：

import axios from 'axios';

Vue.prototype.$http=axios;

使用 axios：·

this.$http.get("url").then((res)=>{});
this.$http.post("url").then((res)=>{});

Vue 腳手架項目打包和部署到 springboot 項目

打包——在項目根目錄中執行如下命令：

npm run build

注：Vue腳手架打包的項目必須在服務器上運行，不能直接雙擊運行；

在打包之後項目中出現 dist 目錄，dist 目錄就是 Vue腳手架項目的生產目錄（直接部署目錄）。

---

打包完後，如何將項目部署到 SpringBoot 項目上呢？

• 將打包好的 dist 目錄放到 SpringBoot 項目的 static 目錄下；
  
  記得要修改一下 index.html 中引入資源文件的路徑；
  

vue-cli4 中的 views 和 components 有什麼區別？

components 是小組件；views 是頁面級組件；
components 可被引用在 views 中，一般 views 組件不被複用；

vscode 中書寫 .vue 文件無提示

下載 Vetur 插件，然後修改 Settings.json：

{
   "emmet.triggerExpansionOnTab": true,
   "emmet.includeLanguages": {
       "vue-html":"html",
       "vue":"html"
    },
    "files.associations": {
       "*.vue": "html"
    }
}

修改地址欄是否顯示 #

在 src/router/inde.jx 文件下可以修改：mode: "history" 不顯示 #；

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

這個模式無法通過 a 標籤來切換組件，需要使用 router-link 標籤；

<router-link to="/user/add" tag="a">添加</router-link>

---

在 src/router/inde.jx 文件下可以修改：mode: "hash" 會顯示 #

const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes
});

這個模式可以通過 a 標籤來切換組件，也可以通過 router-link 標籤；

<a href="#/user/add">添加</a>

<router-link to="/user/add" tag="a">添加</router-link>