搭建vue環境

1. 下載安裝nodejs

截至2018-06-05 最新穩定版本爲 8.11.2，直接 next ，不改目錄。

PS C:\Users\Administrator> node -v
v8.11.2 PS C:\Users\Administrator> npm -v 5.6.0 

2. 安裝node後，設置 npm 淘寶代理鏡像

npm config set registry https://registry.npm.taobao.org npm info underscore （若是上面配置正確這個命令會有字符串response） 

或者直接編輯 ~/.npmrc（好比 C:\Users\Administrator\.npmrc ）加入下面內容。

registry = https://registry.npm.taobao.org 

3. 安裝 vue-cli

截至2018-06-05 最新版本爲 2.9.6。帶上版本號，你們用同一個版本。

npm i vue-cli@2.9.6 -g 

安裝完成後，校驗是否安裝成功

PS C:\Users\Administrator> vue -V
2.9.6 

3. 初始化項目

使用 vue init 命令初始化項目

vue init webpack 

? Generate project in current directory? (Y/n) // 是否在當前文件夾下建立項目： 輸入y, 回車 ? Project name (vue-learn-demo) // 項目名稱：不輸入，直接回車 ? Project description (A Vue.js project) // 項目描述：不輸入，直接回車 ? Author (fefuns <1321120469@qq.com>) // 做者： 不輸入，直接回車 ? Vue build (Use arrow keys) > Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere // 第一個是vue官方推薦大部分用戶用這個，這個表示能夠不基於 .vue 文件作開發，能夠在運行時作編譯，由於它有一個 compiler。 // 若是選第二個，min + gzip後，vuejs文件會減少6KB，由於它省略了templates模板的編譯過程， 由於這個編譯過程是webpack 用 vue-loader 去編譯.vue 作的, 可是必須依賴 .vue文件作開發。 // 上下箭頭選第二個，回車。 ? Install vue-router? (Y/n) // 是否安裝路由：輸入 y, 回車 ? Use ESLint to lint your code? (Y/n) // 是否使用 ESlint 規範代碼：輸入 y, 回車 ? Pick an ESLint preset (Use arrow keys) > Standard (https://github.com/standard/standard) Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) // 選擇哪一種 ESlint 規範預設。選擇 standard 規範 ? Set up unit tests (Y/n) // 是否設置單元測試：輸入 n, 回車 ? Setup e2e tests with Nightwatch? (Y/n) // 是否用 Nightwatch 設置 E2E 測試：輸入 n，回車 ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) > Yes, use NPM Yes, use Yarn No, I will handle that myself // 是否在建立完項目後自動安裝依賴，並選擇一種依賴管理工具。 // 選擇 npm, 回車 

進行完以上步驟，執行 npm run dev 便可打開 http://localhost:8080 開發環境

可能會遇到的問題：

1. vue-cli 建立項目的時候出現connect ETIMEDOUT錯誤

瞭解更多：

1. vue-cli@2.x+webpack模板項目結構歸納
2. 分析vue-cli@2.9.3 搭建的webpack項目工程
3. 教你從零開始搭建一款前端腳手架工具
4. eslint-standard 規則細則

4. 如何在項目中使用 scss

vue-cli@2.9.6 生成的項目，默認加入了處理sass的loader, 可是並無將依賴寫在package.json中。

因此想在 .vue文件裏使用scss

<style scoped lang="scss"> <style>

得本身安裝依賴：其中安裝sass-loader前須要提早安裝node-sass。若是你之後作的項目樣式是用less的話，安裝less-loader前須要安裝less。如下爲安裝node-sass 與 sass-loader

npm install sass-loader node-sass --save-dev 

可能會出現的問題：

1. node-sass 安裝不成功。解決方案，用以下方式安裝

npm install --save-dev node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass 

5. 安裝 HTTP 庫 axios

能夠理解爲jquery項目中的ajax

npm i axios -S // 至關於 npm install axios --save 

在項目中全局引入，修改 src/main.js

import axios from 'axios' ... Vue.prototype.$http = axios 

6. 安裝狀態管理庫 vuex

npm i vuex -S // 至關於 npm install vuex --save 

在項目中全局引入，修改 src/main.js

import Vuex from 'vuex' ... vue.use(Vuex) 

7. 安裝 ElementUI

npm i element-ui -S 

在項目中全局引入，修改 src/main.js

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' ... Vue.use(ElementUI) 

8. 關於 ES6 編譯相關的一些優化

babel-polyfill：

Babel 默認只轉換新的 JavaScript 語法，而不轉換新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（好比 Object.assign）都不會轉譯。若是想使用這些新的對象和方法，必須使用 babel-polyfill，爲當前環境提供一個墊片。

babel-runtime：

babel-runtime 是爲了減小重複代碼而生的。babel-runtime插件可以將這些工具函數的代碼轉換成require語句，指向爲對babel-runtime的引用。

babel-plugin-transform-runtime：

以插件的形式在打包時引入到文件裏

vue-cli生成的項目自帶了有babel-plugin-transform-runtime

安裝方式：

npm i babel-runtime -S // 至關於 npm install babel-runtime --save npm i babel-polyfill -D // 至關於 npm install babel-polyfill --save-dev 

在項目中全局引入，修改 src/main.js, 在第一行加入

import 'babel-polyfill' 

注意 bable-polyfill 必須寫在最上面，而babel-runtime是不須要引入的

瞭解更多：

1. babel的polyfill和runtime的區別
2. 爲何有的是 --save 有的是 save-dev, 他們之間的區別就在於。其實這個感受影響也不是太大。

--save-dev 是你開發時候依賴的東西，--save 是你發佈到線上以後還依賴的東西。

好比，你寫 ES6 代碼，若是你想編譯成 ES5 發佈那麼 babel 就是devDependencies。 若是你用了 axios，因爲發佈以後仍是依賴 axios 處理數據請求，因此是dependencies。

3. 爲何 babel-runtime 看起來跟babel-polyfill 功能是相似，前者須要須要裝在 dependencies, 後者只須要裝在 devDenpendencies？

最終的 src/main.js 以下：

import 'babel-polyfill' import Vue from 'vue' import router from './router' import Vuex from 'vuex' import axios from 'axios' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App' Vue.config.productionTip = false Vue.use(Vuex) Vue.use(ElementUI) Vue.prototype.$http = axios /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) }) 

最終的 package.json 以下：

{
  "name": "vue-learn-demo", "version": "1.0.0", "description": "A Vue.js project", "author": "fefuns <1321120469@qq.com>", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }, "dependencies": { "axios": "^0.18.0", "babel-runtime": "^6.26.0", "element-ui": "^2.4.0", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.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-polyfill": "^6.26.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", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.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" ] } 

9. 作 vue 項目編輯器的選擇與設置

涉及到工程化的項目，再也不建議使用輕量級編輯器sublime，推薦使用vscode或webstorm。

以vscode爲例，爲了更高效的編寫vue項目，至少須要作如下配置：

1. 安裝 Vetur 擴展

主要是用於讓vscode能識別vue文件，對vue代碼進行高亮處理

2. vscode保存代碼，自動按照eslint規範格式化代碼設置

我本身的設置： 文件 > 首選項 > 設置 { "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [{ "language": "javascript", "autoFix": true },{ "language": "vue", "autoFix": true },{ "language": "html", "autoFix": true }, { "language": "javascriptreact", "autoFix": true, }, { "language": "vue-html", "autoFix": true } ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "emmet.syntaxProfiles": { "javascript": "jsx", "vue": "html", "vue-html": "html" }, "git.confirmSync": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "workbench.iconTheme": null, "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, // "tslint.autoFixOnSave": true, "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", // "beautify.tabSize": 2, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", // "typescript.extension.sortImports.maxNamedImportsInSingleLine": 5, // "typescript.extension.sortImports.omitSemicolon": true, "editor.codeLens": true, "editor.snippetSuggestions": "top", // "react-native-storybooks.port": 6006, "editor.wordWrap": "on", "http.proxyStrictSSL": false, "workbench.colorTheme": "Monokai", "editor.detectIndentation": false, "emmet.triggerExpansionOnTab": true } 

3. VSCode拓展插件推薦（HTML、Node、Vue、React開發均適用）
4. 利用vscode配置一段符合官方風格指南的vue代碼片斷

• Ctrl+Shift+P打開命令輸入 snippet （打開用戶代碼片斷）
• 再輸入vue(選擇代碼片斷的語言) 若是搜索不到，安裝一個插件 vueHelper
• 若是搜索到複製粘貼如下代碼

{
  "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", "import OtherComponent from '@/components/OtherComponent'\n", "export default {", " name: 'MyName',", " components: {", " OtherComponent", " },", " directives: {},", " filters: {},", " extends: {},", " mixins: {},", " props: {},", " data () {", " return {\n", " }", " },", " computed: {},", " watch: {},", " beforeCreate () {", " // 生命週期鉤子：組件實例剛被建立，組件屬性計算以前，如 data 屬性等", " },", " created () {", " // 生命週期鉤子：組件實例建立完成，屬性已綁定，但 DOM 還未生成，$el 屬性還不存在", " // 初始化渲染頁面", " },", " beforeMount () {", " // 生命週期鉤子：模板編譯/掛載以前", " },", " mounted () {", " // 生命週期鉤子：模板編譯、掛載以後（此時不保證已在 document 中）", " },", " beforeUpate () {", " // 生命週期鉤子：組件更新以前", " },", " updated () {", " // 生命週期鉤子：組件更新以後", " },", " activated () {", " // 生命週期鉤子：keep-alive 組件激活時調用", " },", " deactivated () {", " // 生命週期鉤子：keep-alive 組件停用時調用", " },", " beforeDestroy () {", " // 生命週期鉤子：實例銷燬前調用", " },", " destroyed () {", " // 生命週期鉤子：實例銷燬後調用", " },", " errorCaptured (err, vm, info) {", " // 生命週期鉤子：當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。", " console.log(err, vm, info)", " },", " methods: {}", "}", "</script>\n", "<style lang=\"scss\" scoped></style>", "$2" ], "description": "Log output to console" } }