Detailed explanation of examples of developing apps with vue

Preface

一个vue的demo

Source code description

Project directory description

.
|-- 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 命令创建.

Development environment dependency module description

webpack related modules

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

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

Others Module

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

Production module dependency description

vue family bucket

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

Page description

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

Run the program

npm installnpm run dev
localhost:3000/app/

The above is the detailed content of Detailed explanation of examples of developing apps with vue. For more information, please follow other related articles on the PHP Chinese website!