V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
bili
V2EX  ›  分享创造

Vue2.0 全家桶开发的网页应用

  •  
  •   bili · 2017-08-28 14:27:34 +08:00 · 2818 次点击
    这是一个创建于 2404 天前的主题,其中的信息可能已经有所发展或是发生改变。

    图片描述

    ##github 链接

    使用 vue2.0+vue-router+vuex 为主要技术栈,elementui 做为 ui 框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp 负责处理静态资源打包、压缩,欢迎打赏 star !!!

    前端构建流程

    本地环境准备

    • 安装 node: * https://nodejs.org/en/download/ ("node": ">=6.0",对应需要升级 node-sass,不然使用不了!)
    • 配置 webpack:npm install -g webpack(sudo 权限)
    • windows 配置 cnpm:
        npm install -g cnpm --registry=https://registry.npm.taobao.org
        因为 npm 的默认仓库在国外,下载很慢,国内淘宝搞了个 CNPM,每 10 分钟同步一次,完全够用了
    

    依赖包安装

    • 进入 wuji 目录
    • 执行 cnpm install

    构建

    • 开发环境:执行 node server.js (或 npm run serve )
    • 热加载 node server.js hot-reload (或 npm run hot )
    • mock 数据 npm run mock
    • 生产环境:执行 npm run build

    关于 source Mapping (仅支持 chrome 浏览器)

    hot reload (支持构建的实时刷新)

    • 环境准备:
    • cnpm install express webpack-dev-middleware webpack-hot-middleware
    • 执行 node server.js hot-reload (或 npm run hot )
    • 静态资源访问 eg: http://localhost:8088/Static/dist/js/jobDetail.js

    自定义主题

    • 进入 wuji 目录
    • cnpm install element-theme element-theme-default --save-dev (依赖包安装时已安装)
    • 执行 node_modules/.bin/et -i
    • 生成 element-variables.css
    • 执行 node_modules/.bin/et
    • 则会创建./theme
    • 更改主题时,对应.babelrc 的修改会如下:
    	{
    	  "plugins": [["component", [
    	    {
    	      "libraryName": "element-ui",
    	      "styleLibraryName": "~theme"
    	    }
    	  ]]]
    	}
    

    autoprefixer (样式前缀兼容性处理),在 vue-loader option 进行配置

    • 生成规则:
    • 自动加上浏览器样式前缀,兼容各浏览器(针对份额大于全球统计数据的 1%,firefox 15 )

    静态资源 gulp 处理(/public )

    var gulp = require('gulp'),
        uglify = require('gulp-uglify'), //压缩 js
        rename = require("gulp-rename"), //文件重命名
        changed = require('gulp-changed'), //监听文件是否修改
        imagemin = require('gulp-imagemin'), // 图片压缩
        pngquant = require('imagemin-pngquant'), // 深度压缩
        runSequence = require('run-sequence'),     // 同步运行任务插件
        del = require('del'), //删除文件
        spritesmith = require('gulp.spritesmith'), //合成雪碧图
        find = require("gulp-find-glob"); //得到 glob 对象
    
    • 进入 wuji/assets/public 目录
    • cnpm install
    • 执行 gulp (压缩 js、图片)
    • 执行 gulp sprite (生成雪碧图)[将需要合成雪碧的图片放入 images/sprite/中某个新建的文件夹,运行,则可以在该文件夹下看到对应 sprite.png 、sprite.scss]

    前端页面

    index.html => 我的日记列表
    passing.html => 过客列表
    account.html => 登录注册页面

    第 1 条附言  ·  2017-08-30 14:14:21 +08:00
    2 条回复    2017-08-30 14:03:40 +08:00
    justudy
        1
    justudy  
       2017-08-29 09:48:25 +08:00
    要是自适应的就更棒了
    ZiLong
        2
    ZiLong  
       2017-08-30 14:03:40 +08:00
    github 连接最好空一行,找了半天,当然,我可能眼睛坏了。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1307 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:31 · PVG 07:31 · LAX 16:31 · JFK 19:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.