Table of Contents
github link
Wuji front-end construction process
Local environment preparation
Dependency package installation
Build
About source Mapping (only supports chrome browser)
hot reload (supports real-time refresh of the build)
Custom theme
autoprefixer (style prefix compatibility processing), configure in vue-loader option
Static resource gulp processing (/public)
front-end page
Home Web Front-end JS Tutorial Vue2.0 web application developed by FamilyBucket (refer to Wuji APP)

Vue2.0 web application developed by FamilyBucket (refer to Wuji APP)

Jun 26, 2017 pm 03:13 PM
application develop Web page

Learn from Wuji APP, use vue2.0+vue-router+vuex as the main technology stack, elementui as the UI framework, and multi-module spa mode , webpack2.0 is responsible for module packaging, and gulp is responsible for handling static resource packaging and compression. Welcome to reward stars! ! !

Wuji front-end construction process

Local environment preparation

  • Install node: * ("node": ">=6.0", corresponding to needs Upgrade node-sass, otherwise you can’t use it! )

  • Configure webpack: npm install -g webpack (sudo permission)

  • windows configuration cnpm:

npm install -g cnpm --registry=https:
Copy after login

Dependency package installation

  • Enter the wuji directory

  • Execute cnpm install

Build

  • Development environment: execute node server.js (or npm run serve)

  • Hot reload node server.js hot-reload (or npm run hot)

  • mock data npm run mock

  • Production environment: Execute npm run build

About source Mapping (only supports chrome browser)

  • source Mapping is a code mapping tracking, which is convenient for local development debug compressed file

  • Make sure chrome has source Mapping turned on (the default is turned on)

  • Open Develop Tools -》Sources to see the source File

hot reload (supports real-time refresh of the build)

  • Environment preparation:

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

  • Execute node server.js hot-reload (or npm run hot)

  • Static resource access eg: http://localhost:8088/Static/...

Custom theme

  • Enter wuji directory

  • cnpm install element-theme element-theme-default --save-dev (the dependency package has been installed during installation)

  • Execute node_modules/.bin /et -i

  • Generate element-variables.css

  • Execute node_modules/.bin/et

  • will create ./theme

  • When changing the theme, the corresponding modifications to .babelrc will be as follows:

    {      "plugins": [["component", [
        {          "libraryName": "element-ui",          "styleLibraryName": "~theme"}
      ]]]
    }
Copy after login

autoprefixer (style prefix compatibility processing), configure in vue-loader option

  • Generation rules:

  • Automatically add browser Style prefix, compatible with all browsers (for shares greater than 1% of global statistics, firefox 15)

Static resource gulp processing (/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对象
Copy after login
  • Enter the wuji/assets/public directory

  • cnpm install

  • Execute gulp (compressed js, pictures)

  • Execute gulp sprite (generate sprite image) [Put the image that needs to be synthesized into sprite into a new folder in images/sprite/, and run, You can see the corresponding sprite.png, sprite.scss]

front-end page

index.html => My diary List
passing.html => Passing list
account.html => Login registration page

WeChat mini program actual github:

The above is the detailed content of Vue2.0 web application developed by FamilyBucket (refer to Wuji APP). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Four recommended AI-assisted programming tools Four recommended AI-assisted programming tools Apr 22, 2024 pm 05:34 PM

This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git

How to Undo Delete from Home Screen in iPhone How to Undo Delete from Home Screen in iPhone Apr 17, 2024 pm 07:37 PM

Deleted something important from your home screen and trying to get it back? You can put app icons back on the screen in a variety of ways. We have discussed all the methods you can follow and put the app icon back on the home screen. How to Undo Remove from Home Screen in iPhone As we mentioned before, there are several ways to restore this change on iPhone. Method 1 – Replace App Icon in App Library You can place an app icon on your home screen directly from the App Library. Step 1 – Swipe sideways to find all apps in the app library. Step 2 – Find the app icon you deleted earlier. Step 3 – Simply drag the app icon from the main library to the correct location on the home screen. This is the application diagram

The role and practical application of arrow symbols in PHP The role and practical application of arrow symbols in PHP Mar 22, 2024 am 11:30 AM

The role and practical application of arrow symbols in PHP In PHP, the arrow symbol (->) is usually used to access the properties and methods of objects. Objects are one of the basic concepts of object-oriented programming (OOP) in PHP. In actual development, arrow symbols play an important role in operating objects. This article will introduce the role and practical application of arrow symbols, and provide specific code examples to help readers better understand. 1. The role of the arrow symbol to access the properties of an object. The arrow symbol can be used to access the properties of an object. When we instantiate a pair

From beginner to proficient: Explore various application scenarios of Linux tee command From beginner to proficient: Explore various application scenarios of Linux tee command Mar 20, 2024 am 10:00 AM

The Linuxtee command is a very useful command line tool that can write output to a file or send output to another command without affecting existing output. In this article, we will explore in depth the various application scenarios of the Linuxtee command, from entry to proficiency. 1. Basic usage First, let’s take a look at the basic usage of the tee command. The syntax of tee command is as follows: tee[OPTION]...[FILE]...This command will read data from standard input and save the data to

Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent Apr 07, 2024 am 09:10 AM

On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A

How to open php on the web page How to open php on the web page Mar 22, 2024 pm 03:20 PM

Executing PHP code in a web page requires ensuring that the web server supports PHP and is properly configured. PHP can be opened in three ways: * **Server environment:** Place the PHP file in the server root directory and access it through the browser. * **Integrated Development Environment: **Place PHP files in the specified web root directory and access them through the browser. * **Remote Server:** Access PHP files hosted on a remote server via the URL address provided by the server.

Learn how to develop mobile applications using Go language Learn how to develop mobile applications using Go language Mar 28, 2024 pm 10:00 PM

Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head

Explore the advantages and application scenarios of Go language Explore the advantages and application scenarios of Go language Mar 27, 2024 pm 03:48 PM

The Go language is an open source programming language developed by Google and first released in 2007. It is designed to be a simple, easy-to-learn, efficient, and highly concurrency language, and is favored by more and more developers. This article will explore the advantages of Go language, introduce some application scenarios suitable for Go language, and give specific code examples. Advantages: Strong concurrency: Go language has built-in support for lightweight threads-goroutine, which can easily implement concurrent programming. Goroutin can be started by using the go keyword

See all articles