用vue開發乙個app（3，三天的成果）

乙個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混合
|   |-- 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 預處理器less less-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 **編譯成現在瀏覽器支援的es5 babel-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 install

npm run dev

用vue開發乙個app（3，三天的成果）

用 Vue 做乙個簡單的購物app

關於用MUI開發APP的乙個小總結

用PHP編寫乙個APP的API

用vue開發乙個app（3，三天的成果）

用 Vue 做乙個簡單的購物app

關於用MUI開發APP的乙個小總結

用PHP編寫乙個APP的API

相關推薦