搭建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" } }