Vue 2.0 开发流程 (全)-阿里云开发者社区

开发者社区> 小贤笔记> 正文

Vue 2.0 开发流程 (全)

简介: 该文章用 vue2.0 全家桶详细的介绍了一个项目的整个流程 新手可以跟着做一遍 有不对的地方请指出, 谢谢 本项目以 饿了么APP 为例 更多技术文章请关注微博: 小贤笔记-简书 推荐阅读 Vue API 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)

  • etup 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

图标字体制作

项目目录设计

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

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

Zepto

UI组件 - Mint 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



注: 该笔记持续更新中, 请实时关注, 有不懂的请留言, 谢谢

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10081 0
webpack4搭建Vue开发环境笔记~~持续更新
项目git地址 一、node知识 __dirname: 获取当前文件所在路径,等同于path.dirname(__filename) console.
1168 0
Vue开发环境搭建全过程,一步一个坑
Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样 开发环境: Homebrew ( Mac的包管理神器 ) → Node.
1650 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13887 0
RapidJavaEE 项目 开发流程说明
开发流程简述:进入pages/Gridmetainfo/ 模块进行表生成元数据定义后,生成代码到项目下,然后进行以下步骤1.修改自定义combo的选单,如为系统字典,无须修改2.修改表格中的自定义字典的渲染器,如为系统字典,无须修改3.
729 0
vue-cli 脚手架开发环境搭建
ps:node和git的安装自己到官网查看
1553 0
+关注
小贤笔记
越努力, 越幸运
30
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载