【vuejs小項目】一、腳手架搭建工作

標籤：dev   window   小項目   資訊   根目錄   開發   等等   lis   搭建   

一、關於vuejs

這是一個MVVM的前端開發架構，model（資料）、viewmode（通訊）、view（視圖），它吸取了reactjs和angularjs的長處，核心重點在於組件化的設計原則。

我們都知道一個普通常見的頁面，他會由header,body,footer,組成，裡面再細分還有nav，list，slidebar等等，組件化就是將這些會重複用到的代碼封裝起來，在一個頁面中需要用到的時候進行引入。

二、搭建腳手架（初始化項目）

做一個項目開始將一些檔案環境搭建好，這裡vue提供了vue-cli作為項目搭建工具，在nodejs環境下進行安裝，nodejs版本在4.0以上

以下是在window環境下的安裝步驟

1.node -v 查詢版本

2.npm install -g vue-cli 安裝vue-cli

3.vue 查看是否安裝成功

4.vue list 查看可用模板

5.vue init webpack project-name 選擇一個模板（webpack）初始化，注意這裡進入到需要項目所在目錄，然後根據提示填寫作者等內容

6.cd project-name 進入專案檔夾

7.npm insatll 安裝依賴，這裡是因為在init後檔案根目錄下有一個package.json檔案，這個檔案中包含了所需要的包，可以自動安裝。在沒有這個檔案的時候我們需要先init 然後安裝所需要的包，package.json會顯示安裝成功後的包的版本資訊

8.npm run dev 啟動項目，連接埠號碼是8080

vue-cli github地址

【vuejs小項目】一、腳手架搭建工作