從零開始搭建一個vue.js的腳手架

在谷歌工做的時候，咱們要作不少界面的原型，要求快速上手，靈活運用，當時用的一些現有框架，好比angular，太笨重了——尤雨溪（Vue.js 做者）

vue.js是如今一個很火的前端框架，官網描述其簡單易用，靈活度高，性能好。本篇文章基於Windows系統

---

公司的項目前端框架選擇了vue，最近也一直在學習它，今天寫一篇Vue-cli腳手架搭建的學習記錄，之後忘記了再來查閱。那麼如何從零開始要跑起一個vue.js項目？主要分如下幾步：

1.Node.js（Javascript運行環境）安裝 
2.Vue.js安裝 
3.腳手架搭建 
4.項目文件描述

---

1.Node.js安裝

• 下載安裝
• 測試

下載安裝

點擊下載: Node下載 根據本身電腦系統安裝，一直點下一步便可

測試

Windows+R快捷鍵打開cmd窗口，輸入node -v出現版本號，即安裝成功！

---

2.Vue.js安裝

使用NPM安裝

—NPM: NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題

因爲 NPM 安裝速度慢（服務器在國外），這裏使用淘寶的鏡像及其命令 cnpm 
安裝淘寶的鏡像： 
打開cmd命令框，輸入 
npm install -g cnpm –registry=https://registry.npm.taobao.org 
在命令框輸入 
cnpm install vue 
好了，vue.js安裝完畢

---

3.腳手架搭建

• Vue-cli安裝
• 搭建測試

Vue-cli安裝 
在cmd命令框輸入 
cnpm install -g vue-cli

搭建測試 
1.在你的vue安裝目錄下（個人是C:\Users\dell）新建文件夾VueTest 
2.打開cmd命令窗口輸入cd VueTest，進入C:\Users\dell\VueTest，輸入vue list能夠看到列出了可使用的模板 

在命令框內鍵入 vue ,看到命令描述:

咱們init命令安裝 
vue init webpack test

安裝選項選擇本身須要的便可，其中ESLint爲ES6的代碼風格檢查器， 
這時看到安裝完模板後給出了用法（綠框內），而且路徑C:\Users\dell\VueTest多了一個test文件

進入test文件夾 
cd test 
安裝依賴 
cnpm install 
啓動 
npm run dev

啓動成功！

---

4.項目文件描述

打開項目文件夾，能夠發現比以前多出來一個node_modules，點開發現是以前安裝的依賴文件，那麼其餘文件夾都表明着什麼？存放着什麼呢？

這裏，咱們用一個表格作簡單描述：

行數	描述
一、2	webpack配置相關，好比在config中的index.js能夠配置端口號，這裏不作詳細描述
3	安裝的依賴代碼庫
4	項目中全部的源碼在這裏
5	第三方靜態資源
6	經過這個文件將ES6編譯成ES5的(有些瀏覽器不支持ES6)
7	編輯器的相關配置
8	忽略ES語法檢查的目錄文件
9	eslintrc相關配置，好比debug配置
10	git提交時忽略的文件目錄
11	關於CSS轉換的文件
12	項目入口文件
13	項目依賴文件、配置文件
14	項目描述文件

至此，咱們已經踏進了vue的大門！

(轉)https://blog.csdn.net/qq_32347235/article/details/58134723