帶你玩轉vue——前端工程搭建

在正式搭建項目之前我們首先要認識一下vue-cli：
vue-cli就是vue的腳手架，顧名思義就是它的上面可以搭載很多工具，當你需要其中一個工具對工程進行構建時只需要將它安裝到腳手架上，然後使用命令調用它，而你並不需要知道他是怎麼運行的，這樣我們在項目構建中就可以更加得心應手，當有一天你的腳手架拆除的時候，展露出來的就是你精美的作品了！
需要注意的是vue-cli有兩個相差比較大的版本，2.x和3.x，因爲很多類庫2.x不支持所以我們儘量安裝3.x：
npm install -g @vue/cli
安裝完成後我們需要用cmd命令驗證一下是否安裝成功:vue --version

如果出現3.x的版本號說明安裝成功了，如果設備之前安裝過2.x的版本，需要將之前的版本卸載掉在執行上面的語句，卸載命令：npm uninstall vue-cli -g。
接下來就要進入我們的正題了——搭建項目。vue項目搭建有兩種方式，一種是在命令窗口中執行，另一種是運行一個ui頁面，鑑於可讀性和可操作性我們使用ui頁面的教程搭建項目：
運行vue ui

自動彈出如下圖的一個項目管理器頁面：

點擊創建，選擇項目根路徑：

選中項目後，點擊正下方的：

接下來就是一些項目基本項的配置：
1、這裏我們選用的包管理工具是npm

2、選擇預設配置

這裏的demo是我以前預設好的配置可以拿來直接用，這個配置基本上是不用動的，等一下大家可以把接下來的配置都做成預設，這樣就不用了每次搭建工程都重新選擇配置項了！所以這裏我們選擇手動！！
3、新建功能選擇

其中：
①router是vue的路由，官方解釋爲：Vue路由器是Vue.js的官方路由器。它與Vue.js核心深度集成！
功能包括：
嵌套路線/視圖映射
模塊化，基於組件的路由器配置
路由參數，查詢，通配符
查看由Vue提供的轉換效果。js的轉換系統
細粒度的導航控制
鏈接自動活動的CSS類
HTML5歷史模式或散列模式，在IE9中具有自動回退功能
可定製的滾動行爲
反正就是很重要啦！在我們的項目中也是必不可少的！！
②Vuex幫助我們處理共享狀態
通俗的講，vuex就是一個存放全局變量的容器，可以存放同步不同vue文件之間的狀態，例如我們的web項目的登錄功能，當你完成一次登錄後需要將當前登錄人的信息存放在項目中，這樣方便在以後其他功能中隨時可以調用，這時候就可以將登錄人信息存放在vuex中，這樣即使你離開了登錄頁面，也可以在其他頁面中獲取到登錄人信息
③PostCSS爲css預處理器，這個可以查看
4、配置選擇

配置選擇如上所示，點擊創建項目會彈出下面彈窗

爲你的配置填入一個預設名，下次創建項目就可以直接使用預設啦！！
然後就是耐心的等待了

這個過程vue會自動下載安裝自己需要的工具，如果網速慢可能要多等一會。
當出現下面這個頁面的時候，恭喜你你的第一個vue項目已經可以進入開發階段啦~~