搭建vue專案之前你需要安裝vue的腳手架和node.js，一起去看看怎麼搭建一個vue環境吧。（學程式語言最愛看見的就是用這個先寫一個helloworld，只想說我對世界友好可是現實是殘酷的。。。。。。）

1& 安裝node.js （安裝網址點選下面連結）

安裝完以後桌面上什麼都沒有是不是有點慌啊！不急，你先開啟Dos視窗，輸入以下命令，

如果介面如下：（恭喜你）

也有可能失敗，失敗的原因可能是系統許可權，目前還沒有找到最好的解決辦法。。。。。

Node.js是個啥人家首頁都寫著呢，俺就不給你解釋了哈。

2&安裝vue的腳手架

全域性安裝vue-cil，也就是所謂的腳手架（不要覺得有什麼高大尚的也就是如此而已）

1）用npm安裝（國際開源庫生態系統）

2）用cnpm安裝（使用國內映象安裝）

你先用淘寶映象安裝cnpm才可以使用哦

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

檢查是否安裝上（cnpm -v）

2. 用cnpm安裝vue腳手架

cnpm install -g vue-cli

最後檢查自己是否安裝上：（vue -V）記住這裡的-V是大寫字母V，出不來可不要懶我，我可不會管你

特別注意：

1.如果提示“無法識別”，有可能是npm的版本過低。

解決辦法：npm install -g npm（更新一下版本就好了）。

2. 如果安裝失敗的話。

解決辦法：npm cache clean（清除一下快取就好了）

3&生成專案

首先需要用cd指令進入專案目錄進行搭建專案的資料夾

配置完成以後，可以看到目錄下多出一個專案資料夾，裡面就是vue-cli建立的一個局域webpack的vue.js專案。

然後進入專案目錄下：cd mai

上面腳手架給我們把常用的外掛都下載並且配置起來，比方說路由、以及es6轉成es5的外掛。

在做專案的過程我們常常用到資料的傳輸和各個元件的管理，所以接下來我們還需要安裝一些外掛：

安裝vue-resource是用於ajax請求的vue外掛 用來和伺服器端進行資料通訊

npm install vue-resource --save

安裝vuex是用於管理每個元件之間的狀態值的改變

npm install vuex --save

點選開啟連結（vuex的介紹和使用）

記住以上兩個必須安裝在專案裡哦，忘記了小姐姐可不會負責哦（沒事，錯了就重新來一遍唄）。

npm install（這樣就完成了）

最後就是啟動專案了（就問一句激不激動小夥伴們）

npm run dev

出現這個頁面就算是大功告成了（在瀏覽器上輸入localhost：8080就可以開啟如下介面）

（可以開始寫專案了。。。。。。）

特別注意：

如果瀏覽頁面打不開或者是沒有載入頁面，有可能是本地8080埠被佔用，又或者是你關閉了這個視窗。

解決辦法：

針對第一種情況：修改配置檔案就好了

開啟專案找到config>index.js

建議將埠號改為不常用的埠（例如：8075 8081等等埠，一般情況預設的埠號是8080）。

對於第二種情況：重啟一下JavaScript的執行環境就好了，至於怎麼啟動我就不說了。

4&打包上線

自己的專案檔案都需要放到 src 資料夾下

專案開發完成之後，可以輸入 npm run build 來進行打包工作

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視，專案上線時，只需要將 dist 資料夾放到伺服器就行了。

匯入檔案以後，其檔案組織結構如下所示：

各個資料夾的含義如下：

|-- build            // 專案構建(webpack)相關程式碼

|   |-- build.js         // 生產環境構建程式碼

|   |-- check-version.js      // 檢查node、npm等版本

|   |-- dev-client.js        // 熱過載相關

|   |-- dev-server.js         // 構建本地伺服器

|   |-- utils.js             // 構建工具相關

|   |-- webpack.base.conf.js     // webpack基礎配置

|   |-- webpack.dev.conf.js      // webpack開發環境配置

|   |-- webpack.prod.conf.js     // webpack生產環境配置

|-- config           // 專案開發環境配置

|   |-- dev.env.js    // 開發環境變數

|   |-- index.js     // 專案一些配置變數

|   |-- prod.env.js   // 生產環境變數

|   |-- test.env.js   // 測試環境變數

|-- src           // 原始碼目錄

|   |-- components    // vue公共元件

|   |-- store        // vuex的狀態管理

|   |-- App.vue       // 頁面入口檔案

|   |-- main.js       // 程式入口檔案，載入各種公共元件

|-- static            // 靜態檔案，比如一些圖片，json資料等

|   |-- data        // 群聊分析得到的資料用於資料視覺化

|-- .babelrc           // ES6語法編譯配置

|-- .editorconfig      // 定義程式碼格式

|-- .gitignore        // git上傳需要忽略的檔案格式

|-- README.md       // 專案說明

|-- favicon.ico

|-- index.html      // 入口頁面

|-- package.json    // 專案基本資訊

最後來一個撩人小技能（得跟有好感的男盆友玩才有意思）：

女：我們兩個有幾條腿？

男：4條腿

女：不對不對

男：？？

女：一條腿，他們都說我們有一腿

（如果你的男盆友不安套路出牌的話我也沒有辦法了）