Vue + Webpack 實踐

fsmStudy 發布于2019-08-20 11:19 / 1906人閱讀

摘要：模塊熱加載是的一個非常碉堡的特性，將會為我們的單頁應用帶來極大的便利。這是一個生態系統中一個偉大創舉。

Vue全家桶 參考

vue-tutorial

Vue+Webpack開發可復用的單頁面富應用教程

Vue+Webpack使用規范
對比其他框架

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

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

可以在 Webpackbin.com 上在線嘗試！
chrome開發工具 : vue-developertools

安裝

我們將會使用webpack去為我們的模塊打包，預處理，熱加載。如果你對webpack不熟悉，它就是可以幫助我們把多個js文件打包為1個入口文件，并且可以達到按需加載。這就意味著，我們不用去擔心由于太多的組件，導致了過多的HTTP請求，這是非常有益于產品體驗的。但，我們并不只是為了這個而使用webpack，我們需要用webpack去編譯.vue文件，如果沒有使用一個loader去轉換我們.vue文件里的style，js，html，那么瀏覽器就無法識別。

模塊熱加載是webpack的一個非常碉堡的特性，將會為我們的單頁應用帶來極大的便利。

通常來說，當我們修改了代碼刷新頁面，那應用里的所有狀態就都沒有了。這對于開發一個單頁應用來說是非常痛苦的，因為需要重新在跑一遍流程。如果有模塊熱加載，當你修改了代碼，你的代碼會直接修改，頁面并不會刷新，所以狀態也會被保留。

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

我們過去通常需要使用npm下載一堆的依賴，但是現在我們可以選擇Vue-cli。這是一個vue生態系統中一個偉大創舉。這意味著我們不需要手動構建我們的項目，而它就可以很快地為我們生成。

使用腳手架工具 vue-cli 可以快速地構建項目：單文件 Vue 組件，熱加載，保存時檢查代碼，單元測試等。

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

$ npm install -g vue-cli

使用腳手架初始創建項目

$ vue init

Example:*創建一個webpack項目*

$ vue init webpack my-project

項目模版下載好了之后需要安裝項目用到的依賴包

$ cd my-project
$ npm install

這時可以將項目運行起來看看效果了

$ npm run dev

這一行命令代表著它會去找到package.json的scripts對象，執行node bulid/dev-server.js。在這文件里，配置了Webpack，會讓它去編譯項目文件，并且運行服務器，我們在localhost:8080即可查看我們的應用。

vue-cli 構建的目錄結構

.
├── 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

更多內容參照https://vuejs-templates.github.io/webpack

Vue 指令

常用指令:

v-if

v-show

v-else

v-for

v-bind

v-on

v-model
更多指令請移步Vue 指令

初始化（main.js)

對于單頁應用，推薦使用官方庫 vue-router。詳細請查看它的文檔。

添加route配置

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

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

//注冊兩個插件
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")//設置啟動頁面

index.html

應用route

創建＆應用組件

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

定義View:

定義Model和ViewModel:

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

數據請求:vue-resource

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

// 基于全局Vue對象使用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);
});
// 在一個Vue實例內使用$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);
});

GPU云服務器云服務器 vue20開發實踐 webpack _webpack webpack cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80510.html

webpack+vue+vux+express+lowdb實踐

摘要：花了一天時間，做了一套加班報名系統，前端基于，后端基于。如果需求對視覺要求不高，還是非常推薦把引進到項目中的。提供了各種各樣的組件，基本上拿來就能用。需要注意的是，讀寫文件默認都是同步的，將的寫配置成異步寫入能極大的提升性能。花了一天時間，做了一套加班報名系統，前端基于webpack+vue+vux，后端基于express+lowdb。以前在項目中也都接觸過webpack+vue，第...

awesome23 2019-07-25 13:47 評論0 收藏0
ABAP system landscape和vue項目webpack構建的最佳實踐

摘要：基于的一般都有，和三種類型的系統。而前端項目的設置也類似。而無論是開發，測試還是生產，代碼都相同。之所以要引入也是類似面向對象的編程思想，把和環境一些通用的配置抽取出來，避免在和里重復定義。基于Netweaver的ABAP transport route一般都有dev，test和prod三種類型的系統。 showImg(https://segmentfault.com/img/rem...

yeooo 2019-08-23 12:36 評論0 收藏0
webpack 教程資源收集

學習的過程中收藏了這些優秀教程和的項目，希望對你有幫助。 github地址, 有不錯的就更新官方文檔中文指南初級教程 webpack-howto 作者：Pete Hunt Webpack 入門指迷作者：題葉　 webpack-demos 作者：ruanyf 一小時包教會 —— webpack 入門指南作者：VaJoy Larn　　 webpack 入門及實踐作者：...

Backache 2019-08-21 14:05 評論0 收藏0
記一次vue-webpack項目優化實踐【更新】

摘要：優化空間不大主要關注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優化空間較小。當然，從整體優化的大維度上來說優化的點還有很多，這個文章繼續更新下去。項目現狀項目是一個數據監測平臺，引入了ehcart和three.js 負責項目的數據可視化；打包后，體積高達2.1M，這個體積相比于我的項目規模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
Vue單頁面骨架屏實踐

github 地址： VV-UI/VV-UI 演示地址: vv-ui 文檔地址：skeleton 關于骨架屏介紹骨架屏的作用主要是在網絡請求較慢時，提供基礎占位，當數據加載完成，恢復數據展示。這樣給用戶一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。這里主要通過代碼為大家展示如何一步步做出這樣一個骨架屏： show...

DevTTL 2019-08-02 16:00 評論0 收藏0