資訊專欄INFORMATION COLUMN
摘要：多個(gè)單頁(yè)應(yīng)用整合的工程的開發(fā)環(huán)境工程的目錄設(shè)置本文內(nèi)容的工程的目錄設(shè)計(jì)基于的多個(gè)單頁(yè)應(yīng)用的開發(fā)環(huán)境搭建目錄一開發(fā)環(huán)境使用二需求分析三開發(fā)思路四目錄設(shè)計(jì)及思路五開發(fā)環(huán)境開發(fā)六整個(gè)開發(fā)環(huán)境的目錄注釋一開發(fā)環(huán)境使用多終端頁(yè)面路徑設(shè)置
vue-multi-device-single-page
多個(gè)單頁(yè)應(yīng)用整合的vue工程的開發(fā)環(huán)境
vue工程的目錄設(shè)置
本文內(nèi)容：
vue + vuex + vue-resuorce + vue-route 的工程 的目錄設(shè)計(jì)
基于 vue-cli 的 多個(gè)vue單頁(yè)應(yīng)用的開發(fā)環(huán)境 搭建
目錄：一、開發(fā)環(huán)境使用 多終端（頁(yè)面）路徑設(shè)置一、開發(fā)環(huán)境使用
二、需求分析
三、開發(fā)思路
四、src目錄設(shè)計(jì)及思路
五、開發(fā)環(huán)境開發(fā)
六、整個(gè)開發(fā)環(huán)境的目錄注釋
在src/device/目錄下添加終端（頁(yè)面）路徑，如:src/device/pc/
在新添加的文件下加入這個(gè)終端（頁(yè)面）使用的打包模板，命名為index.html,如：src/device/pc/index.html
在新添加的文件下加入這個(gè)終端（頁(yè)面）使用的入口文件，命名為index.js,如：src/device/pc/index.js
build 打包打生產(chǎn)環(huán)境的包，會(huì)自動(dòng)把不同終端的文件按終端名稱分開
dev 開發(fā)npm run build "device"
device ： 接受的參數(shù)，在 /build/device-conf.js里面有限制
示例： npm run build pc 打一個(gè)pc端的包
npm run build-all
打所有終端的包
npm run dev
開始進(jìn)行調(diào)試，基于vue-cli的,所以基本是vue-cli的
自動(dòng)打開一個(gè)網(wǎng)頁(yè)，從這里選擇要調(diào)試的終端
開始調(diào)試
二、需求分析： 需求：要開發(fā)pc端 + 移動(dòng)端 + app混合開發(fā)的 頁(yè)面，每個(gè)頁(yè)面都是單頁(yè)應(yīng)用
為了節(jié)約開發(fā)成本，這幾個(gè)端要共用一些組件，和 方法
打包要方便，調(diào)試要方便
vue應(yīng)用
幾個(gè)問題：vue-cli提供了非常好的開發(fā)環(huán)境，我能否在這個(gè)基礎(chǔ)上整一整，解決掉需求 2 和 3 呢？
vue + vuex + vue-resuorce +vue-route 的工程目錄應(yīng)該怎么設(shè)計(jì)呢？
這個(gè)工程是啥面對(duì)這樣的需求，我的理解是把多個(gè)單頁(yè)應(yīng)用融合到一個(gè)工程里面，下面是我的解決辦法
三、開發(fā)思路github https://github.com/vincentmrlau/vue-multi-device-single-page，歡迎交流
多端（也可以是多頁(yè)）的單頁(yè)應(yīng)用的vue工程的開發(fā)環(huán)境,本質(zhì)上是多個(gè)單頁(yè)應(yīng)用
基于vue,整合了vuex vue-resuorece vue-router 的開發(fā)目錄設(shè)計(jì)
整個(gè)基于vue-cli生成的目錄進(jìn)行修改，除了test（正在研究）外的功能均可使用
1、設(shè)置公用組件的目錄
2、抽離api，分為公用的api和屬于各個(gè)頁(yè)面自己的api
3、每個(gè)單頁(yè)應(yīng)用vuex管理狀態(tài)
4、可能會(huì)被多人同時(shí)編輯，如何盡量減少merge
5、針對(duì)這樣的需求的src下面的目錄應(yīng)該怎么設(shè)計(jì)（第三部分有寫）
6、針對(duì)需求配置開發(fā)環(huán)境（從第 部門開始是關(guān)于這個(gè)開發(fā)環(huán)境的）
四、src目錄設(shè)計(jì)及思路概況兩圖流介紹src的目錄設(shè)置及其作用
介紹 界面-模板html-組件-store-接口 的關(guān)系
pc主頁(yè)示意圖
分析圖（怎一個(gè)亂字了得）
目錄設(shè)置及其作用├─src # 源文件目錄 │ │ config.js │ │ │ ├─api # 多端共用的 api │ │ device-root.js │ │ middleware.js │ │ │ ├─assets # 多端共用的 資源 │ │ logo.png │ │ │ ├─components # 多端共用的 組件 │ │ RootCommonComponent.vue │ │ │ └─device # 設(shè)備入口 │ ├─app # 混合開發(fā)的放這里了，也可以分 ios 和 安卓 │ │ index.html # app專用的html模板，打包好的東西會(huì)自動(dòng)注入 │ │ index.js # app的入口文件 │ │ │ ├─mobile # 這里放移動(dòng)端的頁(yè)面 ，下面的 index文件作用類似其他端 │ │ index.html │ │ index.js │ │ │ └─pc # 這個(gè)目錄下的都是pc端使用的，當(dāng)然其他端要用也是可以的，哈哈 │ │ App.vue # 入口組件 │ │ index.html # 模板文件 │ │ index.js # 入口文件 │ │ │ ├─api # 分離開接口 │ │ home.js # home這個(gè)模塊用的接口 │ │ middleware.js # 一些公用的中間件 │ │ │ ├─assets # 資源 │ ├─components # 組件 │ │ ├─commonComponents # 公共組件 │ │ │ Header.vue │ │ │ │ │ ├─Home # home這個(gè)模塊用的組件 │ │ │ Body.vue │ │ │ Index.vue │ │ │ │ │ └─Page404 # 404這個(gè)模塊用的組件 │ │ Index.vue │ │ │ ├─router # 路由 │ │ index.js │ │ │ ├─store # vuex 的store │ │ │ index.js # 根級(jí)別的store + 模塊組裝 │ │ │ │ │ └─modules # store 模塊 │ │ home.js # home這個(gè)模塊使用的store │ │ │ └─types # 放類型名稱 │ home.js # home這個(gè)模塊使用的 types │ root.js # 公用的types界面-模板-組件 的關(guān)系
界面：最后展現(xiàn)在用戶面前的
模板：用來注入打包的html文件
組件：編寫的vue組件
他們的關(guān)系如圖：
組件-store(vuex)-api(vue-resuorce) 的關(guān)系
組件使用store：
通過輔助函數(shù)（mapGetters,mapActions等）把store的屬性映射到組件中使用
組件通過action來提交mutation修改狀態(tài)
也可以通過$store來使用
組件使用api：
組件通過store的action使用api
store內(nèi)部安排
由mutation來修改狀態(tài)
由action來提交mutation
由store的action來調(diào)用api
api里面分離開中間件，按需調(diào)用
看圖看圖 ↓↓↓
五、開發(fā)環(huán)境開發(fā)新增加：build/device-conf.js 用來出路多終端（頁(yè)面）開發(fā)相關(guān)問題在vue-cli v2.8.2生產(chǎn)的開發(fā)環(huán)境的基礎(chǔ)上進(jìn)行修改
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])
}
// 檢測(cè)是否在輸入的參數(shù)是否在允許的list中
var checkDevice = function () {
var device = process.env.DEVICE_ENV
var result = false
// 檢查deviceList是否有重復(fù)
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 有重復(fù)："))
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("參數(shù)錯(cuò)誤，允許的參數(shù)為："))
console.log(chalk.bgRed(deviceList.toString()))
}
return result
}
exports.deviceList = deviceList
exports.checkDevice = checkDevice
// 其他依賴
exports.polyfills = ["babel-polyfill"]
添加:/build/build-all.js
內(nèi)部根據(jù) deviceList 產(chǎn)生運(yùn)行build.js子進(jìn)程，完成打包
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
添加設(shè)置環(huán)境變量并檢查參數(shù)代碼
var chalk = require("chalk")
// 設(shè)置process.env.DEVICE_ENV參數(shù)
// 沒有則返回錯(cuò)誤
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(" 錯(cuò)誤：缺少參數(shù)，詳情請(qǐng)看readme.md "))
return false
}
修改/build/build.js
添加一個(gè)路由（在使用中間件connect-history-api-fallback之前添加），把可調(diào)試的入口展示出來
// 寫個(gè)小路由，打開瀏覽器的時(shí)候可以選一個(gè)開發(fā)路徑
var deviceList = require("./device-conf").deviceList || []
var sentHref = ""
for(var x in deviceList){
sentHref += "點(diǎn)我調(diào)試終端："+ deviceList[x].toString() +"
"
}
app.get("/devDeviceList", (req, res, next) => {
res.send(sentHref)
})
修改打開的默認(rèn)連接
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",
// 這里的路徑改成相對(duì)路徑
// 原來是： 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")
// 設(shè)置設(shè)備相關(guān)信息引入
var deviceList = require("./device-conf").deviceList
// 其他依賴
var extraPolyfill = require("./device-conf").polyfills || []
// 設(shè)置入口
var entry = {}
// 設(shè)置html插件模板入口和依賴
var htmlPluginConf = []
for(var x in deviceList){
// 設(shè)置 入口
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
// 把熱重載所需的代碼也打包進(jìn)去
// 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, {
// 設(shè)置入口
entry: entry,
// 設(shè)置出口
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
// 設(shè)置device相關(guān)變量
var device = process.env.DEVICE_ENV
//設(shè)置入口
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
六、整個(gè)開發(fā)環(huán)境的目錄注釋
│ .babelrc
│ .editorconfig
│ .eslintignore
│ .eslintrc.js
│ .gitignore
│ .postcssrc.js
│ index.html
│ npm-debug.log
│ package.json
│ README.md
│ tree.txt
│
├─build # 這里是打包工具相關(guān)的
│ build-all.js # 通過打包所有端的代碼
│ build.js # 這里設(shè)定進(jìn)程的環(huán)境變量
│ check-versions.js
│ dev-client.js
│ dev-server.js # 這里也需要對(duì)進(jìn)程的環(huán)境變量進(jìn)行設(shè)定
│ device-conf.js # 這里面有關(guān)于多端開發(fā)、打包的相關(guān)設(shè)定
│ utils.js
│ vue-loader.conf.js
│ webpack.base.conf.js # 修改了入口、出口等
│ webpack.dev.conf.js # 修改了入口、出口等
│ webpack.prod.conf.js # 修改了入口出口等
│ webpack.test.conf.js # 測(cè)試相關(guān)還未完善
│
├─config
│ dev.env.js
│ index.js # 打包的入口和出口
│ prod.env.js
│ test.env.js
│
├─dist # 最后打包的目錄 分端儲(chǔ)存
│ ├─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 # 這個(gè)放點(diǎn)文檔寫文檔用的圖片
├─sever # 這里寫點(diǎn)服務(wù)端程序，用于測(cè)試等
│ prod-view-server.js
│
├─src # 源文件目錄
│ │ config.js
│ │
│ ├─api # 多端共用的 api
│ │ device-root.js
│ │ middleware.js
│ │
│ ├─assets # 多端共用的 資源
│ │ logo.png
│ │
│ ├─components # 多端共用的 組件
│ │ RootCommonComponent.vue
│ │
│ └─device # 設(shè)備入口
│ ├─app # 混合開發(fā)的放這里了，也可以分 ios 和 安卓
│ │ index.html # app專用的html模板，打包好的東西會(huì)自動(dòng)注入
│ │ index.js # app的入口文件
│ │
│ ├─mobile # 這里放移動(dòng)端的頁(yè)面 ，下面的 index文件作用類似其他端
│ │ index.html
│ │ index.js
│ │
│ └─pc # 這個(gè)目錄下的都是pc端使用的，當(dāng)然其他端要用也是可以的，哈哈
│ │ App.vue # 入口組件
│ │ index.html # 模板文件
│ │ index.js # 入口文件
│ │
│ ├─api # 分離開接口
│ │ home.js # home這個(gè)模塊用的接口
│ │ middleware.js # 一些公用的中間件
│ │
│ ├─assets # 資源
│ ├─components # 組件
│ │ ├─commonComponents # 公共組件
│ │ │ Header.vue
│ │ │
│ │ ├─Home # home這個(gè)模塊用的組件
│ │ │ Body.vue
│ │ │ Index.vue
│ │ │
│ │ └─Page404 # 404這個(gè)模塊用的組件
│ │ Index.vue
│ │
│ ├─router # 路由
│ │ index.js
│ │
│ ├─store # vuex 的store
│ │ │ index.js # 根級(jí)別的store + 模塊組裝
│ │ │
│ │ └─modules # store 模塊
│ │ home.js # home這個(gè)模塊使用的store
│ │
│ └─types # 放類型名稱
│ home.js # home這個(gè)模塊使用的 types
│ root.js # 公用的types
│
├─static
│ .gitkeep
│
└─test # 測(cè)試相關(guān) TODO
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83170.html
摘要：適用于主要入口頁(yè)面生成多頁(yè)，子頁(yè)面和次要頁(yè)面使用單頁(yè)形式的項(xiàng)目。文件用來存放固定的數(shù)據(jù)，而文件可更加自由的處理并返回?cái)?shù)據(jù)。 VUE2的單頁(yè)應(yīng)用框架有人分享了，多頁(yè)應(yīng)用框架也有人分享了，這里分享一個(gè)單頁(yè)+多頁(yè)的混合應(yīng)用框架吧，node.js寫了一個(gè)簡(jiǎn)單的mock服務(wù)也集成在里面，整體初現(xiàn)雛形，還有很多需要優(yōu)化和改善的地方。。。 項(xiàng)目結(jié)構(gòu) │ ├─build ...
摘要：使用值來作路由。原生應(yīng)用本身就是多頁(yè)的場(chǎng)景，頁(yè)面間狀態(tài)的隔離比共享更重要一些。使用開發(fā)的是原生應(yīng)用，頁(yè)面棧的管理使用的也是原生的特性，沒有但是有模塊可以實(shí)現(xiàn)頁(yè)面的前進(jìn)和后退等操作。 系列文章的目錄在 ? 這里 （由于 我比較懶 最近一段時(shí)間在忙其他事，系列文章拖了好久終于又更新了。。。） 什么是 vue-router ？ vue-router 官方文檔 vue-router 是針對(duì) V...
摘要：到多頁(yè)應(yīng)用前言我有一個(gè)創(chuàng)建的項(xiàng)目，但是我想做成多頁(yè)應(yīng)用，怎么辦，廢話不多說，直接開擼約定新增代碼部分在和中間刪除注釋代碼部分在和中間，很多東西都寫在注釋里第一步一個(gè)項(xiàng)目新建一個(gè)項(xiàng)目官網(wǎng)默認(rèn)使用的服務(wù)，這個(gè)服務(wù)是做不了單頁(yè)的，需要手動(dòng)建一 vue-cli到多頁(yè)應(yīng)用 前言：我有一個(gè)cli創(chuàng)建的vue項(xiàng)目，但是我想做成多頁(yè)應(yīng)用，怎么辦，廢話不多說，直接開擼~ 約定：新增代碼部分在//add和...
摘要：剛看到這仨頁(yè)面的時(shí)候，我就想著可以用路由，做成三端統(tǒng)一。樣式這部分真的三端基本是高度統(tǒng)一的，部分微調(diào)一下就可以了，也正是這樣，我們后續(xù)才能迅速解決和。終于不是談?wù)勅私y(tǒng)一了，也是真的體驗(yàn)了一次，雖然最后有點(diǎn)出入，但是下次基本是沒問題了。 目錄 Weex系列(序) —— 總要知道原生的一點(diǎn)東東(iOS) Weex系列(序) —— 總要知道原生的一點(diǎn)東東(Android) Weex系列(...
閱讀 1899·2021-11-11 16:55
閱讀 2112·2021-10-08 10:13
閱讀 757·2019-08-30 11:01
閱讀 2171·2019-08-29 13:19
閱讀 3296·2019-08-28 18:18
閱讀 2633·2019-08-26 13:26
閱讀 590·2019-08-26 11:40
閱讀 1882·2019-08-23 17:17
