Vue 2.0 开发流程 (全)

Vue 是现阶段比较主流的前端框架之一, 具有轻量&高效的特点, 而且容易入门. 该文章用 vue2.0 全家桶详细的介绍了一个项目 (饿了么APP) 的整个流程和开发所用到的工具以及可能踩到的坑

相关项目推荐: https://github.com/shenxianhui/super-mall

更多技术文章请关注

• 小贤笔记-

推荐阅读

• Vue API
• Vue 风格指南

课程介绍

实战流程

线上生产环境

技术分析

课程安排

学习目标

学习内容

Vue.js 简介

Vue-cli

安装 (必须先安装node.js 4+以上版本)

• 安装好node后输入 node -v 可查看版本
  

• npm install -g vue-cli 安装本地包,"-g"代表全局
  

• vue 介绍vue用法
  

• vue list 显示可用的模板
  

• vue init webpack elm 插入一个工程

  • "init" 这个命令用于创建一个 package.json
  • 选择上面列表中的 webpack 方式
  • "elm" 只是起的一个名字

• ? Project name (sell) 是否确认使用该名字? （确定按enter，否按N）按回车键

• ? Project descripton (A Vue.js project) 随意输入一段简短介绍,用英文,输入:sell app,按回车键

• Author 将作者添加到package.json里面（确定按enter，否按N）输入名字, 按回车键

• > Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

  • Vue公司的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter）

• Install vue-router? (Y/n) 安装的路由？（可安可不安，以后也可以再安，根据需求选择）（选y）

• Use ESLint to lint your code? (Y/n)使用ESlint语法？（Y/ N）（使用ESLint语法可以规范es6格式,但要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错,建议N）
  想挑战eslint的同学可参考ESLint 配置与删除

• standard……使用ESLint的哪个模板,默认就可,直接回车

• Setup unit tests with Karma + Mocha? (Y/n))设置单元测试？（Y / N）（选N）

• Setup e2e tests with Nightwatch? (Y/n)Nightwatch建立端到端的测试？（Y / N）（选N）

• Should we run......选中默认: Yes, use NPM,回车键
  

• To get started:可以按照下面的步骤来

  • cd elm 进入elm文件夹
  • npm run dev 启动项目
    

• dir 查看当前文件夹目录

  • node_modus 安装模块
    

• npm run dev 启动项目
  

• 打开浏览器,输入地址localhost:8080,会弹出一个Vue的界面
  

项目文件介绍

• build webpack配置相关
  

• config webpack配置相关
  

• node_modules npm install安装的依赖代码库
  

• src 存放项目源码

  • components 存放小组件
  • App.vue 整个vue的一个大组件
    

• static 存放第三方静态资源

  • .gitkeep作用:当这个目录为空也可以把这个目录提交到git代码仓库里
    

• babelrc babel的配置,因为有的浏览器不支持es6语法,所以利用babel把es6编译成es5
  

• .editorconfig 编辑器的配置 (推荐缩进为4 indent_size = 4)
  

• .eslintignore 忽略语法检查的目录文件
  

• .eslintrc.js esint的配置文件

module.exports = {
  //此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true, 
  //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
  parser: 'babel-eslint',
  //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    sourceType: 'module'
  },
  //此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  extends: 'standard',
  // required to lint *.vue files
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
  plugins: [
    'html'
  ],
  // add your custom rules here
  // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
  // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  //"error" -> 2 开启错误规则
  // 了解了上面这些，下面这些代码相信也看的明白了
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // js语句结尾必须使用分号
    'semi': ['off', 'always'],
    // 三等号
    'eqeqeq': 0,
    // 强制在注释中 // 或 /* 使用一致的空格
    'spaced-comment': 0,
    // 关键字后面使用一致的空格
    'keyword-spacing': 0,
    // 强制在 function的左括号之前使用一致的空格
    'space-before-function-paren': 0,
    // 引号类型
    "quotes": [0, "single"],
    // 禁止出现未使用过的变量
    // 'no-unused-vars': 0,
    // 要求或禁止末尾逗号
    'comma-dangle': 0
  }
}

• .gitignore 忽略里面的目录,不会提交
  

• .postcssrc.js 用到css前后处理器的配置

• index.html 入口文件,就是首页

• package-lock.json 是npm 5 做的一个优化，加快了npm 下载的速度。条件就是将依赖的详细信息，包括版本、下载地址等，都写在了里面。然后想要更新版本的话，就不能够去通过修改package 里面的版本依赖来实现了，只能通过npm install packageName@version 来实现。

• package.json 项目配置文件

{ 
 "name": "vue-manage", // 项目名称 
 "version": "1.0.0", // 版本  
 "description": "Reimbursement Manage", // 描述  
 "author": "LXG", // 作者  
 "private": true, //是否私人项目  
 "scripts": { 
  "dev": "node build/dev-server.js", // npm run dev 的 dev，使用node执行 build/dev-server.js 
  "start": "node build/dev-server.js", // npm run start 跑的是同样的命令 
  "build": "node build/build.js", // npm run build 跑的是 node build/build.js // 以下脚本为单元测试用到的脚本 
  // 以下脚本为单元测试用到的脚本 
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 
  "e2e": "node test/e2e/runner.js", 
  "test": "npm run unit && npm run e2e"
 }, 
 "dependencies": { // dependencies 设定的是项目里使用的依赖 版本前面的 "^" 表示可以安装该版本以上的版本
  "vue": "^2.2.6", 
  "vue-router": "^2.3.1", 
  "element-ui": "1.3.1", 
  "vue-datasource": "1.0.9", 
  "axios": "^0.15.3", 
  "vue-core-image-upload": "2.1.5", 
  "mockjs": "^1.0.1-beta3", 
  "babel-polyfill": "^6.23.0"
 }, 
 "devDependencies": { //devDependencies设定的是开发使用的依赖  
  "autoprefixer": "^6.7.2", // 是用于给css3属性自动加属性前缀的 
  "babel-core": "^6.22.1", // babel相关的都是用于处理es6语法的 
  "babel-loader": "^6.2.10", 
  "babel-plugin-transform-runtime": "^6.22.0", 
  "babel-preset-env": "^1.3.2", 
  "babel-preset-stage-2": "^6.22.0", 
  "babel-register": "^6.22.0", 
  "chalk": "^1.1.3", // chalk适用于格式化输出命令行信息的，比如run dev以后的start...  
  "connect-history-api-fallback": "^1.3.0", 
  "copy-webpack-plugin": "^4.0.1", 
  "css-loader": "^0.28.0", // 所有的*-loader都是 webpack的扩展，webpack是把各种资源理解为一个模块，css-loader就是读取css模块的加载器 
  "eslint": "^3.19.0", // eslint 相关是代码格式化检查工具，开启以后要严格遵照它规定的格式进行开发 (我一般把它关了，为了显示特意加上的) 
  "eventsource-polyfill": "^0.9.6", 
  "express": "^4.14.1", // express 用于启动 node http server的服务  
  "extract-text-webpack-plugin": "^2.0.0", 
  "file-loader": "^0.11.1", 
  "friendly-errors-webpack-plugin": "^1.1.3", 
  "html-webpack-plugin": "^2.28.0", // webpack 里载入和处理html的插件 
  "http-proxy-middleware": "^0.17.3", // node server 的中间件工具 
  "webpack-bundle-analyzer": "^2.2.1", 
  "cross-env": "^4.0.0", // 设定环境变量的工具，NODE_ENV变量跟它有关 
  "karma": "^1.4.1",  // karma相关的都是单元测试工具 
  "karma-coverage": "^1.1.1", 
  "karma-mocha": "^1.3.0", 
  "karma-phantomjs-launcher": "^1.0.2", 
  "karma-phantomjs-shim": "^1.4.0", 
  "karma-sinon-chai": "^1.3.1", 
  "karma-sourcemap-loader": "^0.3.7", 
  "karma-spec-reporter": "0.0.30", 
  "karma-webpack": "^2.0.2", 
  "lolex": "^1.5.2", 
  "mocha": "^3.2.0", 
  "chai": "^3.5.0", 
  "sinon": "^2.1.0", 
  "sinon-chai": "^2.8.0", 
  "inject-loader": "^3.0.0", 
  "babel-plugin-istanbul": "^4.1.1", 
  "phantomjs-prebuilt": "^2.1.14", 
  "chromedriver": "^2.27.2", 
  "cross-spawn": "^5.0.1", 
  "nightwatch": "^0.9.12", 
  "selenium-server": "^3.0.1", // 一个版本检查工具  
  "semver": "^5.3.0", // selljs是在node里跑shell命令的工具，比如‘rm -rf'  
  "shelljs": "^0.7.6", 
  "opn": "^4.0.2", // 跨平台的开启文件或者网页的工具 
  "optimize-css-assets-webpack-plugin": "^1.3.0", 
  "ora": "^1.2.0", // 命令行里自动运行的信息提示  
  "rimraf": "^2.6.0", // 跑shell命令 rm-rf 的工具  
  "url-loader": "^0.5.8", // 配合webpack的加载器  
  "vue-loader": "^11.3.4", // 配合webpack的加载器  
  "vue-style-loader": "^2.0.5", // 配合webpack的加载器  
  "vue-template-compiler": "^2.2.6", // vue-template-compiler，可能是配合离线版vue  
  "webpack": "^2.3.3", // webpack相关的用于，把图片，*.vue, *.js, 这些组合成最终的项目，webpack-dev用于跑测试服务器  
  "webpack-dev-middleware": "^1.10.0", 
  "webpack-hot-middleware": "^2.18.0", 
  "webpack-merge": "^4.1.0", 
  "babel-preset-es2015": "^6.22.0", 
  "function-bind": "^1.1.0", 
  "webpack-bundle-analyzer": "^2.2.1"  
 },  // 项目依赖的引擎版本  
 "engines": { 
  "node": ">= 4.0.0", 
  "npm": ">= 3.0.0"
 }, 
 "browserslist": [ 
  "> 1%", 
  "last 2 versions", 
  "not ie <= 8"
 ] 
}

• README.md 项目的说明文档，markdown 格式
  

饿了么 外卖APP

需求分析

• 对设计稿进行分析
  • 页面布局
  • 效果

  • 需求

    
    

准备

• 在 src 文件夹下新建一个 images 文件夹, 把需要用到的图片素材放到里面 (名字最好语义化,方便查找)
• 设计稿标注的尺寸应是实际尺寸的2倍, 所以应在 src/main.js 文件中配置

let w = $(window).width();
$("html").css({fontSize: w / 375 * 100 + "px"}); // 375表示设计稿宽度为 375px
$("body").css({fontSize: '0.12rem'});

$(window).resize(() => {
    let w = $(window).width();
    $("html").css({fontSize: w / 375 * 100 + "px"});
    $("body").css({fontSize: '0.12rem'});
});

// 开发中要换算成rem单位, 比如: 设计稿 width: 100px  实际: 100/2/100=0.5rem

注: 上述代码需要用到 zepto 组件, 否则会报错!!! 具体使用方法请参照 Vue 引入 zepto

图标字体制作

• Vue 引入 icon 图标

项目目录设计

在 src\components 文件夹中创建组件时,最好创建几个对应模块的文件夹, 用来存放组件

在 src\views 文件夹中存放开发页面, 需要路由配置

Zepto

• 文档
  • API 中文版
• 安装
  • npm install zepto --save
• 配置
  • Vue 引入 zepto

UI组件 - Mint UI

• 安装 (2.0版本)
  npm install mint-ui --save
• 配置
  • 官方文档
• 更多UI组件推荐
  • Vue UI 组件库

Vue-router (路由)

• 安装 (如果配置脚手架时已经安装了router, 请跳过此步)
  npm install vue-router --save
• src/router/index.js
• 配置
  • vue-router 路由和组件

Vuex

• 为什么要用Vuex?
  • 我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？嗯..，方法应该有。抛开怎么实现的问题，试想一下，当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂???那为何不把组件之间共享的数据给“拎”出来，在一定的规则下管理这些数据呢？ 这就是Vuex的基本思想了
• 安装
  npm install vuex --save
• 配置
  • src/store/index.js

// 导入变量
import Vue from 'vue'
import Vuex from 'vuex'

// 在模块化构建系统中，需在开头调用 Vue.use(Vuex)
Vue.use(Vuex);

// 原本直接export外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default
// export可以多个,但在导入时要加{}，export default则不需要
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

Less

• 简介
  • Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
• 安装
  npm install less less-loader --save-dev
• 配置
  • less 引用与配置

Axios 数据交互

• 安装
  npm install axios --save

---

mock（模拟后台数据）

• src/utils/mock.js

  
  

---

注: 该文章持续更新中...