當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 多页面多模块分模块打包分插件安装_Vue渲染方式

發布時間：2023/12/3 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 多页面多模块分模块打包分插件安装_Vue渲染方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue中的渲染方式總結可分四種:

原有模板語法，掛載渲染
使用render屬性，createElement函數直接渲染
使用render屬性，配合組件的template屬性，createElement函數渲染
使用render屬性，配合單文件組件，createElement函數渲染

方式一

原有模板語法，掛載渲染：就是對使用Vue標簽語法的hmtl進行渲染。

實例代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TestVue</title> </head> <body> <div id="app"><input v-model="message"><p>Message is: {{ message }}</p> </div> </body> <script src="js/vue.js"></script> <script type="text/javascript">var v = new Vue({el: '#app',data: {message: '這是內容'}}); </script> </html>

特點

當頁面返回時html中的v-model等屬性并沒有被渲染，保持不變發給客戶端，客戶端直到加載了Vue，創建了實例之后才會將這些標識渲染出來。

v-if顯示后消失或消失后顯示造成跳變

這種方式的缺點是明顯的：瀏覽器第一時間無法識別這些標識！這會使得在某些情況下出現奇怪的現象，下面我修改代碼以做演示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TestVue</title> </head> <body> <div id="app"><template v-if="type === '1'"><div style="width: 400px;height: 300px;background-color: blue;"></div></template><div style="width: 400px;height: 200px;background-color: red;"></div> </div> </body> <script src="js/vue.js"></script> <script type="text/javascript">var v = new Vue({el: '#app',data: {type: '1'}}); </script> </html>

可以看到上面的第一個div在type為1時應該顯示，但是它在頁面初始加載是不會顯示的，一個html并沒有<template>標簽，整個標簽會被跳過，那么這個頁面展示的結果就會有一個一瞬間的跳變。

這個過程非常短，但是人眼是絕對識別得到的，在谷歌瀏覽器下使用Ctrl+Shift+R，360瀏覽器下使用Ctrl+F5強制不使用緩存加載頁面我們就能看到這個跳變了！

注意另一種寫法也會有跳變情況：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TestVue</title> </head> <body> <div id="app"><div v-if="type === '1'" style="width: 400px;height: 300px;background-color: blue;"></div><div style="width: 400px;height: 200px;background-color: red;"></div> </div> </body> <script src="js/vue.js"></script> <script type="text/javascript">var v = new Vue({el: '#app',data: {type: '2'}}); </script> </html>

解釋：div默認不會識別v-if默認顯示，但是tpye為2，Vue加載后隱藏了該div，造成跳變。

如何解決跳變問題？

使用下面所有方法都可以解決，思路是用render函數進行渲染，而目標div內不含任何內容，也就是先什么都不顯示，然后渲染出來正確的html，自然不會有跳變。

方式二

使用render屬性，createElement函數直接渲染：原本無html，通過JavaScript 的完全編程的能力生成頁面。

實例代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TestVue</title> </head> <body> <div id="app"> </div> </body> <script src="js/vue.js"></script> <script type="text/javascript">var v = new Vue({el: '#app',data: {message: '這是內容'},render: function (createElement) {return createElement('p', 'Message is:' + this.message)}}); </script> </html>

這里目標div內初始時沒有任何內容，使用render方法生成內容，這里我沒有渲染出v-model的效果，因為實現起來比較復雜，要用到組件，具體參考官網渲染函數 & JSX，Vue 的模板實際是就是被編譯成了 render 函數。

這里render不要使用ECMAScript6語法如下：

render: h => h('p', this.message)

因為在ECMAScript6語法中，這里的this會指向[object Window]，這個this.message是獲取不到值的，而在上面一個的例子中this會指向當前Vue實例。

特點

極少會使用的方式，只適合一些細節渲染，雖完全控制輸出，但不夠直觀，實現復雜，遠不及模板標記語法：讓Vue去幫我們編譯渲染。

方式三

使用render屬性，配合組件的template屬性，createElement函數渲染。

相比于上一個方式，加入組件，利用template屬性，更為直觀，同樣是原本無html，通過render函數渲染。

實例代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TestVue</title> </head> <body> <div id="app"> </div> </body> <script src="js/vue.js"></script> <script type="text/javascript">var MyComponent = {data () {return {message: '這是內容'}},template: `<div id="app"><input v-model="message"><p>Message is: {{ message }}</p></div>`};var v = new Vue({el: '#app',components: {'my-component': MyComponent},render: function (createElement) {return createElement('my-component')}//ECMAScript6: render: h => h('my-component')}); </script> </html>

這里渲染組件時的渲染的內容會覆蓋原<div id="app"></div>，而不是在其之下生成子節點。

特點

動態渲染，并且通過組件實現了模塊分離，但是html模板被包在````里，使用不方便，IDE無法高亮代碼，不適合大型項目。

下面是官網上對于這種方式的描述：

全局定義 (Global definitions) 強制要求每個 component 中的命名不得重復（上面我用的是局部注冊組件，甚至組件和實例不能分文件）
字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的
不支持 CSS (No CSS support) 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器，如 Pug (formerly Jade) 和 Babel

方式四

說了前三種方式，其實只是一步步引出第四種方式：使用render屬性，配合單文件組件，createElement函數渲染。

這種方式是絕大部分Vue項目（官方腳手架就是采用該渲染方式）的渲染方式。

在理解這一部分內容之前，你需要有webpack、vue-loader的知識：

1、webpack是核心，將組件文件打包，配合loader解析文件。

2、vue-loader是vue單文件組件的核心，負責解析.vue文件。

webpack以及loader

webpack，一種打包文件工具，配合一些插件可以模塊化文件的打包處理等，我也是邊學邊做，自行百度了解。

loader，webpack非常常用的屬性，讓你能配合各種loader隨意加載各種東西，看下官網給出的解釋：

loader 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

比如這里我們有.vue模塊組件，我們要在另一個文件中import App from './App.vue'該如何做到，我一步步講。

實現步驟

我是使用命令的方式先打包出一個目標文件，再運行服務器，好像可以寫到package.json的'scripts'字段里做一個步驟的簡化，我沒試，還是最簡單的方式吧。

1、我是用命令行打包所以先全局安裝webpack，注意webpack4.0+版本后要附帶安裝一個webpack-cli或是webpack-command其中之一，我是安的webpack-command：

npm install webpack webpack-command -g

2、因為babel-loader、vue-loader等必須要有webpack，好像不在項目中載入webpack也不行，所以進入項目根目錄（node_modules文件夾所在目錄），npm install webpack --save在項目中加載webpack。

3、接著，再把需要的loader加載一下，首先是vue-loader，是解析.vue文件的核心loader，接著是babel-loader，它是用來修改不兼容的javaScript語法的loader，用來處理.vue文件中的<script></script>，還有處理<style></style>的css-loader、vue-style-loader，還有vue-loader強制附帶個vue-template-compiler，我不知道是干嘛的。

加載babel：npm install babel-loader babel-core babel-preset-env --save

加載其他必要的：npm install vue-loader css-loader vue-style-loader vue-template-compiler --save

4、在根目錄下新建一個名為dist的文件夾存放生成的文件。

5、在根目錄下新建文件App.vue，這就是單文件組件了，而且是根組件，添加代碼如下：

<template><div id="app"><input v-model="message"><p>Message is: {{ message }}</p></div> </template><script> export default {data () {return {message: 'dsdsadasad'}} } </script>

6、在根目錄下新建webpack打包入口文件entry-client.js，添加代碼如下：

import Vue from 'vue' //注意在靜態編譯時全都使用import，不要使用require，無法生效 import App from './App' //注意在靜態編譯時全都使用import，不要使用require，無法生效const app = new Vue({components: {App},render: h => h(App) });app.$mount('#app');

7、在根目錄下新建一個名為build的文件夾，在該文件夾內創建一個文件名為webpack.config.js的文件作為webpack配置文件，代碼如下：

const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {entry: {'client.bundle': '../entry-client.js',},output: {path: path.resolve(__dirname, '../dist'), //生成文件放到dist目錄下filename: '[name].js'},mode: 'development', //開發模式，有錯誤vue會在控制臺提示resolve: {//加了下面這項我們就能將import App from './App.vue' 省略為import App from './App'extensions: ['.js', '.vue', '.json']},//設置loader以及插件，可參考vue-loader官網module: {rules: [{test: /.vue$/,loader: 'vue-loader'},// 它會應用到普通的 `.js` 文件// 以及 `.vue` 文件中的 `<script>` 塊{test: /.js$/,loader: 'babel-loader'},// 它會應用到普通的 `.css` 文件// 以及 `.vue` 文件中的 `<style>` 塊{test: /.css$/,use: ['vue-style-loader','css-loader']}]},plugins: [// 請確保引入這個插件來保證vue-loader的使用new VueLoaderPlugin()] };

8、命令行進入build文件夾，輸入命令webpack打包文件，然后就可以在dist目錄下看到生成的client.bundle.js目標文件了。

9、在根目錄下創建測試文件index.html，添加代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TestVue</title> </head> <body> <div id="app"> </div> </body> <script type="text/javascript" src="dist/client.bundle.js"></script> </html>

特點

單文件組件，模塊化，動態渲染，典型的單頁面應用

總結

以上是生活随笔為你收集整理的vue 多页面多模块分模块打包分插件安装_Vue渲染方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python123测验9程序题_pyth
下一篇： vue中路径带# vs 不带