摘要:多個單頁應用整合的工程的開發環境工程的目錄設置本文內容的工程的目錄設計基于的多個單頁應用的開發環境搭建目錄一開發環境使用二需求分析三開發思路四目錄設計及思路五開發環境開發六整個開發環境的目錄注釋一開發環境使用多終端頁面路徑設置
vue-multi-device-single-page
多個單頁應用整合的vue工程的開發環境
vue工程的目錄設置
本文內容:
vue + vuex + vue-resuorce + vue-route 的工程 的目錄設計
基于 vue-cli 的 多個vue單頁應用的開發環境 搭建
目錄:一、開發環境使用 多終端(頁面)路徑設置一、開發環境使用
二、需求分析
三、開發思路
四、src目錄設計及思路
五、開發環境開發
六、整個開發環境的目錄注釋
在src/device/目錄下添加終端(頁面)路徑,如:src/device/pc/
在新添加的文件下加入這個終端(頁面)使用的打包模板,命名為index.html,如:src/device/pc/index.html
在新添加的文件下加入這個終端(頁面)使用的入口文件,命名為index.js,如:src/device/pc/index.js
build 打包打生產環境的包,會自動把不同終端的文件按終端名稱分開
dev 開發npm run build "device"
device : 接受的參數,在 /build/device-conf.js里面有限制
示例: npm run build pc 打一個pc端的包
npm run build-all
打所有終端的包
npm run dev
開始進行調試,基于vue-cli的,所以基本是vue-cli的
自動打開一個網頁,從這里選擇要調試的終端
開始調試
二、需求分析: 需求:要開發pc端 + 移動端 + app混合開發的 頁面,每個頁面都是單頁應用
為了節約開發成本,這幾個端要共用一些組件,和 方法
打包要方便,調試要方便
vue應用
幾個問題:vue-cli提供了非常好的開發環境,我能否在這個基礎上整一整,解決掉需求 2 和 3 呢?
vue + vuex + vue-resuorce +vue-route 的工程目錄應該怎么設計呢?
這個工程是啥面對這樣的需求,我的理解是把多個單頁應用融合到一個工程里面,下面是我的解決辦法
三、開發思路github https://github.com/vincentmrlau/vue-multi-device-single-page,歡迎交流
多端(也可以是多頁)的單頁應用的vue工程的開發環境,本質上是多個單頁應用
基于vue,整合了vuex vue-resuorece vue-router 的開發目錄設計
整個基于vue-cli生成的目錄進行修改,除了test(正在研究)外的功能均可使用
1、設置公用組件的目錄
2、抽離api,分為公用的api和屬于各個頁面自己的api
3、每個單頁應用vuex管理狀態
4、可能會被多人同時編輯,如何盡量減少merge
5、針對這樣的需求的src下面的目錄應該怎么設計(第三部分有寫)
6、針對需求配置開發環境(從第 部門開始是關于這個開發環境的)
四、src目錄設計及思路概況兩圖流介紹src的目錄設置及其作用
介紹 界面-模板html-組件-store-接口 的關系
pc主頁示意圖
分析圖(怎一個亂字了得)
目錄設置及其作用├─src # 源文件目錄 │ │ config.js │ │ │ ├─api # 多端共用的 api │ │ device-root.js │ │ middleware.js │ │ │ ├─assets # 多端共用的 資源 │ │ logo.png │ │ │ ├─components # 多端共用的 組件 │ │ RootCommonComponent.vue │ │ │ └─device # 設備入口 │ ├─app # 混合開發的放這里了,也可以分 ios 和 安卓 │ │ index.html # app專用的html模板,打包好的東西會自動注入 │ │ index.js # app的入口文件 │ │ │ ├─mobile # 這里放移動端的頁面 ,下面的 index文件作用類似其他端 │ │ index.html │ │ index.js │ │ │ └─pc # 這個目錄下的都是pc端使用的,當然其他端要用也是可以的,哈哈 │ │ App.vue # 入口組件 │ │ index.html # 模板文件 │ │ index.js # 入口文件 │ │ │ ├─api # 分離開接口 │ │ home.js # home這個模塊用的接口 │ │ middleware.js # 一些公用的中間件 │ │ │ ├─assets # 資源 │ ├─components # 組件 │ │ ├─commonComponents # 公共組件 │ │ │ Header.vue │ │ │ │ │ ├─Home # home這個模塊用的組件 │ │ │ Body.vue │ │ │ Index.vue │ │ │ │ │ └─Page404 # 404這個模塊用的組件 │ │ Index.vue │ │ │ ├─router # 路由 │ │ index.js │ │ │ ├─store # vuex 的store │ │ │ index.js # 根級別的store + 模塊組裝 │ │ │ │ │ └─modules # store 模塊 │ │ home.js # home這個模塊使用的store │ │ │ └─types # 放類型名稱 │ home.js # home這個模塊使用的 types │ root.js # 公用的types界面-模板-組件 的關系
界面:最后展現在用戶面前的
模板:用來注入打包的html文件
組件:編寫的vue組件
他們的關系如圖:
組件-store(vuex)-api(vue-resuorce) 的關系
組件使用store:
通過輔助函數(mapGetters,mapActions等)把store的屬性映射到組件中使用
組件通過action來提交mutation修改狀態
也可以通過$store來使用
組件使用api:
組件通過store的action使用api
store內部安排
由mutation來修改狀態
由action來提交mutation
由store的action來調用api
api里面分離開中間件,按需調用
看圖看圖 ↓↓↓
五、開發環境開發新增加:build/device-conf.js 用來出路多終端(頁面)開發相關問題在vue-cli v2.8.2生產的開發環境的基礎上進行修改
var chalk = require("chalk") var glob = require("glob") // 獲取deviceList var deviceList = [] var deviceSrcArray = glob.sync("./src/device/*") for(var x in deviceSrcArray){ deviceList.push(deviceSrcArray[x].split("/")[3]) } // 檢測是否在輸入的參數是否在允許的list中 var checkDevice = function () { var device = process.env.DEVICE_ENV var result = false // 檢查deviceList是否有重復 var hash = {} var repeatList = [] for(var l = 0;l < deviceList.length; l++){ if(hash[deviceList[l]]){ repeatList.push(deviceList[l]) } hash[deviceList[l]] = true } if(repeatList.length > 0){ console.log(chalk.bgRed("deviceList 有重復:")) console.log(chalk.bgRed(repeatList.toString())) return result } for(var i in deviceList){ if(device === deviceList[i]){ result = device break } } if(result === false){ console.log(chalk.bgRed("參數錯誤,允許的參數為:")) console.log(chalk.bgRed(deviceList.toString())) } return result } exports.deviceList = deviceList exports.checkDevice = checkDevice // 其他依賴 exports.polyfills = ["babel-polyfill"]添加:/build/build-all.js
內部根據 deviceList 產生運行build.js子進程,完成打包
var execFileSync = require("child_process").execFileSync; var path = require("path") var deviceList = require("./device-conf").deviceList || [] var buildFile = path.join(__dirname, "build.js") for( var x in deviceList){ console.log("building :",deviceList[x]) execFileSync( "node", [buildFile, deviceList[x]], { }) }修改/build/build.js
添加設置環境變量并檢查參數代碼
var chalk = require("chalk") // 設置process.env.DEVICE_ENV參數 // 沒有則返回錯誤 var device = process.argv[2] var checkDevice = require("./device-conf").checkDevice if(device){ process.env.DEVICE_ENV = device if(!checkDevice()){ return false } }else { console.log(chalk.bgRed(" 錯誤:缺少參數,詳情請看readme.md ")) return false }修改/build/build.js
添加一個路由(在使用中間件connect-history-api-fallback之前添加),把可調試的入口展示出來
// 寫個小路由,打開瀏覽器的時候可以選一個開發路徑 var deviceList = require("./device-conf").deviceList || [] var sentHref = "" for(var x in deviceList){ sentHref += "點我調試終端:"+ deviceList[x].toString() +"
" } app.get("/devDeviceList", (req, res, next) => { res.send(sentHref) })
修改打開的默認連接
opn(uri + "/devDeviceList")修改/config/index.js 主要修改模板入口,打包出口等
// see http://vuejs-templates.github.io/webpack for documentation. var path = require("path") var device = process.env.DEVICE_ENV || "undefined" // 入口模板路徑 var htmlTemplate = "./src/device/" + device + "/index.html" module.exports = { build: { env: require("./prod.env"), // 加入html入口 htmlTemplate: htmlTemplate, index: path.resolve(__dirname, "../dist" , device , "index.html"), assetsRoot: path.resolve(__dirname, "../dist" , device), assetsSubDirectory: "static", // 這里的路徑改成相對路徑 // 原來是: assetsPublicPath: "/", assetsPublicPath: "", productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ["js", "css"], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, dev: { env: require("./dev.env"), port: 8080, autoOpenBrowser: true, assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false } }修改 /build/webpack.dev.conf.js
主要修改了入口配置,出口配置,以及模板文件配置
// 獲取device var device = process.env.DEVICE_ENV var utils = require("./utils") var webpack = require("webpack") var config = require("../config") var merge = require("webpack-merge") var baseWebpackConfig = require("./webpack.base.conf") var HtmlWebpackPlugin = require("html-webpack-plugin") var FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin") // 設置設備相關信息引入 var deviceList = require("./device-conf").deviceList // 其他依賴 var extraPolyfill = require("./device-conf").polyfills || [] // 設置入口 var entry = {} // 設置html插件模板入口和依賴 var htmlPluginConf = [] for(var x in deviceList){ // 設置 入口 entry[deviceList[x]] = extraPolyfill.concat( ["./build/dev-client"], "./src/device/" + deviceList[x] + "/index.js" ) var _htmlPlugin = new HtmlWebpackPlugin({ filename: deviceList[x]+"/index.html", template: "./src/device/" + deviceList[x] + "/index.html", chunks: [deviceList[x]] }) htmlPluginConf.push(_htmlPlugin) } // add hot-reload related code to entry chunks // 把熱重載所需的代碼也打包進去 // Object.keys(baseWebpackConfig.entry).forEach(function (name) { // baseWebpackConfig.entry[name] = ["./build/dev-client"].concat(baseWebpackConfig.entry[name]) // }) // 刪除的entry和output try { delete baseWebpackConfig.entry }catch (e){ console.log(e) } try{ delete baseWebpackConfig.output }catch (e){ console.log(e) } module.exports = merge(baseWebpackConfig, { // 設置入口 entry: entry, // 設置出口 output: { path: "/", filename: "[name].js", publicPath: config.dev.assetsPublicPath }, module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // cheap-module-eval-source-map is faster for development devtool: "#cheap-module-eval-source-map", plugins: [ new webpack.DefinePlugin({ "process.env": config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin // new HtmlWebpackPlugin({ // filename: "index.html", // template: config.dev.htmlTemplate, // inject: true // }), new FriendlyErrorsPlugin() ].concat(htmlPluginConf) })修改 /build/webpack.prod.conf.js
主要修改了入口配置,出口配置,以及模板文件配置
var path = require("path") var utils = require("./utils") var webpack = require("webpack") var config = require("../config") var merge = require("webpack-merge") var baseWebpackConfig = require("./webpack.base.conf") var CopyWebpackPlugin = require("copy-webpack-plugin") var HtmlWebpackPlugin = require("html-webpack-plugin") var ExtractTextPlugin = require("extract-text-webpack-plugin") var OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin") var env = process.env.NODE_ENV === "testing" ? require("../config/test.env") : config.build.env // 設置device相關變量 var device = process.env.DEVICE_ENV //設置入口 var extraPolyFill = require("./device-conf").polyfills ||[] var entry = { index: extraPolyFill.concat("./src/device/" + device + "/index.js") } console.log(config.build.htmlTemplate) var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, // 寫入prod的入口 entry: entry, devtool: config.build.productionSourceMap ? "#source-map" : false, output: { path: config.build.assetsRoot, filename: utils.assetsPath("js/[name].[chunkhash].js"), chunkFilename: utils.assetsPath("js/[id].[chunkhash].js") }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ "process.env": env }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }), // extract css into its own file new ExtractTextPlugin({ filename: utils.assetsPath("css/[name].[contenthash].css") }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // generate dist pc.html with correct asset hash for caching. // you can customize output by editing /pc.html // see https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === "testing" ? "index.html" : config.build.index, // template: "index.html", template: config.build.htmlTemplate, inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: "dependency" }), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, "../node_modules") ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: "manifest", chunks: ["vendor"] }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, "../static"), to: config.build.assetsSubDirectory, ignore: [".*"] } ]) ] }) if (config.build.productionGzip) { var CompressionWebpackPlugin = require("compression-webpack-plugin") webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: new RegExp( ".(" + config.build.productionGzipExtensions.join("|") + ")$" ), threshold: 10240, minRatio: 0.8 }) ) } if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin()) } module.exports = webpackConfig六、整個開發環境的目錄注釋
│ .babelrc │ .editorconfig │ .eslintignore │ .eslintrc.js │ .gitignore │ .postcssrc.js │ index.html │ npm-debug.log │ package.json │ README.md │ tree.txt │ ├─build # 這里是打包工具相關的 │ build-all.js # 通過打包所有端的代碼 │ build.js # 這里設定進程的環境變量 │ check-versions.js │ dev-client.js │ dev-server.js # 這里也需要對進程的環境變量進行設定 │ device-conf.js # 這里面有關于多端開發、打包的相關設定 │ utils.js │ vue-loader.conf.js │ webpack.base.conf.js # 修改了入口、出口等 │ webpack.dev.conf.js # 修改了入口、出口等 │ webpack.prod.conf.js # 修改了入口出口等 │ webpack.test.conf.js # 測試相關還未完善 │ ├─config │ dev.env.js │ index.js # 打包的入口和出口 │ prod.env.js │ test.env.js │ ├─dist # 最后打包的目錄 分端儲存 │ ├─app │ │ │ index.html │ │ │ │ │ └─static │ │ └─js │ │ index.0142f89e3523b3b0d16b.js │ │ index.0142f89e3523b3b0d16b.js.map │ │ manifest.57f6691c595e842abc95.js │ │ manifest.57f6691c595e842abc95.js.map │ │ vendor.cce790f63359fc27fa7d.js │ │ vendor.cce790f63359fc27fa7d.js.map │ │ │ ├─mobile │ │ │ index.html │ │ │ │ │ └─static │ │ └─js │ │ index.0142f89e3523b3b0d16b.js │ │ index.0142f89e3523b3b0d16b.js.map │ │ manifest.57f6691c595e842abc95.js │ │ manifest.57f6691c595e842abc95.js.map │ │ vendor.cce790f63359fc27fa7d.js │ │ vendor.cce790f63359fc27fa7d.js.map │ │ │ └─pc │ │ index.html │ │ │ └─static │ ├─css │ │ index.1e809171f3a961de951e3c8e6644435f.css │ │ index.1e809171f3a961de951e3c8e6644435f.css.map │ │ │ └─js │ 0.f3e74a76d92b3f6ca5ec.js │ 0.f3e74a76d92b3f6ca5ec.js.map │ 1.fb471d3425df8c16ac54.js │ 1.fb471d3425df8c16ac54.js.map │ index.a2ba631673923f812cf1.js │ index.a2ba631673923f812cf1.js.map │ manifest.ab6461111db19541d04b.js │ manifest.ab6461111db19541d04b.js.map │ vendor.aeee805b1efff3748018.js │ vendor.aeee805b1efff3748018.js.map │ ├─images # 這個放點文檔寫文檔用的圖片 ├─sever # 這里寫點服務端程序,用于測試等 │ prod-view-server.js │ ├─src # 源文件目錄 │ │ config.js │ │ │ ├─api # 多端共用的 api │ │ device-root.js │ │ middleware.js │ │ │ ├─assets # 多端共用的 資源 │ │ logo.png │ │ │ ├─components # 多端共用的 組件 │ │ RootCommonComponent.vue │ │ │ └─device # 設備入口 │ ├─app # 混合開發的放這里了,也可以分 ios 和 安卓 │ │ index.html # app專用的html模板,打包好的東西會自動注入 │ │ index.js # app的入口文件 │ │ │ ├─mobile # 這里放移動端的頁面 ,下面的 index文件作用類似其他端 │ │ index.html │ │ index.js │ │ │ └─pc # 這個目錄下的都是pc端使用的,當然其他端要用也是可以的,哈哈 │ │ App.vue # 入口組件 │ │ index.html # 模板文件 │ │ index.js # 入口文件 │ │ │ ├─api # 分離開接口 │ │ home.js # home這個模塊用的接口 │ │ middleware.js # 一些公用的中間件 │ │ │ ├─assets # 資源 │ ├─components # 組件 │ │ ├─commonComponents # 公共組件 │ │ │ Header.vue │ │ │ │ │ ├─Home # home這個模塊用的組件 │ │ │ Body.vue │ │ │ Index.vue │ │ │ │ │ └─Page404 # 404這個模塊用的組件 │ │ Index.vue │ │ │ ├─router # 路由 │ │ index.js │ │ │ ├─store # vuex 的store │ │ │ index.js # 根級別的store + 模塊組裝 │ │ │ │ │ └─modules # store 模塊 │ │ home.js # home這個模塊使用的store │ │ │ └─types # 放類型名稱 │ home.js # home這個模塊使用的 types │ root.js # 公用的types │ ├─static │ .gitkeep │ └─test # 測試相關 TODO
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/83170.html
摘要:適用于主要入口頁面生成多頁,子頁面和次要頁面使用單頁形式的項目。文件用來存放固定的數據,而文件可更加自由的處理并返回數據。 VUE2的單頁應用框架有人分享了,多頁應用框架也有人分享了,這里分享一個單頁+多頁的混合應用框架吧,node.js寫了一個簡單的mock服務也集成在里面,整體初現雛形,還有很多需要優化和改善的地方。。。 項目結構 │ ├─build ...
摘要:使用值來作路由。原生應用本身就是多頁的場景,頁面間狀態的隔離比共享更重要一些。使用開發的是原生應用,頁面棧的管理使用的也是原生的特性,沒有但是有模塊可以實現頁面的前進和后退等操作。 系列文章的目錄在 ? 這里 (由于 我比較懶 最近一段時間在忙其他事,系列文章拖了好久終于又更新了。。。) 什么是 vue-router ? vue-router 官方文檔 vue-router 是針對 V...
摘要:到多頁應用前言我有一個創建的項目,但是我想做成多頁應用,怎么辦,廢話不多說,直接開擼約定新增代碼部分在和中間刪除注釋代碼部分在和中間,很多東西都寫在注釋里第一步一個項目新建一個項目官網默認使用的服務,這個服務是做不了單頁的,需要手動建一 vue-cli到多頁應用 前言:我有一個cli創建的vue項目,但是我想做成多頁應用,怎么辦,廢話不多說,直接開擼~ 約定:新增代碼部分在//add和...
摘要:剛看到這仨頁面的時候,我就想著可以用路由,做成三端統一。樣式這部分真的三端基本是高度統一的,部分微調一下就可以了,也正是這樣,我們后續才能迅速解決和。終于不是談談三端統一了,也是真的體驗了一次,雖然最后有點出入,但是下次基本是沒問題了。 目錄 Weex系列(序) —— 總要知道原生的一點東東(iOS) Weex系列(序) —— 總要知道原生的一點東東(Android) Weex系列(...
閱讀 1898·2021-11-11 16:55
閱讀 2107·2021-10-08 10:13
閱讀 756·2019-08-30 11:01
閱讀 2168·2019-08-29 13:19
閱讀 3295·2019-08-28 18:18
閱讀 2632·2019-08-26 13:26
閱讀 589·2019-08-26 11:40
閱讀 1881·2019-08-23 17:17