Vue-cli

FuisonDesign 發布于2019-08-21 11:53 / 508人閱讀

摘要：中一些優化措施在一個以后綴結尾的文件，里面可以寫使用，可以識別不同的語言塊，輸出到模塊輸出到的該能夠將模板轉換成的函數。被稱為運行時構建版本，包含了所有的特點，體積比全功能版本小。

vue-cli 中一些優化措施 Single File Components(SFCs)

,在一個以.vue 后綴結尾的文件，里面可以寫js,css,html,使用vue-loader ，可以識別不同的語言塊，script輸出到babel-loader,模塊輸出到vue的vue-template-loader,該loader能夠將模板轉換成JavaScript的render函數。

Vue.runtime.js

被稱為vue運行時構建版本，包含了Vue所有的特點，體積比全功能版本小20kb。默認情況下使用的是運行時構建版本，所以當你使用 import vue from "vue" 來引用Vue的時候，你得到的是運行時構建版本，不過你能通過 alias 配置項來改變。

production環境中去掉warn 和error信息

`if(process.env.NODE_ENV !== "production") {
   warn(("Error in " + info + ": "" + (err.toString()) + """), vm);
}`

從這里可以看出來，如果process.env.NODE_ENV 設置成production，那么提示信息在編譯過程中就會被忽略，

DefinePlugin

通過它來設置process.env.NODE_ENV的值，

使用UGlifyJsPlugin

減小代碼體積，去掉不必要的代碼塊。

     if (process.env.NODE_ENV === "production") {
             module.exports.plugins = (module.exports.plugins || []).concat([
               new webpack.DefinePlugin({
                 "process.env": {
                   NODE_ENV: ""production""
                 }}),
               new webpack.optimize.UglifyJsPlugin()
             ])
        }

Vendor file

Common Chunks插件能把你的Vendor代碼（例如Vue.js這些不會經常改動的依賴包）和應用代碼（每次開發過程中都會改動的代碼）分離開。
你能配置插件檢查一個依賴是否來自于node_modules，如果是，那就打包到vendor.js 文件。

hash

,也被稱為指紋當文件變動后，丟棄緩存，默認情況下，只有當一個緩存文件過期，或者用戶手動清除緩存，瀏覽器才會重新從服務器請求文件，如果服務器提示文件已經改動，那文件才會重新被下載（如果返回304則不會）。為了避免不必要的請求，我們可以在每次文件內容改動時，改變文件的名字，從而強制瀏覽器重新下載，通過在文件名稱后面添加一個"指紋":hash，我們可以非常容易達到這個目的。

        
             output: {
             filename: "[name].[chunkhash].js"
            },

HTML Webpack Plugin

這個插件能在構建過程中自動在你的HTML文件里插入對構建文件的引用。
先來把構建文件中的引用去掉

     new HtmlWebpackPlugin({
         filename: "index.html"
         template: "index.html",
         inject: true,
         chunksSortMode: "dependency"
        })

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

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

深入認識vue-cli：能做的不僅僅是初始化vue工程

摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個工程，完全不需要擔心繁復的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運行的模板，就能夠通過進行工程的初始化。相信對于大部分使用過VueJS的同學來說，vue-cli是他們非常熟悉的一個工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個vue工程，完全不需要...

AlienZHOU 2019-08-21 17:09 評論0 收藏0
vue-admin自定義后臺管理系統(二)之vue-cli3創建前端項目

摘要：自定義后臺管理系統二之創建前端項目安裝官方文檔使用創建項目安裝完后請使用測試版本是不是版本你也可以通過命令以圖形化界面創建和管理項目在瀏覽器中訪問網址查看圖形化界面配置項目名包管理器，是文件夾已存在是否覆蓋初始化等信息選擇 vue-admin自定義后臺管理系統(二)之vue-cli3創建前端項目安裝vue-cli3 vue-cli官方文檔使用vue-cli3創建vue-admin項...

XUI 2019-08-19 11:08 評論0 收藏0
vue-cli3.x 新特性及踩坑記

摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 評論0 收藏0
vue腳手架vue-cli的卸載與安裝方式

　　電腦之前安裝的vue-cli版本太低，現在要改換成最新版本，那么就需要先將舊版本卸載，安裝新版本。vue-cli：vue3.0之前版本使用此名稱　　@vue/cli：vue3.0之后版本包括3.0版本使用此名稱　　以下列舉npm和yarn指令的方式：　　卸載指令：　　//卸載3.0之前的版本　　npmuninstall-gvue-cli 　　yarnglobalremovevue-cli 　...

3403771864 2022-09-22 22:21 評論0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我們該如何去配置自己的項目了其實這一切都是因為的項目初始化，幫開發者已經解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區別 vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下 ...

xuweijian 2019-08-29 16:28 評論0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我們該如何去配置自己的項目了其實這一切都是因為的項目初始化，幫開發者已經解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區別 vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下 ...

UsherChen 2019-08-26 12:18 評論0 收藏0