一、搭建的前提環(huán)境

（1）安裝node環(huán)境，node版本4.0以上。安裝node的時(shí)候會(huì)下載npm包管理器，利用npm安裝開發(fā)依賴的插件包

二、利用vue-cli搭建一個(gè)vue項(xiàng)目

（1）全局安裝vue-cli

npm install -g vue-cli

（2）創(chuàng)建一個(gè)webpack模板的vue.js項(xiàng)目

vue init webpack project-name

三、基于webpack模板的vue項(xiàng)目目錄詳解

圖1 項(xiàng)目總目錄

（1）main.js是我們的入口文件，主要作用是初始化vue實(shí)例并使用需要的插件

（2）App.vue是我們的主組件，所有的頁面都是在App.vue里面進(jìn)行切換的。其實(shí)你也可以理解為所有的路由也是App.vue的子組件。所以我將router標(biāo)示為App.vue的子組件。

（3）index.html文件入口

（4）src放置組件和入口文件

（5）node_modules為依賴的模塊

（6）config中配置了路徑端口值等

（7）build中配置了webpack的基本配置、開發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置等