使用Vue構建搜索功能之（一）——建立Vue-cli工程

搜索在網站、軟件以及系統都是一個重要的組成部分，大到整個網站的全站搜索，小到下拉框的快速檢索均可能用到搜索功能，所以在模塊化開發中，能夠將搜索功能開發爲一個公共組件，用於其餘模塊或者頁面使用，甚至能夠用於我的資源用於其餘項目使用。

本教程爲Vue組件開發的一些列教程，用於構建Vue的各類組件。本人也是剛剛開始學習Vue，若是有什麼問題，還但願各位大神幫忙指正。

須要基礎：本地安裝node.js、npm。

一、 安裝vue-cli；

Vue-cli是用於Vue.js的一個腳手架工具，可以快速建立、安裝Vue工程，自動安裝工程所須要的依賴模塊，提升開發效率。

具體安裝步驟以下：

（1） 新建一個文件夾做爲項目工程文件，在項目文件內按住shift點擊右鍵，單擊「在此處打開命令窗口」

 

（2） 在命令窗口中輸入：npm  install  Vue-cli，安裝Vue-cli，而後等待安裝：

 

安裝完成之後，輸入vue –V（大寫），若是出現vue版本號，則說明vue-cli安裝成功，以下圖：

 

 

二、 構建Vue工程

安裝完成了vue-cli腳手架工具之後，就能夠開始構建vue工程了。

（1）建立工程命令以下：vue init webpack project（工程名稱），而後會有一些系統對話框，都選擇默認便可，一路回車（enter），以下圖：

 

（2）建立完成了工程之後，使用命令npm install安裝工程全部的依賴文件，完成之後，使用webstorm（我我的習慣）打開工程，工程目錄，以下圖：

 

其中的src爲項目的主要文件內容（咱們開發項目就在此文件內），static爲靜態文件資源。

（3）使用npm run dev啓動工程，以下圖：

 

在瀏覽器中輸入127.0.0.1:8080，顯示頁面以下，則說明建立工程成功：

 

（4）若是npm run dev啓動報錯，有可能不支持localhost主機或端口被佔用，可修改端口以下：