一、 node安裝

1）如果不確定自己是否安裝了node,可以在命令行工具內執行： node -v （檢查一下 版本）；

2）如果 執行結果顯示： xx 不是內部命令，說明你還沒有安裝node , node 安裝地址：http://nodejs.cn/download/

注 ：安裝 vue-cli 腳手架目前需要node版本為 v4.0 以上；

二、 vue-cli 全局安裝

命令行執行 : npm install -g vue-cli // 加-g是安裝到全局

安裝完成以后可以輸入命令：vue 回車，可以看到針對vue的命令行；

**:如果npm在國內的網絡環境下可能會比較慢，解決方案：

使用淘寶鏡像:

1>.官方網址：http://npm.taobao.org；

2>.安裝：npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤；

3>.注：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm（以下操作將以cnpm代替npm）。

4> 如何更新npm的方法： 可以使用 npm install -g npm 來更新版本

三、初始化項目

執行命令： vue init webpack demo(你新建的項目名稱/文件名稱)

執行之后將會 自動初始化一個文件夾 ：demo

手動打開demo文件夾 可以看到 已經初始化好了 一個基本的項目：

四、啟動項目

如上圖所示，執行初始化項目以后，下面會有對應的命令：

繼續執行： cd demo (這是進入到demo文件夾的命令)

然后執行 安裝 ：npm install

注： npm install 執行可以進行vue已經vue的插件安裝，在第三步的時候，已經初始化了項目，并且在 package.json 里面已經有相關配置，所以在這里可以直接安裝；

安裝完成之后再執行命令： npm run dev

整個項目就已經啟動了：

五、項目文件配置介紹

build 和 config 是關于webpack的配置，里面包括一些server,和端口；

node_modules: 安裝依賴代碼庫；

src : 存放源碼；

static：存放第三方靜態資源的，static里面的.gitkeep，如果為空，也可以提交到gitHub上面，正常情況下，是不可以提交的。

.babelrc:把es6文件編譯成es5

.babelrc文件{ "presets": ["es2015", "stage-2"],//表示預設，表示babelrc轉換預先需要安裝的插件 "plugins": ["transform-runtime"],//把es6的方法做轉換 "comments": false //false表示轉換后代碼不生成注釋}

.editorconfig：編輯器的配置

.editorconfigcharset = utf-8 //編碼indent_style = space //縮進風格,基于空格做縮進indent_size = 2  //縮進大小是2格end_of_line = lf  //換行符的風格insert_final_newline = true //當你創建一個文件，會自動在文件末尾插入新行trim_trailing_whitespace = true //自動移除行尾多余空格

.eslintignore 忽略語法檢查的目錄文件

就是忽略對build/*.js和 config/*.js

package.json :

{ "name": "demo", "version": "1.0.0", "description": "demoApp", "author": "", "private": true, "scripts": { /*表示可以執行一些命令，例如：npm run dev會執行node build/dev-server.js，npm run build會執行node build/build.js，因此可以通過scripts配置腳本*/  "dev": "node build/dev-server.js",  "build": "node build/build.js",  "lint": "eslint --ext .js,.vue src" }, "dependencies": { /*項目的依賴*/  "vue": "^2.2.2",  "vue-router": "^2.2.0" }, "devDependencies": { //編譯需要的依賴  ....................... }, "engines": {  "node": ">= 4.0.0",  "npm": ">= 3.0.0" }, "browserslist": [  "> 1%",  "last 2 versions",  "not ie <= 8" ]}

入口文件： index.html 和 main.js

 以上所述是小編給大家介紹的vue-cli腳手架安裝詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！