vue源碼網

VuePress-Vue驅動的靜態網站生成器入門教程

VuePress由兩部分組成：第一部分是一個極簡靜態網站生成器(opensnewwindow)，它包含由Vue驅動的主題系統和插件API，另一個部分是為書寫技術文檔而優化的默認主題，它的誕生初衷是為了支持Vue及其子項目的文檔需求。

每一個由VuePress生成的頁面都帶有預渲染好的HTML，也因此具有非常好的載入性能和搜索引擎優化（SEO）。同時，一旦頁面被載入，Vue將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需載入。

事實上，一個VuePress網站是一個由Vue、VueRouter和webpack驅動的單頁應用。如果你以前使用過Vue的話，當你在開發一個自定義主題的時候，你會感受到非常熟悉的開發體驗，你甚至可以使用VueDevTools去調試你的自定義主題。

在構建時，我們會為應用創建一個服務端渲染（SSR）的版本，然後通過虛擬訪問每一條路徑來渲染對應的HTML。這種做法的靈感來源於Nuxt(opensnewwindow)的nuxtgenerate命令，以及其他的一些項目，比如Gatsby

1、創建並進入一個新目錄

2、使用你喜歡的包管理器進行初始化

3、將VuePress安裝為本地依賴

我們已經不再推薦全局安裝VuePress

4、創建你的第一篇文檔

5、在package.json中添加一些scripts

這一步驟是可選的，但我們推薦你完成它。在下文中，我們會默認這些scripts已經被添加。

6、在本地啟動伺服器

VuePress會在(opensnewwindow)啟動一個熱重載的開發伺服器。

現在，你應該已經有了一個簡單可用的VuePress文檔。接下來，了解一下推薦的目錄結構和VuePress中的基本配置。

VuePress遵循「約定優於配置」的原則，推薦的目錄結構如下：

如果沒有任何配置，這個網站將會是非常局限的，用戶也無法在你的網站上自由導航。為了更好地自定義你的網站，讓我們首先在你的文檔目錄下創建一個.vuepress目錄，所有VuePress相關的文件都將會被放在這里。你的項目結構可能是這樣：

一個VuePress網站必要的配置文件是.vuepress/config.js，它應該導出一個JavaScript對象：

對於上述的配置，如果你運行起devserver，你應該能看到一個頁面，它包含一個頁頭，裡麵包含一個標題和一個搜索框。VuePress內置了基於headers的搜索——它會自動為所有頁面的標題、h2和h3構建起一個簡單的搜索索引。

你也可以使用YAML(.vuepress/config.yml)或是TOML(.vuepress/config.toml)格式的配置文件。

一個VuePress主題應該負責整個網站的布局和交互細節。在VuePress中，目前自帶了一個默認的主題（正是你現在所看到的），它是為技術文檔而設計的。同時，默認主題提供了一些選項，讓你可以去自定義導航欄（navbar）、側邊欄（sidebar）和首頁（homepage）等，

由於VuePress是一個標準的Vue應用，你可以通過創建一個.vuepress/enhanceApp.js文件來做一些應用級別的配置，當該文件存在的時候，會被導入到應用內部。enhanceApp.js應該exportdefault一個鉤子函數，並接受一個包含了一些應用級別屬性的對象作為參數。你可以使用這個鉤子來安裝一些附加的Vue插件、注冊全局組件，或者增加額外的路由鉤子等：

覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧

看你自己的需要咯，

比如前端的跟vue搭配一起的，有vue-router（路由，這個就不解釋了）,vuex（全局變數，也不詳細解釋了）。可能還有框架？比如element-ui，或者vuetify這樣的。

後端的話如果用node的就有express,koa這樣的。而後端的，可能還涉及到一些數據的存儲之類的，又會涉及到一個資料庫的插件，比如ORM，NEDB這樣的。

在本章中，我們能學到：

公眾號《帥帥的Python》回復《數據加密》獲取源碼

我們在網上搜索md5加密，會出來很多的網站，但是都是關於單個字元的的加密，其中加密演算法有md5和sha加密。但是當我有1萬條數據，如何加密，總不能一條一條的復制粘貼過去加密，這很不現實。

小凡決定先參考這些網站做一個簡單的字元串加密網站，然後再做關於Excel文件的加密網站。

我們看這些網站都是由兩個輸入框，中間加上選項組成的，比如下面這種：

我們可以用element中的組件繪制出這樣的頁面：

繪制輸入字元串的文本框：

同理，我們可以繪制出加密後的文本框：

form表單：

下拉框，選擇加密的方式：

單選框：

按鈕：

後端我們用flask寫一個介面，這個介面就是用來將前端輸入的字元串發送給加密的函數，我們需要開發一個地址，使用POST方法，並且接受傳遞的參數。

啟動後端服務，即可訪問到網站。

小凡不滿足於只能加密字元串，接下來，小凡要思考如何加密Excel文件？

使用框架時必須熟知框架指令特性！很重要；

Bootstrap+jQuery是很好的選擇！

庫：?????1.i18n(雙語言切換)；

?????????2.vue-router(路由）；

?????????3.vuex(狀態管理，需要進行雙語言切換監聽變化)；

?????????4.ElementUI(餓了么以電腦端為主得UI框架)；

?????????5.sass(css預處理)；

?????????6.echarts(需要K線圖，個人推薦不要用echarts,太大)；

?????????7.axios(相對於fetch兼容性好，請求數據)

IE的坑：1.走馬燈之前用的是swiper的，結果兼容性不好，4.0+兼容不好，3.0主要以移動端為主，

????????之後換成了ElementUI的走馬燈又引導出無法覆蓋ElementUI的樣式，因為VUE是默認全局覆蓋局部，再加一個style，不要加scoped,ElementUI是全局引入！?解決問題。

????????2.經驗不足，IE9不支持flex,坑、坑、坑移動端寫習慣了！

????????3.多行文本省略只支持webkit內核瀏覽器，又是坑，用js控制長度搞定！

????????4.低版本兼容引入babel-polyfill，將build?webpack.base.conf.js里entry修改為entry:{'babel-polyfill':'babel-polyfill',app:'./src/main.js'},

??????5.使用axios低版本兼容?es6-promise包，在main.js里引用

????????????????importpromisefrom'es6-promise'

????????????????promise.polyfill()

打包：1.history模式：需要伺服器端配置請看官網；不需要改任何東西，路由里加mode:history即可

??????2.hash模式：將config里index.js里的assetsPublicPath:'/'??改為assetsPublicPath:'./',即可訪問靜態資源；

??????3.打包體積：將config里index.js里的proctionSourceMap:true,改為?proctionSourceMap:false，或者待打包完之後手動刪除Map文件；

??????4.路由懶載入（具體看官網很簡單）；

??????5.第三方包分離將build?webpack.base.conf.js里添加

????????????????????externals:{；

??????????????????????'echarts':"echarts"

?????????????????????},

??????6.打包後css背景圖無法訪問，將build??utils.js里添加?publicPath:'../../',

????7.sass配置（webpack.base.conf.js）

????{test:/.scss$/,loaders:["style","css","sass"]},

如有寫錯的地方歡迎大家評論

網站搭建框架之vue

Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。

對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。

引入vue.js的寫法

Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入

，而v-html則會對標簽進行編譯，只顯示標簽內的內容。

至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。

V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟

而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。

V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。

除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中

通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。

（組件書寫格式）

（組件整合）

（注冊路由）

路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。

而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。

通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。

通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。

『貳』 Vue.js官方插件Volar 1.0正式發布，代號Nika

Volar 1.0正式發布，代號Nika

2022年10月10日，Vue.js官方插件Volar 1.0正式發布，這一版本帶來了多方面的更新和改進，旨在提升用戶體驗和開發效率。以下是Volar 1.0的主要更新內容：

一、功能更新

• 為Vite和Nuxt 3 Preview實現新功能：Volar 1.0為Vite和Nuxt 3 Preview實現了Goto Code和Highlight Selection Dom Elements功能，這些功能有助於開發者更快速地定位和理解代碼。
• Component Preview：實現了Component Preview功能，允許開發者在編輯器中預覽組件的渲染效果，無需離開編輯器環境。
• 新增format.initialIndent設置：新增了format.initialIndent設置，允許開發者指定SFC blocks的初始縮進，以滿足不同的編碼風格需求。
• Web IDE支持：Volar 1.0現在支持Web IDE，使得開發者可以在線使用Volar進行Vue.js開發。
• 不再內置支持：在Volar 1.0中，的支持不再內置，需要安裝@volar/vue-language-plugin-pug插件才能使用。

二、開箱即用改進

• 預設改進：Volar 1.0的預設不再需要"jsx": "preserve"，並且不會與@types/react沖突（除非明確啟用vueCompilerOptions.jsxTemplates）。預設總是以defineComponent()包裝Component Options，使得代碼更加規范。
• 未知Component Tag顯示改進：不再以警告色顯示未知Component Tag，減少了不必要的干擾。
• JS組件中Template TypeScript支持改進：改進了JS組件中的Template TypeScript支持，提升了類型檢查的准確性和穩定性。
• 自動檢測項目設置問題：Volar 1.0減少了對閱讀README的依賴，現在會自動檢測常見的項目設置問題（例如錯誤地設置vueCompilerOptions.target），並在發現問題時在狀態欄提示，幫助開發者快速定位和解決問題。

三、UX/DX改進

• Takeover mode改進：啟用Takeover mode時不再彈出提示，減少了用戶的操作負擔。
• 命令改進：提供了更快的"Reload Project"命令代替"Restart Vue server"，以及新的"Show Virtual Scripts"命令代替"Write Virtual Files"，提升了命令的效率和易用性。
• 增量更新：實現了增量更新過去的診斷結果，防止了煩人的閃爍問題，提升了用戶體驗。
• 工作區支持改進：支持在不重啟伺服器的情況下添加或切換工作區，使得開發者可以更加靈活地管理多個工作區。
• Name casing tool改進：簡化了Name casing tool在狀態欄的顯示方式，並且現在也支持Prop name casing轉換，提升了工具的使用便捷性。

四、TypeScript改進

• 支持vue-tsc --watch：Volar 1.0現在支持vue-tsc --watch命令，使得開發者可以實時監視TypeScript文件的變更並自動進行類型檢查。
• 支持Inlay Hints：支持了Inlay Hints功能，可以在代碼中直接顯示類型信息、參數信息等，提升了代碼的可讀性和可維護性。
• 支持Find File References：支持了Find File References功能，允許開發者快速找到文件中引用的其他文件或代碼片段。
• 支持JavaScript and TypeScript Nightly：支持了最新的JavaScript和TypeScript Nightly版本，使得開發者可以體驗到最新的語言特性。
• 解決Template引用類型問題：解決了無法在Template中引用類型的問題，提升了類型系統的完整性和准確性。
• 新增vueCompilerOptions.strictTemplates選項：新增了vueCompilerOptions.strictTemplates選項，支持更嚴格的Template type checking，在使用未知的Component Tag和Props時會報告錯誤，有助於提升代碼的健壯性。

五、性能改進

• SourceMap mapping性能改進：大量改善了SourceMap mapping性能，提升了代碼調試的效率和准確性。
• 增量更新SFC AST和Template AST：實現了SFC AST和Template AST的增量更新，減少了不必要的重新解析和生成操作，提升了性能。
• 簡化Template生成的代碼：簡化了Template生成的代碼，降低了每個Vue文件產生的內存佔用，提升了性能。
• Monorepo多個TS project共用TS SourceFile實例：為Monorepo項目中的多個TS project共用了TS SourceFile實例，減少了內存佔用和編譯時間。
• 移植tsserver自動導入緩存邏輯：移植了tsserver的自動導入緩存邏輯，加快了自動完成的速度。
• 移植tsserver基於Named Pipe的Cancellation Token實現：移植了tsserver基於Named Pipe的Cancellation Token實現，解決了LSP請求阻塞的問題，提升了性能。
• 優化Bundle降低包大小：優化了Bundle，降低了包大小，並且使得插件啟動速度更快。

六、通用的Language Server框架

• 核心代碼與框架無關：Volar的核心代碼現在與框架無關，可以使用Volar為Vue以外的語言實現語言伺服器。
• 示例實現：在repo的examples目錄中，基於svelte2tsx分別實現了svelte-tsc、svelte-langauge-server等示例。還有一個vue-and-svelte-language-server示例，展示了如何在單個Language Server中同時支持Vue和Svelte。

七、VueLanguagePlugin API

• 支持vueCompilerOptions.plugins選項：VueLanguagePlugin API現在支持vueCompilerOptions.plugins選項，允許指定額外plugin來更改virtual code的生成方式。
• codegen API使用muggle-string：VueLanguagePlugin的codegen API使用了muggle-string而不是magic-string。雖然muggle-string在早期版本中缺乏主要功能，但它與Volar解耦，因此可以獨立發展。

八、LanguageServicePlugin API

• 自定義plugin：可以在volar.config.js中添加plugin來更改language server的行為，例如將使用的formatter改為Prettier。
• 常用plugins維護：有一個單獨的repo用來維護常用的plugins，方便開發者使用和管理。

九、外部工具支持

• @volar/vue-typescript：為prettier-plugin-organize-imports公開了organizeImports API，方便開發者在格式化代碼時組織導入語句。
• @volar/vue-language-core：為VSCode以外的IDE公開了vue-tsconfig.schema.json，使得其他IDE也可以使用Vue的TypeScript配置。
• vue-component-meta：實現了vue-component-meta，用於UI Library文檔生成，方便開發者生成和維護組件文檔。

十、未來計劃

• 改進核心框架：計劃在v2.0中改進核心框架，讓其他需要實現Tooling的語言更容易地利用Volar所做的努力。
• 文檔網站：計劃建設文檔網站，提供更加詳細和系統的文檔支持。
• 改進Bug report流程：計劃改進Bug report流程，使得開發者可以更加便捷地報告和跟蹤問題。
• 支持全局安裝LangaugeServicePlugin：計劃支持全局安裝LangaugeServicePlugin，提升插件的可用性和靈活性。
• 基於Bun的Language Server：計劃探索基於Bun的Language Server實現，以提升性能和穩定性。
• 增量更新template codegen：計劃實現增量更新template codegen，減少不必要的編譯和生成操作。
• 性能改進：計劃繼續探索TypeScript和LSP源代碼中的性能改進機會，以持續提升Volar的性能和用戶體驗。