1. 程式人生 > 實用技巧 >使用vue-cli腳手架工具搭建vue工程專案以及配置路由

使用vue-cli腳手架工具搭建vue工程專案以及配置路由

vue-cli是用node編寫的命令列工具,我們需要進行全域性安裝。開啟命令列終端,輸入如下命令:

$ npm install -g vue-cli

這裡使用的是npm,為了開發的便利,推薦安裝cnpm,這樣執行指令會更迅速,安裝命令如下:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

注意:確保node的版本為4.x、5.x及以上。

我們可以使用vue-cli來快速生成一個基於Webpack構建的專案,開啟命令列終端,通過cd指令定位到指定的路徑下,輸入如下命令:

$ vue init webpack vueExamp

執行命令後,會有一些命令列互動,我們可以初始化一些專案資訊,如下圖所示:

專案初始化完成以後,會在當前目錄下生成如下目錄結構,進入vueExamp目錄,安裝專案的依賴,執行如下命令:

$ npm install

依賴安裝完成以後,來了解一下專案的目錄結構:

啟動專案,執行如下命令:

$ npm run dev

如果執行中報如下錯誤:Resolve error: unable to load resolver "node"

執行如下命令:

$ cnpm  install --save-dev eslint-import-resolver-node

預設埠號是8080,開啟瀏覽器,輸入http://localhost:8080,生成的頁面如下圖所示:

這樣,最基本的框架就已經搭建完畢了,接下來就是配置路由以及編寫元件了。