vue的ssr服務(wù)端渲染示例詳解
為什么使用服務(wù)器端渲染 (SSR)
- 更好的 SEO,由于搜索引擎爬蟲(chóng)抓取工具可以直接查看完全渲染的頁(yè)面。
請(qǐng)注意,截至目前,Google 和 Bing 可以很好對(duì)同步 JavaScript 應(yīng)用程序進(jìn)行索引。在這里,同步是關(guān)鍵。如果你的應(yīng)用程序初始展示 loading 菊花圖,然后通過(guò) Ajax 獲取內(nèi)容,抓取工具并不會(huì)等待異步完成后再行抓取頁(yè)面內(nèi)容。也就是說(shuō),如果 SEO 對(duì)你的站點(diǎn)至關(guān)重要,而你的頁(yè)面又是異步獲取內(nèi)容,則你可能需要服務(wù)器端渲染(SSR)解決此問(wèn)題。 - 更快的內(nèi)容到達(dá)時(shí)間 (time-to-content),特別是對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。無(wú)需等待所有的 JavaScript 都完成下載并執(zhí)行,才顯示服務(wù)器渲染的標(biāo)記,所以你的用戶將會(huì)更快速地看到完整渲染的頁(yè)面。通??梢援a(chǎn)生更好的用戶體驗(yàn),并且對(duì)于那些「內(nèi)容到達(dá)時(shí)間(time-to-content) 與轉(zhuǎn)化率直接相關(guān)」的應(yīng)用程序而言,服務(wù)器端渲染 (SSR) 至關(guān)重要。
使用服務(wù)器端渲染 (SSR) 時(shí)還需要有一些權(quán)衡之處:
- 開(kāi)發(fā)條件所限。瀏覽器特定的代碼,只能在某些生命周期鉤子函數(shù) (lifecycle hook) 中使用;一些外部擴(kuò)展庫(kù) (external library) 可能需要特殊處理,才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。
- 涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁(yè)面應(yīng)用程序 (SPA) 不同,服務(wù)器渲染應(yīng)用程序,需要處于 Node.js server 運(yùn)行環(huán)境。
- 更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序,顯然會(huì)比僅僅提供靜態(tài)文件的 server 更加大量占用 CPU 資源 (CPU-intensive - CPU 密集),因此如果你預(yù)料在高流量環(huán)境 (high traffic) 下使用,請(qǐng)準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載,并明智地采用緩存策略。
目錄結(jié)構(gòu)
1、定義打包命令 和 開(kāi)發(fā)命令
開(kāi)發(fā)命令是用于客戶端開(kāi)發(fā)
打包命令用于部署服務(wù)端開(kāi)發(fā)
–watch 便于修改文件再自動(dòng)打包
"client:build": "webpack --config scripts/webpack.client.js --watch", "server:build": "webpack --config scripts/webpack.server.js --watch",
"run:all": "concurrently \"npm run client:build\" \"npm run server:build\""
為了同時(shí)跑client:build 和 server:build
1.1 package.json
{ "name": "11.vue-ssr", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "client:dev": "webpack serve --config scripts/webpack.client.js", "client:build": "webpack --config scripts/webpack.client.js --watch", "server:build": "webpack --config scripts/webpack.server.js --watch", "run:all": "concurrently \"npm run client:build\" \"npm run server:build\"" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "concurrently": "^5.3.0", "koa": "^2.13.1", "koa-router": "^10.0.0", "koa-static": "^5.0.0", "vue": "^2.6.12", "vue-router": "^3.4.9", "vue-server-renderer": "^2.6.12", "vuex": "^3.6.0", "webpack-merge": "^5.7.3" }, "devDependencies": { "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", "babel-loader": "^8.2.2", "css-loader": "^5.0.1", "html-webpack-plugin": "^4.5.1", "vue-loader": "^15.9.6", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.12", "webpack": "^5.13.0", "webpack-cli": "^4.3.1", "webpack-dev-server": "^3.11.2" } }
1.2 webpack.base.js 基礎(chǔ)配置
// webpack打包的入口文件 , 需要導(dǎo)出配置 // webpack webpack-cli // @babel/core babel的核心模塊 // babel-loader webpack和babel的一個(gè)橋梁 // @babel/preset-env 把es6+ 轉(zhuǎn)換成低級(jí)語(yǔ)法 // vue-loader vue-template-compiler 解析.vue文件 并且編譯模板 // vue-style-loader css-loader 解析css樣式并且插入到style標(biāo)簽中, vue-style-loader支持服務(wù)端渲染 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'development', output: { filename: '[name].bundle.js' ,// 默認(rèn)就是main, 默認(rèn)是dist目錄 path:path.resolve(__dirname,'../dist') }, module: { rules: [{ test: /\.vue$/, use: 'vue-loader' }, { test: /\.js$/, use: { loader: 'babel-loader', // @babel/core -> preset-env options: { presets: ['@babel/preset-env'], // 插件的集合 } }, exclude: /node_modules/ // 表示node_modules的下的文件不需要查找 }, { test: /\.css$/, use: ['vue-style-loader', { loader: 'css-loader', options: { esModule: false, // 注意為了配套使用vue-style-loader } }] // 從右向左執(zhí)行 }] }, plugins: [ new VueLoaderPlugin() // 固定的 ] }
1.3 webpack.client.js 配置是客戶端開(kāi)發(fā)配置 就是正常的vue spa開(kāi)發(fā)模式的配置
const {merge} = require('webpack-merge'); const base =require('./webpack.base'); const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = merge(base,{ entry: { client:path.resolve(__dirname, '../src/client-entry.js') }, plugins:[ new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../public/index.html'), filename:'client.html' // 默認(rèn)的名字叫index.html }), ] })
1.4 webpack.server.js配置是打包后 用于服務(wù)端部署時(shí)引入的使用
const base =require('./webpack.base') const {merge} = require('webpack-merge'); const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = merge(base,{ target:'node', entry: { server:path.resolve(__dirname, '../src/server-entry.js') }, output:{ libraryTarget:"commonjs2" // module.exports 導(dǎo)出 }, plugins:[ new HtmlWebpackPlugin({ template: path.resolve(__dirname, '../public/index.ssr.html'), filename:'server.html', excludeChunks:['server'], minify:false, client:'/client.bundle.js' // 默認(rèn)的名字叫index.html }), ] })
excludeChunks:[‘server'] 不引入 server.bundle.js包
client 是變量
minify 是不壓縮
filename是打包后的生成的html文件名字
template: 模板文件
2、編寫(xiě)html文件
兩份:
2.1 public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"></div> </body> </html>
2.2 public/index.ssr.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!--vue-ssr-outlet--> <!-- ejs模板 --> <script src="<%=htmlWebpackPlugin.options.client%>"></script> </body> </html>
<!--vue-ssr-outlet--> 是服務(wù)端渲染dom用到的插槽位置 固定寫(xiě)法 <%=htmlWebpackPlugin.options.client%> 填充htmlwebpackplugin的變量
3、按照正常的vue開(kāi)發(fā), 編寫(xiě)對(duì)應(yīng)文件
定義一個(gè)app.js文件
src/app.js
入口改裝成了函數(shù) 目的是服務(wù)端渲染時(shí) 每次訪問(wèn)的適合都可以通過(guò)這個(gè)工廠函數(shù)返回一個(gè)全新的實(shí)例,保證每個(gè)人訪問(wèn)都可以拿到一個(gè)自己的實(shí)例
import Vue from 'vue'; import App from './App.vue' import createRouter from './router.js' import createStore from './store.js' // 入口改裝成了函數(shù) 目的是服務(wù)端渲染時(shí) 每次訪問(wèn)的適合都可以通過(guò)這個(gè)工廠函數(shù)返回一個(gè)全新的實(shí)例,保證每個(gè)人訪問(wèn)都可以拿到一個(gè)自己的實(shí)例 export default () => { const router = createRouter(); const store = createStore() const app = new Vue({ router, store, render: h => h(App) }); return { app, router,store } }
src/app.vue
<template> <div id="app"> <router-link to="/">foo</router-link> <router-link to="/bar">bar</router-link> <router-view></router-view> </div> </template> <script> export default {}; </script>
src/component/Bar.vue
<template> <div> {{ $store.state.name }} </div> </template> <style scoped="true"> div { background: red; } </style> <script> export default { asyncData(store){ // 在服務(wù)端執(zhí)行的方法 ,只是這個(gè)方法在后端執(zhí)行 console.log('server call') // axios.get('/服務(wù)端路徑') return Promise.resolve('success') }, mounted(){ // 瀏覽器執(zhí)行 ,后端忽略 } } </script>
src/component/Foo.vue
<template> <div @click="show">foo</div> </template> <script> export default { methods:{ show(){ alert(1) } } } </script>
src/router.js
import Vue from 'vue'; import VueRouter from 'vue-router'; import Foo from './components/Foo.vue' import Bar from './components/Bar.vue' Vue.use(VueRouter);// 內(nèi)部會(huì)提供兩個(gè)全局組件 Vue.component() // 每個(gè)人訪問(wèn)服務(wù)器都需要產(chǎn)生一個(gè)路由系統(tǒng) export default ()=>{ let router = new VueRouter({ mode:'history', routes:[ {path:'/',component:Foo}, {path:'/bar',component:Bar}, // 懶加載,根據(jù)路徑動(dòng)態(tài)加載對(duì)應(yīng)的組件 {path:'*',component:{ render:(h)=>h('div',{},'404') }} ] }); return router; } //前端的路由的兩種方式 hash history // hash # // 路由就是根據(jù)路徑的不同渲染不同的組件 hash值特點(diǎn)是hash值變化不會(huì)導(dǎo)致頁(yè)面重新渲染,我們可以監(jiān)控hash值的變化 顯示對(duì)應(yīng)組件 (可以產(chǎn)生歷史記錄) hashApi 特點(diǎn)就是丑 (服務(wù)端獲取不到hash值,) // historyApi H5的api 漂亮。問(wèn)題是刷新時(shí)會(huì)產(chǎn)生404。
src/store.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // 服務(wù)端中使用vuex ,將數(shù)據(jù)保存到全局變量中 window,瀏覽器用服務(wù)端渲染好的數(shù)據(jù),進(jìn)行替換 export default ()=>{ let store = new Vuex.Store({ state:{ name:'zhufeng' }, mutations:{ changeName(state,payload){ state.name = payload } }, actions:{ changeName({commit}){// store.dispatch('changeName') return new Promise((resolve,reject)=>{ setTimeout(() => { commit('changeName','jiangwen'); resolve(); }, 5000); }) } } }); if(typeof window!='undefined' && window.__INITIAL_STATE__){ // 瀏覽器開(kāi)始渲染了 // 將后端渲染好的結(jié)果 同步給前端 vuex中核心方法 store.replaceState(window.__INITIAL_STATE__); // 用服務(wù)端加載好的數(shù)據(jù)替換掉 } return store; }
4、 定義入口文件
客戶端包的打包入口文件:
src/client-entry.js 用于客戶端的js入口文件
import createApp from './app.js'; let {app} = createApp(); app.$mount('#app'); // 客戶端渲染可以直接使用client-entry.js
src/server-entry.js 服務(wù)端的入口文件
是一個(gè)函數(shù) 在服務(wù)端請(qǐng)求時(shí) 再各自去執(zhí)行, 給sever.js去執(zhí)行用的
// 服務(wù)端入口 import createApp from './app.js'; // 服務(wù)端渲染可以返回一個(gè)函數(shù) export default (context) => { // 服務(wù)端調(diào)用方法時(shí)會(huì)傳入url屬性 // 此方法是在服務(wù)端調(diào)用的 // 路由是異步組件 所以這里我需要等待路由加載完畢 const { url } = context; return new Promise((resolve, reject) => { // renderToString() let { app, router, store } = createApp(); // vue-router router.push(url); // 表示永遠(yuǎn)跳轉(zhuǎn)/路徑 router.onReady(() => { // 等待路由跳轉(zhuǎn)完畢 組件已經(jīng)準(zhǔn)備號(hào)了觸發(fā) const matchComponents = router.getMatchedComponents(); // /abc if (matchComponents.length == 0) { //沒(méi)有匹配到前端路由 return reject({ code: 404 }); } else { // matchComponents 指的是路由匹配到的所有組件 (頁(yè)面級(jí)別的組件) Promise.all(matchComponents.map(component => { if (component.asyncData) { // 服務(wù)端在渲染的時(shí)候 默認(rèn)會(huì)找到頁(yè)面級(jí)組件中的asyncData,并且在服務(wù)端也會(huì)創(chuàng)建一個(gè)vuex ,傳遞給asyncData return component.asyncData(store) } })).then(()=>{ // 會(huì)默認(rèn)在window下生成一個(gè)變量 內(nèi)部默認(rèn)就這樣做的 // "window.__INITIAL_STATE__={"name":"jiangwen"}" context.state = store.state; // 服務(wù)器執(zhí)行完畢后,最新的狀態(tài)保存在store.state上 resolve(app); // app是已經(jīng)獲取到數(shù)據(jù)的實(shí)例 }) } }) }) // app 對(duì)應(yīng)的就是newVue 并沒(méi)有被路由所管理,我希望等到路由跳轉(zhuǎn)完畢后 在進(jìn)行服務(wù)端渲染 // 當(dāng)用戶訪問(wèn)了一個(gè)不存在的頁(yè)面,如何匹配到前端的路由 // 每次都能產(chǎn)生一個(gè)新的應(yīng)用 } // 當(dāng)用戶訪問(wèn)bar的時(shí)候:我在服務(wù)端直接進(jìn)行了服務(wù)端渲染,渲染后的結(jié)果返回給了瀏覽器。 瀏覽器加載js腳本,根據(jù)路徑加載js腳本,用重新渲染了bar
component.asyncData 是一個(gè)異步請(qǐng)求 等待請(qǐng)求結(jié)束后再 設(shè)置context.state = store.state; 此時(shí) “window.INITIAL_STATE={“name”:“jiangwen”}”
客戶端的store就能拿到window.INITIAL_STATE 重新賦值。
5、定義服務(wù)端文件 server.js , 用node部署的一個(gè)服務(wù)器,請(qǐng)求對(duì)應(yīng)的模板文件
用了koa、koa-router做請(qǐng)求處理
vue-server-renderer是服務(wù)端渲染必備包
koa-static 是處理靜態(tài)資源的請(qǐng)求 比如js等文件
serverBundle 是打包后的js
template 是服務(wù)端入口打包后的html server:build
const Koa = require('koa'); const app = new Koa(); const Router = require('koa-router'); const router = new Router(); const VueServerRenderer = require('vue-server-renderer') const static = require('koa-static') const fs = require('fs'); const path = require('path') const serverBundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.bundle.js'), 'utf8') const template = fs.readFileSync(path.resolve(__dirname, 'dist/server.html'), 'utf8'); // 根據(jù)實(shí)例 創(chuàng)建一個(gè)渲染器 傳入打包后的js 和 傳入模板文件 const render = VueServerRenderer.createBundleRenderer(serverBundle, { template }) // 請(qǐng)求到localhost:3000/ 根據(jù)請(qǐng)求url參數(shù) -》 {url:ctx.url},傳給serverBundle 則 會(huì)根據(jù)服務(wù)端的打包的.js 路由系統(tǒng) 渲染出一份有該路由完整dom解構(gòu)的頁(yè)面 router.get('/', async (ctx) => { console.log('跳轉(zhuǎn)') ctx.body = await new Promise((resolve, reject) => { render.renderToString({url:ctx.url},(err, html) => { // 如果想讓css生效 只能使用回調(diào)的方式 if (err) reject(err); resolve(html) }) }) // const html = await render.renderToString(); // 生成字符串 // console.log(html) }) // 當(dāng)用戶訪問(wèn)一個(gè)不存在的路徑的服務(wù)端路徑 我就返回給你首頁(yè),你通過(guò)前端的js渲染的時(shí)候,會(huì)重新根據(jù)路徑渲染組件 // 只要用戶刷新就會(huì)像服務(wù)器發(fā)請(qǐng)求 router.get('/(.*)',async (ctx)=>{ console.log('跳轉(zhuǎn)') ctx.body = await new Promise((resolve, reject) => { render.renderToString({url:ctx.url},(err, html) => { // 通過(guò)服務(wù)端渲染 渲染后返回 if (err && err.code == 404) resolve(`not found`); console.log(html) resolve(html) }) }) }) // 當(dāng)客戶端發(fā)送請(qǐng)求時(shí)會(huì)先去dist目錄下查找 app.use(static(path.resolve(__dirname,'dist'))); // 順序問(wèn)題 app.use(router.routes()); // 保證先走自己定義的路由 在找靜態(tài)文件 app.listen(3000);
5.1 請(qǐng)求到localhost:3000/ 根據(jù)請(qǐng)求url參數(shù) -》 {url:ctx.url},傳給serverBundle 則 會(huì)根據(jù)服務(wù)端的打包的.js 路由系統(tǒng) 渲染出一份有該路由完整dom解構(gòu)的頁(yè)面
因?yàn)?/ 對(duì)應(yīng)的組件是Foo, 所以頁(yè)面展示Foo
網(wǎng)頁(yè)源代碼都是解析后的dom了 可以用于seo
5.2 如果請(qǐng)求了 http://localhost:3000/bar
那么就會(huì)走 /(.*)的路由
renderToString傳入url
就會(huì)走
server-entry.js文件的默認(rèn)函數(shù) 這個(gè)js也是一個(gè)vue包含了所有客戶端原本的邏輯 只不過(guò)是放在服務(wù)端操作 。
url就是 /bar
根據(jù)路由 /bar 取出Bar組件
router跳到bar 此時(shí)頁(yè)面就會(huì)是bar組件了
同時(shí)執(zhí)行asyncData函數(shù) , 可能會(huì)改寫(xiě)store或者其他數(shù)據(jù)
然后記得賦值 context.state = store.state 就會(huì)在window加上store的state對(duì)象
window.INITIAL_STATE={“name”:“jiangwen”}
store.js記得重新處理下(window.INITIAL_STATE
store.replaceState(window.INITIAL_STATE) 就是把服務(wù)端的狀態(tài)放在客戶端
dist/server.html 打包后,引入了/client.bundle.js 所以要有koa-static去做靜態(tài)請(qǐng)求處理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!--vue-ssr-outlet--> <!-- ejs模板 --> <script src="/client.bundle.js"></script> </body> </html>
6、 部署
6.1 執(zhí)行命令 npm run run:all
"run:all": "concurrently \"npm run client:build\" \"npm run server:build\""
就是打包了客戶端和服務(wù)端的資源包 包含js html 等
然后把整個(gè)server.js也放在服務(wù)器
執(zhí)行node server.js 就能啟動(dòng)node服務(wù)器了
6.2 server.js里面指向的server.bundle.js和server.html指向 對(duì)應(yīng)服務(wù)器文件夾就行
命令解釋
client:dev
開(kāi)發(fā)時(shí)用spa渲染模式開(kāi)發(fā), 不考慮ssr, client.bundle.js和 client.html是正常的spa部署時(shí)用到
run:all
服務(wù)端渲染模式 是客戶端、服務(wù)端都打包
服務(wù)端使用時(shí) ,client.bundle.js在瀏覽器使用, server.bundle.js 在服務(wù)器使用。
7、總結(jié)
1、SSR 首先要有個(gè)node服務(wù)器 、還有配合vue-server-renderer包使用。
2、正常的vue開(kāi)發(fā)即可,考慮beforeMount 或 mounted生命周期不能在服務(wù)器端使用就行。
3、創(chuàng)建server.js 集合koa或者express 做請(qǐng)求解析 然后傳入 serverBundle和template給
VueServerRenderer.createBundleRenderer函數(shù)
得到一個(gè)render
4、render.renderToString傳入請(qǐng)求的路由 比如 /bar
5、此時(shí)會(huì)進(jìn)入serverBundle默認(rèn)函數(shù)(server-entry.js打包得出的),創(chuàng)建一個(gè)vue實(shí)例app, 分析路由 vue實(shí)例然后跳轉(zhuǎn)路由,此時(shí)都是服務(wù)端的vue實(shí)例的變動(dòng)而已,還沒(méi)反應(yīng)到頁(yè)面
6、執(zhí)行對(duì)應(yīng)組件的asyncData函數(shù), 可能會(huì)改變store.state 那么在 context.state賦值就行
7、resolve(app) 此時(shí) server.js里面的render根據(jù)此時(shí)的vue實(shí)例app的路由狀態(tài)解析出dom, 返回給頁(yè)面 ctx.body = …resolve(html);
8、此時(shí)頁(yè)面拿到正常路由匹配后的dom結(jié)構(gòu)
9、html里面會(huì)有window.INITIAL_STATE={“name”:“zhufeng”} 相當(dāng)于記錄了服務(wù)端的store狀態(tài)
10、客戶端執(zhí)行到store時(shí) 其實(shí)沒(méi)有服務(wù)端那些改變后的狀態(tài)的 ,執(zhí)行 store.replaceState(window.INITIAL_STATE); 就能替換了服務(wù)端的狀態(tài)
11、整體就是服務(wù)端客戶端都有一個(gè)js包, 提前在服務(wù)端跑js包 ,然后解析出dom, dom展現(xiàn),服務(wù)端就結(jié)束了,剩下的邏輯交給客戶端的js去處理。
概念圖
官網(wǎng):
- vue-server-renderer 和 vue 必須匹配版本。
- vue-server-renderer 依賴一些 Node.js 原生模塊,因此只能在 Node.js 中使用。我們可能會(huì)提供一個(gè)更簡(jiǎn)單的構(gòu)建,可以在將來(lái)在其他「JavaScript 運(yùn)行時(shí)(runtime)」運(yùn)行。
總結(jié)
到此這篇關(guān)于vue的ssr服務(wù)端渲染的文章就介紹到這了,更多相關(guān)vue ssr服務(wù)端渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Egg Vue SSR 服務(wù)端渲染數(shù)據(jù)請(qǐng)求與asyncData
- 15分鐘學(xué)會(huì)vue項(xiàng)目改造成SSR(小白教程)
- vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
- Vue SSR 即時(shí)編譯技術(shù)的實(shí)現(xiàn)
- Vue使用預(yù)渲染代替SSR的方法
- 如何構(gòu)建 vue-ssr 項(xiàng)目的方法步驟
- vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)
- vue中vue-router的使用說(shuō)明(包括在ssr中的使用)
- 關(guān)于VueSSR的一些理解和詳細(xì)配置
- Vue.js?狀態(tài)管理及?SSR解析
相關(guān)文章
vue-electron項(xiàng)目創(chuàng)建記錄及問(wèn)題小結(jié)解決方案
這篇文章主要介紹了vue-electron項(xiàng)目創(chuàng)建記錄及注意事項(xiàng),本文給大家分享了運(yùn)行項(xiàng)目報(bào)錯(cuò)的問(wèn)題小結(jié)及多種解決方案,需要的朋友可以參考下2024-03-03在Vue中延遲執(zhí)行某個(gè)函數(shù)的實(shí)現(xiàn)方式
在Vue中延遲執(zhí)行某個(gè)函數(shù),你可以使用setTimeout()函數(shù)或者Vue提供的生命周期鉤子函數(shù),本文通過(guò)一些示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12解決Vue.js Devtools未檢測(cè)到Vue實(shí)例的問(wèn)題
在開(kāi)發(fā)Vue.js應(yīng)用時(shí),Vue.js Devtools是一個(gè)不可或缺的調(diào)試工具,然而,有時(shí)我們可能會(huì)遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識(shí)別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個(gè)問(wèn)題,并提供相應(yīng)的解決步驟與代碼示例,需要的朋友可以參考下2024-01-01Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個(gè)前端框架構(gòu)建的思維導(dǎo)圖組件或庫(kù),它可以幫助開(kāi)發(fā)者在Web應(yīng)用中創(chuàng)建動(dòng)態(tài)、交互式的思維導(dǎo)圖,讓用戶可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖,需要的朋友可以參考下2024-07-07