vue專案環境搭建及乙個簡單的vue例子

本文**：

一、vue-cli腳手架的搭建步驟

首先，確定你的電腦上已經安裝了nodejs，可以使用npm包管理器安裝環境，如果還沒有安裝node環境，可參考我的另外一篇部落格中提到的關於node的安裝步驟初識react之react+webpack+es6環境配置步驟整理，這裡就不多說了。

1）開啟cmd命令視窗，切換到你要新建專案的資料夾下，此時可使用node -v檢查node的版本，如果出現版本號則node已安裝。

2）使用以下命令全域性安裝vue-cli

npm install -g vue-cli 或者使用國內的**映象 npm install -g cnpm --registry=

3）使用命令 vue init webpack vue-demo 搭建vue專案, 「vue-demo」是你的專案名稱。

3）配置需要安裝的vue環境

4）以上步驟完成之後，專案目錄結構如下圖所示，其中的src目錄下的檔案，就是我們自己需要使用到的檔案了。

5）執行 npm run dev 命令，啟動專案

當出現下圖時，說明專案啟動成功！

以上就是我搭建vue專案環境的全過程了。

二、乙個簡單的不能再簡單的vue例子

這裡，我們在已經搭建好的vue專案中，實現乙個從專案已有的hello world! 跳轉至我們自己建立的hello vue元件頁面的例子。

1）首先，在已經搭建好的環境的components下新建乙個vue檔案，作為我們自己的vue元件。

2）然後在hellovue.vue檔案中新增以下**，vue檔案的格式分為三個模組，如下圖所示，首先是template模板，然後是script標籤及**，最後是style樣式。

hello vue.js! }

3）在專案搭建時生成的helloworld.vue檔案中的template中新增乙個鏈結，用於跳轉至我們自己的元件內容。

關於 router-link 的使用，請參考 vue-router文件。

4）接著，我們修改專案中的router目錄下的index.js檔案，這是乙個vue-router的簡單應用。對於路由，我們一般會想到寬頻安裝時我們使用的路由器，這裡的路由主要是為了定義頁面之前的跳轉。在router下的index.js檔案中新增以下**：

5) 最後，我們重新整理瀏覽器就可以看到效果了。