vue-cli 最強指南

来源:https://www.cnblogs.com/ligulalei/archive/2019/04/03/10650930.html
-Advertisement-
Play Games

今天在這篇文章里,會對 vue-cli 的功能做個詳細的整理,把 vue-cli 所有的功能都列出來。註:這個是官網連接:https://cli.vuejs.org/zh/guide/ ,建議多看細看不但要看還要多想,這裡的介紹才是最全最準確的。①.vue-cli 是什麼?vue-cli 又稱為vu ...


今天在這篇文章里,會對 vue-cli 的功能做個詳細的整理,把 vue-cli 所有的功能都列出來。
註:這個是官網連接:https://cli.vuejs.org/zh/guide/ ,建議多看細看不但要看還要多想,這裡的介紹才是最全最準確的。
①.vue-cli 是什麼?
vue-cli 又稱為vue 腳手架,(我發現在起名這件事上前端從來就沒輸過)這個名字很通俗易懂。百度百科對腳手架的解釋是:腳手架是為了保證各施工過程順利進行而搭設的工作平臺。其實基建工程和軟體工程有很多東西都是相通的,軟體工程中的很多開發思想和管理方法也是從基建那邊引入的。在前端vue框架中引入腳手架這個名詞我就覺得非常好。另外從百度百科的解釋上看,也能大致猜出 vue-cli 在項目中是做什麼用的。vue-cli是一個工作平臺,在這個平臺裡面可以對項目開發進行高效的管控,使項目開發更符合標準,即使多人同時開發也能保證代碼規範要求一樣。在vue-cli這個工作平臺里,多人協作開發效率更高,產品經理再也不用擔心我寫的代碼與小伙伴的不相容了。因為有了這些優秀的框架前端也有機會能體驗到工程化編程了。其實我感覺最牛之處還是在項目遷移與備份方面。現在有了vue-cli只需要一個配置文件(package.json)和vue-cli中的幾個命令就能搭建出來一個同樣的腳手架(工作平臺)出來。
前提是得在你的電腦中先安裝好 vue-cli。
②.vue-cli 安裝
運行命令:cnpm install -g vue-cli
vue-cli 安裝之前先確定你的電腦中已經安裝好了nodejs,至於nodejs和怎麼安裝可以參考我的上一篇文章:走進vue2.0大觀園。
如果已經安裝好了nodejs,進入你的工作目錄‘E:\WorkSpace\vue2.0-tutorial’,打開命令視窗
運行命令:cnpm install –g vue-cli
cnpm 安裝命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
註:cnpm 是淘寶的安裝鏡像,在速度上會快很多
-g 是全局安裝
vue-cli 安裝完成後,就可以使用vue 命令進行項目構建搭建一個項目平臺了。
③.vue-cli 構建項目
運行命令:vue init webpack your-project
在這個命令里有個混入了一個奇怪的東西:webpack,webpack是什麼?為什麼在vue的命令里會出現webpack這個指令?
先看一下官網:https://www.webpackjs.com/

從圖上可以看出來,左側的腳本、樣式、圖片、表、資源等文件經過webpack 後變成了簡單的三類四個文件:樣式、腳本、圖片。
so,webpack的作用就是對項目中的靜態資源文件進行打包操作,按照類別進行歸納集結。經過webpack打包之後的文件結構更清晰明瞭,最重要的是可以直接在瀏覽器中運行。因為webpack 已經集成到vue-cli中了,不需要單獨安裝,但是webpack4.X之後的版本需要安裝webpack依賴,
運行命令:cnpm install webpack webpack-cli -g
輸入命令:vue init -h

可以看到有兩種構建項目的方法可供選擇,第一中就是我們用的這種,這種構建的項目是使用官方的模板進行構建的,第二種 vue init username/repo my-porject 是使用github上的模板進行構建的。這裡我們我們選擇的就是第一種。

項目構建時配置的信息詳情如下:
Project name :項目名稱,可以自定義,直接回車預設是指令中指定的項目名
Project description :項目描述,也可直接點擊回車,使用預設名字
Author:作者,可以自己指定,也可直接回車
Runtime + Compiler: recommended for most users
運行加編譯,既然已經說了推薦,就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
僅運行時,已經有推薦了就選擇第一個了
Install vue-router? (Y/n)
是否安裝vue-router,這是官方的路由,大多數情況下都使用,這裡就輸入“y”後回車即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代碼,ESLint是個代碼風格管理工具,是用來統一代碼風格的和標準的,這裡我選擇了“n”不安裝。
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測試。我選擇了“n”不安裝。
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測試。我選擇了“n”不安裝。

命令運行完成後,進入項目目錄會看到多了很多的文件,接下來就需要在這個基礎上進行項目開發。比直接進行文件夾創建和新建文件簡單多了吧。
④.vue-cli 配置講解
項目構建完成後一般是不需要再做額外的配置的,在命令行中輸入命令:cnpm run dev 進行項目啟動,然後可以在瀏覽器中打開就可以。
但是我還想把一些基本的配置在這裡做個介紹,這樣對這個構建完的項目如可配置和運行的能有個初步的瞭解。
用IDE導入剛纔構建好的項目,我在這裡用的是visual studio code,功能能滿足日常開發需要,最重要的是免費,不用擔心軟體過期全網扒拉著找註冊碼了,這種痛用過破解版的都會懂。
項目目錄結構如下圖所示:

我在截圖中用紅框標出了幾個重點,看看都是什麼?
config:這裡就是整個項目的配置中心,全局配置都是在這裡做的。
dev.env.js:開發環境使用的變數
index.js:項目運行的配置信息,比如埠、文件的生成路徑、資源的存放目錄
prod.env.js:生產環境使用的變數

// index.js 文件

'use strict' // 啟用嚴格模式
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
dev: {

// 資源路徑
assetsSubDirectory: 'static', // 靜態資源文件子目錄
assetsPublicPath: '/', // 公共靜態資源文件
proxyTable: {}, // 代理列表,在做跨域請求時會使用到

// 開發環境配置項
host: 'localhost', // 主機地址可以設置成:localhost/127.0.0.1/*.*.*.*(本機IP)
port: 8080, // 可以自定義,如果改埠被占用會啟用一個新的埠
autoOpenBrowser: false, // 是否允許自動打開瀏覽器
errorOverlay: true,
notifyOnErrors: true,
poll: false, //


/**
* Source Maps
*/

// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',

// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,

cssSourceMap: true
},

build: {
// 生產環境的首頁地址
index: path.resolve(__dirname, '../dist/index.html'),

// 生產環境路徑
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',

/**
* Source Maps
*/

productionSourceMap: true, // 是否生成map文件
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // 是否開啟文件壓縮
productionGzipExtensions: ['js', 'css'], // 壓縮文件過濾

// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

  

⑤.項目編譯打包
項目安裝完成,並且正常運行,接下來怎麼把項目上傳到伺服器上去呢?能在伺服器上訪問我們的項目文件,難道是把我們整個項目上傳上去?話說我就添加了一個文件,就把整個工程全都搞到伺服器上是不是有點崩潰。如果這樣的話,vue框架就沒有存在的理由了。
那要怎麼做?
接下來就要介紹另一個功能了,項目打包,這就是安裝webpack的原因。
運行命令:cnpm run build
運行結束後會生成一個新文件夾:dist ,這裡面的文件就是我們需要上傳到服務上去的靜態文件。
打開dist目錄,看裡面的文件和目錄結構是不是清爽多了,這裡的文件就是經過webpack打包後生成的,和上面介紹的webpack是不是對應在一起了。

⑥.vue-cli 使用總結
下麵對使用過的腳手架功能做個總結:
問:在使用 vue-cli 的時候我們共使用了幾個命令?
答:三個。
1.cnpm install -g vue-cli (vue-cli 安裝)
2.vue init webpack your-project (項目構建)
3.cnpm run build (項目編譯打包)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1. compile 需要改成 implementation 或者 api例:implementation 'com.android.support:support-v4:23.4.0'詳細規則 https://blog.csdn.net/yuzhiqiang_1993/article/detail ...
  • 摘自cocos 一、什麼是持久化 所謂的持久化,就是將數據保存到硬碟中,使得在應用程式或機器重啟後可以繼續訪問之前保存的數據。 二、沙盒是什麼 2.1 沙盒簡介及獲取沙盒路徑 沙盒(sandbox):每一個App都有一個存儲空間。iOS系統為每個應用程式創建自己的目錄,每個應用程式只能訪問自己的目錄 ...
  • 本文最初於 2018 09 21 發佈於 "知乎" ,後在 "《重學前端》" 專欄的學習中,重新複習整理,發佈於 "Github" 上,並計劃寫一系列前端學習相關的文章。歡迎 star 。 HTML 語義化 簡單來說,我們可以理解為:用正確的標簽做正確的事情。 例如: 段落用 p 標簽,標題用 h ...
  • var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',這段是為了獲取移動端屏幕是否翻轉(手機重力感應等引起屏幕長寬變化之類的) 'orientationchange' in window 這個是判 ...
  • 前言 該從何說起呢?想寫博客好久了,正好這個學期課很少(大三),可以靜下心來寫點東西(雖然事情依舊很多),總感覺記錄和分享是一件很酷的事情。第一篇博客,第一次使用Markdown寫博客,第一次使用IDEA,所以有什麼錯誤的地方請指出。 一.原生ajax 關於AJAX = Asynchronous J ...
  • 一、CSS是什麼? 它是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的電腦語言。CSS為HTML標記語言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。 ...
  • 我們在寫webpack配置文件的時候,應該有註意到經常用到loader這個配置項,那麼loader是用來做什麼的呢? loader其實是用來將源文件經過轉化處理之後再輸出新文件。 如果是數組形式的話,它的執行順序是相反的,最後一個loader最早被調用,下一個loader傳入的是上一個loader的 ...
  • 什麼是正則表達式: 1、正則表達式是由一個字元序列形成的搜索模式。 2、當你在文本中搜索數據時,你可以用搜索模式來描述你要查詢的內容。 3、正則表達式可以是一個簡單的字元,或一個更複雜的模式。 4、正則表達式可用於所有文本搜索和文本替換的操作。 5、JavaScript 中的正則表達式用 RegEx ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...