Vue CLI
- 是一個基於 Vue.js 進行快速開發的標準工具
- 可通過@vue/cli 搭建交互式的項目腳手架
CLI @vue/cli
- 快速創建 Vue 項目
- 需要全局安裝的 npm 包
CLI 服務@vue/cli-service
- 開發環境依賴
- 局部安裝在 @vue/cli 創建的項目中的 npm 包
packsge.json文件中找到對應的 script 命令- 通過 npm 調用這些 script 命令 配置服務器或打包
CLI插件
- 提供可選功能的 npm 包
- 對項目的管理
-
package.json文件中 對應的 dependencies 查看安裝的功能插件
Vue CLI 創建項目
@vue/cli 的全局安裝
npm install -g @vue/cli
vue --version //查看安裝版本
創建項目
vue create projectName
運行項目
cd 項目名
npm run serve
訪問http://localhost:8080 查看效果
常用插件
以下插件是構建項目中所需要使用的：
- npm/cnpm install vue-router --save：Vue 路由組件，用於實現建立 url 和頁面之間的映射關係，根據需求自動跳轉路由頁面。
- npm/cnpm install element-ui --save：element-ui 框架，用於美化網頁，幫助我們快速完成頁面佈局。
- npm/cnpm install axios --save：基於 promise 的 HTTP 庫，用於發送請求。
未使用的插件
- npm/cnpm install babel-polyfill --save：通過 Polyfill 方式在目標環境中添加缺失的特性。
以下插件是對項目功能進行擴展所需要使用的：
- npm/cnpm install vue-quill-editor --save：Vue2 封裝的 Quill 富文本編輯器組件，用於實現富文本編輯。
- npm/cnpm install mavon-editor --save：基於 vue 的 markdown 編輯器，用於實現富文本編輯。
- npm/cnpm install vue-schart --save：使用 vue.js 封裝了 sChart.js 圖表庫的一個小組件，用於創建圖表。
- npm/cnpm install vue-cropperjs --save：Vue 圖像裁剪器組件，用於裁剪的目標圖像或畫布元素。
- npm/cnpm install vuedraggable --save：Vue 拖拽組件，用於實現拖拽功能。
- npm/cnpm install vue-i18n --save：國際化插件，用於切換語言。
Vue 文件項目結構
- node_modules 這個目錄是存放我們項目開發依賴
- public 這個目錄提供的是一個應急手段。存放在這個文件夾中的靜態資源不會經過 webpack，我們如果需要使用裏面的靜態資源就需要使用絕對路徑來對其進行引用。
- src 源碼 存放幾乎所有的代碼文件
- static 資源目錄。包含樣式文件、字體文件、圖片文件等等各種靜態資源
- .xxxx 文件 這些文件是一些配置文件，包括語法配置，git 配置，還有我們引入的一些插件配置等。
- package.json 項目配置文件，前引入的插件的配置信息都在裏面，還有一些與項目有關的配置也在其中。
- README.md 項目的說明文檔，markdown 格式編寫。
src 目錄
- api 接口模塊並使用 axios 實例。
- assets 模塊資源目錄，與 static 不同的是，他會被 webpack 所處理，而 static 文件則是直接使用即可。
- components 模塊組件目錄，（教程的項目中)將這些組件分爲兩組：
common公共組件和page頁面組件。 - router 路由配置目錄，去中心化之後的路由配置文件。
- untils 項目公用的 js 文件。
- App.vue 主應用程序組件，項目的根組件，所有組件都需要掛載到這個根組件上面。
- main.js 項目的核心入口文件，我們之前安裝的插件也是在這個文件當中去進行引入和掛載，在這裏面引入的插件我們就可以直接在整個項目中進行使用。