vue-cli 腳手架 安裝過程

1、 node安裝

  1）若是不肯定本身是否安裝了node,能夠在命令行工具內執行： node -v  （檢查一下 版本）；

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

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

2、 vue-cli 全局安裝

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

(linux加一步:

安裝完成後一樣要創建軟連接，不然會報No command 'vue' found的錯誤。

sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/vue /usr/local/bin/vue

)

安裝完成之後 能夠輸入命令 ：vue 回車，能夠看到針對vue的命令行；

 

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

  使用淘寶鏡像:

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

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

(linux加一步：

安裝完成後一樣要建軟連接，不然在使用cnpm時會報No command 'cnpm' found的錯誤。

sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/cnpm /usr/local/bin/cnpm

)

3>.注：cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm（如下操做將以cnpm代替npm）。

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

3、初始化項目

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

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

 

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

 

 

4、啓動項目

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

 

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

 而後執行 安裝 ：npm install

 

注： npm install 執行能夠進行vue已經vue的插件安裝，在第三步的時候，已經初始化了項目，而且在 package.json 裏面已經有相關配置，因此在這裏能夠直接安裝；

 安裝完成以後再執行命令： npm run dev 

整個項目就已經啓動了：

 

 

5、項目文件配置介紹

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