Vue2.0 web application developed by FamilyBucket (refer to Wuji APP)
github link
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:
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"} ]]] }
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对象
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 pageWeChat 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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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

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

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

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.

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

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
