欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack+vue.js實現(xiàn)組件化詳解

 更新時間:2016年10月12日 14:42:29   投稿:daisy  
vue的開發(fā)體驗還是比較愉悅的。首先文檔非常友好,所以上手會比較快。其次,配合webpack和vue-loader,每個頁面都是一個.vue文件,寫起來很方便。所以很適合做組件化開發(fā),這篇文章我們就來一起看看webpack+vue.js如何實現(xiàn)組件化。

簡介

在vue中實現(xiàn)組件化用到了vue特有的文件格式.vue,在每一個.vue文件就是一個組件,在組件中我們將html,css,js全部寫入,然后在webpack中配置vue-loader就可以了。

建立vue組件

在src目錄下建立components文件夾,并在其中建立app.vue文件,這樣我們項目的目錄結(jié)構(gòu)如下:

|--dist    //webpack打包后生成的文件夾
| |--build.js
|--node_modules  //項目的依賴所在的文件夾
|--src    //文件入口
| |--components //組件存放文件夾
|  |--app.vue //組件
| |--main.js  //主js文件
|--index.html  //主html文件
|--package.json
|--webpack.config.js //webpack配置文件

首先在index.hmtl中寫入代碼:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue example</title>
</head>
<body>
 <app></app>
 <script src="dist/build.js"></script>
</body>
</html>

在編輯器中打開app.vue文件,寫入如下代碼:

<template>
<div class="message">{{msg}}</div> 
</template>
<script>
export default {
 data () {
 return {
  msg: 'Hello from vue-loader'
 }
 }
}
</script>
<style>
.message{
 color:red;
 font-size:36px;
 font-weight:blod;
}
</style>

在main.js中寫入:

import Vue from 'vue'
import App from './components/app.vue'
new Vue({
 el: 'body',
 components:{App}
});

這樣運行命令webpack就可以看到效果了

這里用到了ES6的模塊兒—importexport

export命令

export命令用于規(guī)定模塊的對外接口。一個模塊就是一個獨立文件。該文件內(nèi)的所有變量外部都無法獲取。如果希望外部能夠讀取模塊內(nèi)部的某個變量,就必須使用export關(guān)鍵字對外暴露出該變量。例如:

//export.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

這樣就可以對外輸出三個變量。

import命令

使用export對外暴露了接口后,其他js文件通過import命令加載這個模塊文件。上面暴露的三個變量在另一個js文件中引入如下:

//import.js
import {firstName,lastName,year} from './export';
function setName(element){
 element.textContent = firstName + ' ' + lastName;
}

webpack的hot-reload

前端自動刷新現(xiàn)在已經(jīng)很常見了,即改變頁面后,瀏覽器自動刷新,但是這個功能在我們做單頁面應(yīng)用時候會很不好用,所以,webpack支持hot-reload(熱替換),當我們修改模塊時候不會頁面不會刷新,會直接在頁面中生效。

hot-reload的基礎(chǔ)—webpack-dev-server

webpack-dev-server支持兩種模式的自動刷新頁面:

     iframe模式(頁面嵌入一個iframe并在其中呈現(xiàn)頁面的變化)

     inline模式(一個小型的webpack-dev-server客戶端會作為入口文件打包,這個客戶端會在后端代碼改變的時候刷新頁面)

iframe模式

使用iframe模式無需額外的配置,在dos下輸入命令

$ webpack-dev-server

在瀏覽器中輸入 http://loacalhost:8080/webpack-dev-server/index.html

inline模式

在dos下輸入命令

$ webpack-dev-server --inline --hot

啟動服務(wù)器,在瀏覽器中打開 http://loacalhost:8080 就可以看到我們的頁面,此時修改app.vue中的css,以及html中的文字,都可以看到在瀏覽器中立馬呈現(xiàn)。

關(guān)于webpack-dev-server的詳細說明,可以參考官方文檔或者博客WEBPACK DEV SERVER。

這里有一個問題需要說明下

在很多文章中都說,修改app.vue文件中script標簽中的msg文字,會在瀏覽器中立即呈現(xiàn)效果,但是事實上我在做demo的時候并沒有出現(xiàn)這個效果,Google了很多,找到了答案,尤大說:“data是初始值,但熱更新的時候會保留當前狀態(tài)”。

至此,關(guān)于webpack+vue的基本結(jié)束,雖然簡單,但是由于在這個過程中也遇到一些坑,所以總結(jié)下,關(guān)于對vue的研究,這才只是個開始…

附:

我的webpack配置文件:

var path = require('path');
module.exports = {
 entry: './src/main.js',
 output: {
 path: './dist',
 publicPath:'dist/',
 filename: 'build.js'
 },
 //配置自動刷新,如果打開會使瀏覽器刷新而不是熱替換
 /*devServer: {
 historyApiFallback: true,
 hot: false,
 inline: true,
 grogress: true
 },*/
 module: {
 loaders: [
  //轉(zhuǎn)化ES6語法
  {
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules/
  },
  //解析.vue文件
  {
  test:/\.vue$/,
  loader:'vue'
  },
  //圖片轉(zhuǎn)化,小于8K自動轉(zhuǎn)化為base64的編碼
  {
  test: /\.(png|jpg|gif)$/,
  loader:'url-loader?limit=8192'
  }
 ]
 },
 vue:{
 loaders:{
  js:'babel'
 }
 },
 resolve: {
  // require時省略的擴展名,如:require('app') 不需要app.js
  extensions: ['', '.js', '.vue'],
  // 別名,可以直接使用別名來代表設(shè)定的路徑以及其他
  alias: {
   filter: path.join(__dirname, './src/filters'),
   components: path.join(__dirname, './src/components')
  }
 } 
}

package.json文件:

{
 "name": "webpackvue",
 "version": "1.0.0",
 "description": "",
 "main": "vue.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.9.1",
 "babel-loader": "^6.2.4",
 "babel-plugin-transform-runtime": "^6.9.0",
 "babel-preset-es2015": "^6.9.0",
 "babel-preset-stage-0": "^6.5.0",
 "babel-runtime": "^6.9.2",
 "css-loader": "^0.23.1",
 "file-loader": "^0.8.5",
 "style-loader": "^0.13.1",
 "url-loader": "^0.5.7",
 "vue":"^1.0.24",
 "vue-router":"^0.7.13",
 "vue-hot-reload-api": "^1.3.2",
 "vue-html-loader": "^1.2.2",
 "vue-loader": "^8.5.2",
 "vue-style-loader": "^1.0.0",
 "webpack": "^1.13.1",
 "webpack-dev-server": "^1.14.1",
 "webpack-merge": "^0.13.0"
 }
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

相關(guān)文章

  • Vue tagsview實現(xiàn)多頁簽導(dǎo)航功能流程詳解

    Vue tagsview實現(xiàn)多頁簽導(dǎo)航功能流程詳解

    基本上后臺管理系統(tǒng)都需要有多頁簽的功能,但是因為一些腳手架項目基本都把這個功能給集成好了,導(dǎo)致在學習或者修改的時候不知道該如何下手。今天這篇文章就來聊一聊,vue-element-admin項目是如何實現(xiàn)多頁簽功能的
    2022-09-09
  • vue 詳情跳轉(zhuǎn)至列表頁實現(xiàn)列表頁緩存

    vue 詳情跳轉(zhuǎn)至列表頁實現(xiàn)列表頁緩存

    這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁實現(xiàn)列表頁緩存,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • vue.js模版插值的原理與實現(xiàn)方法簡析

    vue.js模版插值的原理與實現(xiàn)方法簡析

    這篇文章主要介紹了vue.js模版插值的原理與實現(xiàn)方法,結(jié)合實例形式簡單分析了vue.js模板插值的基本功能、原理、實現(xiàn)方法與注意事項,需要的朋友可以參考下
    2023-04-04
  • vue實現(xiàn)復(fù)制文字復(fù)制圖片實例詳解

    vue實現(xiàn)復(fù)制文字復(fù)制圖片實例詳解

    這篇文章主要為大家介紹了vue實現(xiàn)復(fù)制文字復(fù)制圖片實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法

    Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法

    這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-06-06
  • 簡單談?wù)剉ue的過渡動畫(推薦)

    簡單談?wù)剉ue的過渡動畫(推薦)

    下面小編就為大家?guī)硪黄唵握務(wù)剉ue的過渡動畫(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • vue3實現(xiàn)父組件提交校驗多個子組件

    vue3實現(xiàn)父組件提交校驗多個子組件

    這篇文章主要為大家詳細介紹了vue3如何實現(xiàn)父組件在提交事件中校驗多個子組件中的form件,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下
    2023-11-11
  • 如何基于Vue制作一個猜拳小游戲

    如何基于Vue制作一個猜拳小游戲

    Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項目的新的思維模式,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue制作一個猜拳小游戲的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue 獲取url里參數(shù)的兩種方法小結(jié)

    vue 獲取url里參數(shù)的兩種方法小結(jié)

    這篇文章主要介紹了vue 獲取url里參數(shù)的兩種方法小結(jié),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • electron + vue項目實現(xiàn)打印小票功能及實現(xiàn)代碼

    electron + vue項目實現(xiàn)打印小票功能及實現(xiàn)代碼

    這篇文章主要介紹了electron + vue項目實現(xiàn)打印小票功能,需要的朋友可以參考下
    2018-11-11

最新評論