vue Cli 腳手架的搭建

一、安裝 node.js  應用

安裝完以後測試是否安裝成功，如圖：

二、全局安裝 vue - cli

輸入命令符： npm install --global vue-cli

測試是否安裝成功，成功如圖：

三、選擇須要安裝到盤和文件夾，如圖：E:\vue

四、開始建立文件，並取文件名爲 vue-cli-study，並按本身需求選擇

四、運行項目

 進入建立的文件夾，而後 npm run dev 開始運行項目，如圖：

 

另外記錄下 文件的目錄分別是作什麼用的，轉自 http://blog.csdn.net/webxiaoma/article/details/73650810?locationNum=4&fps=1 

一級目錄
build: webpack 配置相關的目錄
config: webpack 配置相關的目錄
node_modules: npm install 安裝的依賴代碼庫
src：咱們存放的源碼，咱們開發的所喲代碼都放在src目錄下。
staic: 存放一些第三方靜態資源的目錄
test:測試目錄，沒有太大用處，能夠刪除

一級文件：
.babelrc: babel的一些配置，（將es6編譯成es5的一些配置）
.editorconfig:編輯器的一些配置（包括編碼格式，縮進風格，換行格式）
.eslintignore：配置咱們不會對build文件和config文件進行語法檢查。
.eslintrc.js： eslint的配置文件，主要是定義一些代碼編寫風格的規則。
.gitignore：配置git倉庫忽略的一些文件（不會上傳）
index.html： 入口html 文件。
package.json：項目的一些配置信息（項目的一些具體信息）

src 文件夾下的 目錄：

assets 文件夾： 存放靜態資源，例如：圖片，font字體等。
conponents 文件夾： 存放組件，裏面你能夠在建文件來分組件，好比建 header 問價夾， footer 文件夾
router 文件夾： 配置路由文件
App.vue 文件： App.vue是咱們的主組件，全部頁面都是在App.vue下進行切換的
main.js 文件： 主要做用是初始化vue實例並使用須要的插件

由於我麼主要是在src下進行開發，全部這些文件名不是必須，你能夠根據您的項目需求去增長，或刪除。不過 app.vue 文件和 main.js 文件 必需要有的。