Vue + Webpack 實(shí)踐

fsmStudy 發(fā)布于2019-08-20 11:19 / 1910人閱讀

摘要：模塊熱加載是的一個(gè)非常碉堡的特性，將會(huì)為我們的單頁(yè)應(yīng)用帶來(lái)極大的便利。這是一個(gè)生態(tài)系統(tǒng)中一個(gè)偉大創(chuàng)舉。

Vue全家桶 參考

vue-tutorial

Vue+Webpack開(kāi)發(fā)可復(fù)用的單頁(yè)面富應(yīng)用教程

Vue+Webpack使用規(guī)范
對(duì)比其他框架

推薦代碼使用 CommonJS 或 ES6 模塊，然后使用 Webpack 或 Browserify 打包。

你可以使用 Webpack + vue-loader 或 Browserify + vueify 構(gòu)建這些單文件 Vue 組件。

可以在 Webpackbin.com 上在線(xiàn)嘗試！
chrome開(kāi)發(fā)工具 : vue-developertools

安裝

我們將會(huì)使用webpack去為我們的模塊打包，預(yù)處理，熱加載。如果你對(duì)webpack不熟悉，它就是可以幫助我們把多個(gè)js文件打包為1個(gè)入口文件，并且可以達(dá)到按需加載。這就意味著，我們不用去擔(dān)心由于太多的組件，導(dǎo)致了過(guò)多的HTTP請(qǐng)求，這是非常有益于產(chǎn)品體驗(yàn)的。但，我們并不只是為了這個(gè)而使用webpack，我們需要用webpack去編譯.vue文件，如果沒(méi)有使用一個(gè)loader去轉(zhuǎn)換我們.vue文件里的style，js，html，那么瀏覽器就無(wú)法識(shí)別。

模塊熱加載是webpack的一個(gè)非常碉堡的特性，將會(huì)為我們的單頁(yè)應(yīng)用帶來(lái)極大的便利。

通常來(lái)說(shuō)，當(dāng)我們修改了代碼刷新頁(yè)面，那應(yīng)用里的所有狀態(tài)就都沒(méi)有了。這對(duì)于開(kāi)發(fā)一個(gè)單頁(yè)應(yīng)用來(lái)說(shuō)是非常痛苦的，因?yàn)樾枰匦略谂芤槐榱鞒獭Ｈ绻心K熱加載，當(dāng)你修改了代碼，你的代碼會(huì)直接修改，頁(yè)面并不會(huì)刷新，所以狀態(tài)也會(huì)被保留。

Vue也為我們提供了CSS預(yù)處理，所以我們可以選擇在.vue文件里寫(xiě)LESS或者SASS去代替原生CSS。

我們過(guò)去通常需要使用npm下載一堆的依賴(lài)，但是現(xiàn)在我們可以選擇Vue-cli。這是一個(gè)vue生態(tài)系統(tǒng)中一個(gè)偉大創(chuàng)舉。這意味著我們不需要手動(dòng)構(gòu)建我們的項(xiàng)目，而它就可以很快地為我們生成。

使用腳手架工具 vue-cli 可以快速地構(gòu)建項(xiàng)目：?jiǎn)挝募?Vue 組件，熱加載，保存時(shí)檢查代碼，單元測(cè)試等。

安裝vue-cli (確保你有node和npm)

$ npm install -g vue-cli

使用腳手架初始創(chuàng)建項(xiàng)目

$ vue init

Example:*創(chuàng)建一個(gè)webpack項(xiàng)目*

$ vue init webpack my-project

項(xiàng)目模版下載好了之后需要安裝項(xiàng)目用到的依賴(lài)包

$ cd my-project
$ npm install

這時(shí)可以將項(xiàng)目運(yùn)行起來(lái)看看效果了

$ npm run dev

這一行命令代表著它會(huì)去找到package.json的scripts對(duì)象，執(zhí)行node bulid/dev-server.js。在這文件里，配置了Webpack，會(huì)讓它去編譯項(xiàng)目文件，并且運(yùn)行服務(wù)器，我們?cè)?b>localhost:8080即可查看我們的應(yīng)用。

vue-cli 構(gòu)建的目錄結(jié)構(gòu)

.
├── build/                      # webpack config files
│   └── ...
├── config/                     
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

更多內(nèi)容參照https://vuejs-templates.github.io/webpack

Vue 指令

常用指令:

v-if

v-show

v-else

v-for

v-bind

v-on

v-model
更多指令請(qǐng)移步Vue 指令

初始化（main.js)

對(duì)于單頁(yè)應(yīng)用，推薦使用官方庫(kù) vue-router。詳細(xì)請(qǐng)查看它的文檔。

添加route配置

import VueRouter from "vue-router"
import VueResource from "vue-resource"

import Hello from "./components/Hello.vue"
import Page from "./components/Page.vue"

//注冊(cè)兩個(gè)插件
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter()

// 路由map
router.map({
  "/hello": {
    component: Hello
  },
  "/page": {
    component: Page
  }
})

router.redirect({
  "*": "/hello"
})

router.start(App, "#app")//設(shè)置啟動(dòng)頁(yè)面

index.html

應(yīng)用route

創(chuàng)建＆應(yīng)用組件

如果你喜歡預(yù)處理器，甚至可以這么做：

定義View:

定義Model和ViewModel:

    var vueComponent = require("../components/vue-component");
    module.exports = {
        components: {
            vueComponent
        }
    }

數(shù)據(jù)請(qǐng)求:vue-resource

//在main.js中注冊(cè)vue-resource
import VueResource from "vue-resource"
Vue.use(VueResource)

// 基于全局Vue對(duì)象使用http
Vue.http.get("http://webapi.busi.inke.com/web/live_hotlist_pc", {}).then((response) => {
    console.log("[Leo]Vue-resource:success=>", response);
}, (response) => {
    console.log("[Leo]Vue-resource:error=>", response);
});
// 在一個(gè)Vue實(shí)例內(nèi)使用$http
this.$http.get("http://webapi.busi.inke.com/web/live_hotlist_pc", {}).then((response) => {
    console.log("[Leo]Vue-resource:success=>", response);
}, (response) => {
    console.log("[Leo]Vue-resource:error=>", response);
});

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80510.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fsmStudy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C++從0到1之命名空間

閱讀 3335·2021-11-25 09:43
立即更新您的Windows PC!微軟周二補(bǔ)丁修復(fù)易受主動(dòng)攻擊的0 Day漏洞!

閱讀 3022·2021-10-15 09:43
關(guān)于這個(gè)大一結(jié)束——————

閱讀 1977·2021-09-08 09:36
CSS相關(guān)面試題——三欄等高布局

閱讀 2930·2019-08-30 15:56
設(shè)置圖片水平垂直居中

閱讀 757·2019-08-30 15:54
浮動(dòng)及浮動(dòng)相關(guān)問(wèn)題(初次)

閱讀 2697·2019-08-30 15:54
反思：我使用ID選擇器時(shí)應(yīng)該考慮這些問(wèn)題

閱讀 2988·2019-08-30 11:26
004-盒模型及文本溢出

閱讀 1258·2019-08-29 17:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue + Webpack 實(shí)踐

相關(guān)文章

webpack+vue+vux+express+lowdb實(shí)踐

ABAP system landscape和vue項(xiàng)目webpack構(gòu)建的最佳實(shí)踐

webpack 教程資源收集

**記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐【更新】**

***Vue單頁(yè)面骨架屏實(shí)踐***

發(fā)表評(píng)論

0條評(píng)論

fsmStudy

男|高級(jí)講師

TA的文章

C++從0到1之命名空間

立即更新您的Windows PC!微軟周二補(bǔ)丁修復(fù)易受主動(dòng)攻擊的0 Day漏洞!

關(guān)于這個(gè)大一結(jié)束——————

CSS相關(guān)面試題——三欄等高布局

設(shè)置圖片水平垂直居中

浮動(dòng)及浮動(dòng)相關(guān)問(wèn)題(初次)

反思：我使用ID選擇器時(shí)應(yīng)該考慮這些問(wèn)題

004-盒模型及文本溢出

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue + Webpack 實(shí)踐

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！