Vue 是现阶段比较主流的前端框架之一, 具有轻量&高效的特点, 而且容易入门. 该文章用 vue2.0 全家桶详细的介绍了一个项目 (饿了么APP) 的整个流程和开发所用到的工具以及可能踩到的坑
更多技术文章请关注
推荐阅读
课程介绍
实战流程
线上生产环境
技术分析
课程安排
学习目标
学习内容
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的界面
项目文件介绍
-
buildwebpack配置相关
-
configwebpack配置相关
-
node_modulesnpm install安装的依赖代码库
-
src存放项目源码-
components存放小组件 -
App.vue整个vue的一个大组件
-
-
static存放第三方静态资源-
.gitkeep作用:当这个目录为空也可以把这个目录提交到git代码仓库里
-
-
babelrcbabel的配置,因为有的浏览器不支持es6语法,所以利用babel把es6编译成es5
-
.editorconfig编辑器的配置 (推荐缩进为4indent_size = 4)
-
.eslintignore忽略语法检查的目录文件
.eslintrc.jsesint的配置文件
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
图标字体制作
项目目录设计
在 src\components 文件夹中创建组件时,最好创建几个对应模块的文件夹, 用来存放组件
在 src\views 文件夹中存放开发页面, 需要路由配置
Zepto
- 文档
- 安装
npm install zepto --save
- 配置
UI组件 - Mint UI
- 安装 (2.0版本)
npm install mint-ui --save - 配置
- 更多UI组件推荐
Vue-router (路由)
- 安装 (如果配置脚手架时已经安装了router, 请跳过此步)
npm install vue-router --save - src/router/index.js
- 配置
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 - 配置
Axios 数据交互
- 安装
npm install axios --save
mock（模拟后台数据）
-
src/utils/mock.js
注: 该文章持续更新中...
