Ausführliche Erläuterung von Beispielen für die Entwicklung von Apps mit Vue

Vorwort

一个vue的demo

Quellcodebeschreibung

Projektverzeichnisbeschreibung

.
|-- config                           
// 项目开发环境配置|   |-- index.js                     
// 项目打包部署配置|-- src                              
// 源码目录|   |-- components                   
// 公共组件|       |-- header.vue               
// 页面头部公共组件|       |-- footer.vue               
// 页尾头部公共组件|       |-- index.js                 
// 加载各种公共组件|   |-- config                       
// 路由配置和程序的基本信息配置|       |-- routes.js                
// 配置页面路由|   |-- css                          
// 各种css文件|       |-- common.css               
// 全局通用css文件|   |-- iconfont                     
// 各种字体图标|   |-- images                       
// 公共图片|   |-- less                         
// 各种less文件|       |-- common.less              
// 全局通用less文件|   |-- pages                        
// 页面组件|       |-- home                     
// 个人中心|       |-- index                    
// 网站首页|       |-- login                    
// 登录|       |-- signout                  
// 退出|   |-- store                        
// vuex的状态管理|       |-- index.js                 
// 加载各种store模块|       |-- user.js                  
// 用户store|   |-- template                     
// 各种html文件|       |-- index.html               
// 程序入口html文件|   |-- util                         
// 公共的js方法，vue的mixin混合|   |-- app.vue                      
// 页面入口文件|   |-- main.js                      
// 程序入口文件，加载各种公共组件|-- .babelrc                         
// ES6语法编译配置|-- gulpfile.js                      
// 启动，打包，部署，自动化构建|-- webpack.config.js                
// 程序打包配置|-- server.js                        
// 代理服务器配置|-- README.md                        
// 项目说明|-- package.json                     
// 配置项目相关信息，通过执行 npm init 命令创建.

Beschreibung des Entwicklungsumgebungsabhängigkeitsmoduls

Webpack-bezogene Module

webpack                               
// 用来构建打包程序webpack-dev-server                    
// 开发环境下，设置代理服务器html-webpack-plugin                   
// html 文件编译url-loader                            
// 图片  转化成base64格式file-loader                           
// 字体  将字体文件打包css-loader                            
// css  生成less                                  
// css  预处理器lessless-loader                           
// css  预处理器less的webpack插件style-loader                          
// css  插入到style标签autoprefixer-loader                   
// css  浏览器兼容性问题处理babel-core                            
// ES6  代码转换器babel-loader                          
// ES6  代码转换器，webpack插件babel-plugin-transform-object-assign  
// ES6  Object.assign方法做兼容处理babel-preset-es2015                   
// ES6  代码编译成现在浏览器支持的ES5babel-preset-stage-0                  
// ES6  ES7要使用的语法阶段vue-loader                            
// vue  组件编译babel-helper-vue-jsx-merge-props      
// vue  jsx语法编译babel-plugin-syntax-jsx               
// vue  jsx语法编译babel-plugin-transform-vue-jsx        
// vue  jsx语法编译

gulp-bezogene Module

gulp                                  
// 用来构建自动化工作流gulp-sftp                             
// 将代码自动部署到服务器上del                                   
// 代码部署成功后，删除本地编译的代码

Andere Module

cross-env                             
// 解决跨平台设置NODE_ENV的问题

Beschreibung der Abhängigkeiten des Produktionsmoduls

Vue-Familien-Bucket

vue                                   
// 构建用户界面的vue-router                            
// 路由vuex                                  
// 组件状态管理

Seitenbeschreibung

/login                                
// 登录，不需要登录可以访问/signout                              
// 退出登录，需要登录后才可以访问/home                                 
// 个人中心，需要登录后才可以访问/                                     
// 首页，不需要登录可以访问*                                     
// 强制跳转到登录页面

Führen Sie das Programm aus

npm installnpm run dev
localhost:3000/app/

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Entwicklung von Apps mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!