摘要:包中導出的默認是運行時構建。當然,我們期待的是只修改代碼,不用重新運行命令,甚至不需要刷新瀏覽器即看到代碼的改動效果,這時候需要新的插件來配置實現的熱重載。
首先已經全局安裝了node/vue/webpack;
新建文件夾demo4并初始化cd demo4 npm init -y
這是頁面會生成一個package.json文件。
安裝webpack及相關插件npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev npm install html-webpack-plugin --save-dev npm install vue --save
webpack-dev-server: webpack-dev-server是一款小型的Node.js Express服務器,我們使用它主要是為了實現代碼的熱重載,具體使用方法可參見webpack-dev-server使用方法,看完還不會的來找我~
vue-loader/vue-html-loader/css-loader/vue-style-loader...: webpack中loader的作用不多講,用法看文檔
vue-hot-reload-api: vue-hot-reload-api顧名思義,亦為實現vue熱重載
此時package.json中的devDependencies和dependencies應該是這樣的:
"devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.4.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.22.0", "babel-runtime": "^5.8.38", "css-loader": "^0.26.4", "vue-hot-reload-api": "^2.0.11", "vue-html-loader": "^1.2.4", "vue-loader": "^11.1.4", "vue-style-loader": "^2.0.3", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1" }, "dependencies": { "vue": "^2.2.2" }建立文件目錄
demo4 |__dist | |__js |__src | |__index.html | |__js | | |__index.js | |__components | |__hello.vue |__node_modules |__package.json |__webpack.config.js
dist: 存放生成的文件
src: 存放編輯的文件模板等
components: 存放components組件
src/index.html
Vue
src/js/index.js
import Vue from "vue"; import Hello from "../components/Hello.vue"; new Vue({ el: "#test", template: "", components: { Hello } })
src/components/Hello.vue
{{msg}}
webpack.config.js
var path = require("path"); var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: path.resolve(__dirname, "./src/js/index.js"), output: { path: path.resolve(__dirname, "./dist"), filename: "./js/[name].js" }, module: { loaders: [ { test: /.vue$/, loader: "vue-loader" }, { test: /.js$/, loader: "babel-loader", query:{ presets: "es2015" }, exclude: /node_modules/ } ] }, plugins: [ new htmlWebpackPlugin({ template: "./src/index.html", hash: true }) ] }
命令行運行webpack命令, 此時在dist文件目錄下分別生成了js/index.js和index.html,在頁面中打開index.html發現頁面有報錯: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 這是因為此時使用的是vue.runtime.common.js,這里可以閱讀以下官方文檔中的獨立構建VS運行時構建;簡單理解就是獨立構建可以自己將字符串模板(template)編譯為渲染函數(render),然后再運行時再調用編譯好的渲染函數,而運行時構建是在Vue2開始后,為了實現在服務端渲染,不依賴與瀏覽器端的DOM接口,而不允許使用template模板,因此運行時構建比獨立構建要小,但是不能使用template模板,而官方文檔中也有說明。npm包中導出的默認是運行時構建。如果希望使用獨立構建,可以添加以下代碼
webpack中 resolve: { alias: { "vue$": "vue/dist/vue.common.js" } }
這句話是添加到webpack.config.js中的,當然,我們也可以打開node_modules/vue/package.json文件,將其中的main指向"dist/vue.runtime.common.js"改為"vue/dist/vue.common.js"。
此時再重新運行webpack命令,可能還會報錯: Cannot find module "vue-template-compiler" ,此時在命令行中運行npm install vue-template-compiler即可。
在運行webpack命令,在瀏覽器中打開dist/index.html文件就可以看到代碼完美運行了。我們只需要在src/下修改我們的Hello.vue或者是index.js以及index.html文件,然后運行webpack然后刷新頁面即可看到代碼的改動效果。
當然,我們期待的是只修改代碼,不用重新運行webpack命令,甚至不需要刷新瀏覽器即看到代碼的改動效果,這時候需要新的插件來配置實現vue的熱重載。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86967.html
摘要:更新日志更新完成靜態頁面原型修復使用的正確姿勢更新添加靜態頁面更新添加使用方法請戳我主要作用就是在你開發環節在后端同學還未開發完成的情況下,提供一個。 底下評論說是標題黨,或者是光扔個github地址上來的同學我就不說什么了。你們有看看倉庫的提交記錄么?我還沒有吃撐到開個倉庫去騙star.我的出發點就是每天更新一部分代碼,教大家用我所提到的技術棧搭建一個blog,我的出發點就是這么簡單...
摘要:多語言使用了的版本,并整合了的多語言和使用者自己的多語言配置,而且會根據用戶系統的語言自動切換為中文和英文。 谷歌今天發布了一系列性感的軟件,我們也發布了一款大家期待已久的開發者工具,同樣很性感 :) iView 2.0 已經發布有兩個月了,在 2.0 發布后,npm 下載量、issues 數量都提升了很多(可以 watch 下項目,感受感受郵件量)。兩個月里,我們平均 1 周發布一個...
摘要:其實這里還是有漏洞的,坐等高手指出來微笑臉后臺沒有用生成一個完整的架構。來自不同視圖的行為需要變更同一狀態。 最近對vue很感興趣,趁閑暇時間,模仿了wunderlist里面的部分功能,編寫了前后端分離的基于vue技術棧和express的todolist小項目。寫這篇博文來總結思考下。項目所在github,可以自行參考克隆。 本人博客 總體概覽 整個項目最終做成的樣子如下: showI...
摘要:它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候,它就會直接重用完全相同的同時跳過比對。需要注意的是,中的操作必須是同步的,不可以存在異步操作的情況。 新增:哈哈,最近又推出了 vue 的文章,在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術,這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...
閱讀 1686·2021-09-22 10:02
閱讀 1931·2021-09-02 15:40
閱讀 2835·2019-08-30 15:55
閱讀 2242·2019-08-30 15:44
閱讀 3593·2019-08-30 13:18
閱讀 3224·2019-08-30 11:00
閱讀 1945·2019-08-29 16:57
閱讀 564·2019-08-29 16:41