一、 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? //自動移除行尾多余空格
.editorconfig
.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