怎么用vue開發app

這篇“怎么用vue開發app”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“怎么用vue開發app”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

undefined

前言

一個vue的demo

源碼說明

項目目錄說明

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

開發環境依賴模塊說明

webpack相關模塊

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相關模塊

gulp                                  
// 用來構建自動化工作流gulp-sftp                             
// 將代碼自動部署到服務器上del                                   
// 代碼部署成功后，刪除本地編譯的代碼

其他模塊

cross-env                             
// 解決跨平臺設置NODE_ENV的問題

生產模塊依賴說明

vue全家桶

vue                                   
// 構建用戶界面的vue-router                            
// 路由vuex                                  
// 組件狀態管理

頁面說明

/login                                
// 登錄，不需要登錄可以訪問/signout                              
// 退出登錄，需要登錄后才可以訪問/home                                 
// 個人中心，需要登錄后才可以訪問/                                     
// 首頁，不需要登錄可以訪問*                                     
// 強制跳轉到登錄頁面

運行程序

npm installnpm run dev
localhost:3000/app/

以上是“怎么用vue開發app”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！