vue2.0 下環境搭建

node的安裝

首先去node.js 官網下載你須要的node版本,下載安裝完後在命令行輸入：node -v 。若是顯示版本信息說明安裝成功。

vue -cli安裝

vue -cli手腳架安裝，輸入npm install -g vue -cli（加-g是安裝到全局）便可進入安裝頁面，npm安裝比較慢，你也能夠使用cnpm進行安裝：
使用淘寶鏡像:

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 來更新版本
npm說明：npm是Node Package Manager。node的包管理工具，默認安裝完node以後，npm會自動安裝上的。仍是cmd，輸入命令 npm -V 。正常出現版本號。
安裝圖：

安裝後使用vue -V進行版本查看。

第一個項目安裝

使用命令 vue init webpack helloworld建立項目

你能夠在該目錄下找到這些初始化好的文件

啓動項目

執行 cd helloword 進入到這個目錄下，而後使用npm run dev使得項目運行起來

執行完後顯示這個說明啓動成功在瀏覽器輸入http://localhost:8080
就能夠打開了

項目的配置文件介紹

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

node_modules: 安裝依賴代碼庫；

src : 存放源碼；

static：存放第三方靜態資源的，static裏面的.gitkeep，若是爲空，也能夠提交到gitHub上面，正常狀況下，是不能夠提交的。
.babelrc:把es6文件編譯成es5

.babelrc代碼

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

.editorconfig：編輯器的配置

root = true

[*]
charset = utf-8  // 編碼格式
indent_style = space //縮進。使用空格做爲縮進
indent_size = 2  //表示縮進大小爲兩格
end_of_line = lf  //換行符的風格
insert_final_newline = true  //當你建立一個文件。會自動在文件末尾插入新行
trim_trailing_whitespace = true  //自動移除行尾多餘空格

package.json

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "oneproject",
  "author": "apy",
  "private": true,
  "scripts": {  //表示能夠執行一些命令，例如：npm run dev會執行node build/dev-server.js，npm run build會執行node build/build.js，所以能夠經過scripts配置腳本
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": { //項目的依賴
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {//編譯須要的依賴
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

.eslintignore 忽略語法檢查的目錄文件
就是忽略對build/.js和 config/.js

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