vue-cli 腳手架 安裝 vue-cli 腳手架 安裝
vue-cli 腳手架 安裝
一、 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：編輯器的配置
.editorconfig charset = 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
一、 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：編輯器的配置
.editorconfig charset = 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