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 ）加入下面内容。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
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 开发环境

搭建vue环境 随笔 第1张

可能会遇到的问题：
  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。

  1. 为什么 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 }
  1. VSCode拓展插件推荐（HTML、Node、Vue、React开发均适用）
  2. 利用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" } }
搭建vue环境 随笔 第2张

 

 
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄