0

0

Vue2.0 全家桶开发的网页应用(参照吾记APP)

巴扎黑

巴扎黑

发布时间:2017-06-26 15:13:43

|

2097人浏览过

|

来源于php中文网

原创

github链接

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

吾记前端构建流程

本地环境准备

  • 安装node: *  ("node": ">=6.0",对应需要升级node-sass,不然使用不了!)

  • 配置webpack: npm install -g webpack(sudo权限)

  • windows配置cnpm:

    立即学习前端免费学习笔记(深入)”;

npm install -g cnpm --registry=https:

依赖包安装

  • 进入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 浏览器)

  • source Mapping就是一个代码映射跟踪,方便本地开发时debug压缩文件

  • 确保chrome已打开source Mapping (默认是打开的)

  • 打开Develop Tools -》 Sources 即可看到源文件

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

  • 环境准备:

  • cnpm install express webpack-dev-middleware webpack-hot-middleware

    AIPAI
    AIPAI

    AI视频创作智能体

    下载
  • 执行node server.js hot-reload(或 npm run hot)

  • 静态资源访问eg:http://localhost:8088/Static/...

自定义主题

  • 进入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'), //压缩jsrename = 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 => 登录注册页面微信小程序实战github:

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

8

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

8

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

6

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

17

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

18

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
玩转 Vue3.0 新特性
玩转 Vue3.0 新特性

共19课时 | 1.8万人学习

Vue3.0 极速入门教程
Vue3.0 极速入门教程

共55课时 | 5.6万人学习

VUE2.0+VUE3.0从入门到精通(完整版)
VUE2.0+VUE3.0从入门到精通(完整版)

共142课时 | 25.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号