首頁 > 曲藝

Node環境和Vue腳手架的搭建(詳細教程)

作者:由 億佰特物聯網應用 發表于 曲藝日期:2022-12-18

c語言中的並且用什麼符號表示

一、Node。js

1.什麼是Node.js?

Node(或者說 Node。js,兩者是等價的)是 JavaScript 的一種執行環境。在此之前,我們知道 JavaScript 都是在瀏覽器中執行的,用於給網頁新增各種動態效果,那麼可以說瀏覽器也是 JavaScript 的執行環境。那麼這兩個執行環境有哪些差異呢?請看下圖:

Node環境和Vue腳手架的搭建(詳細教程)

簡而言之,Node 為我們提供了一個無需依賴瀏覽器、能夠直接與作業系統進行互動的 JavaScript 程式碼執行環境!

2.下載步驟:

①下載。

下載地址:https://nodejs。org/en/,可根據

電腦系統版本、作業系統

下載適合的版本。

Node環境和Vue腳手架的搭建(詳細教程)

②安裝。

雙擊安裝包,點選Next,勾選使用許可協議,點選Next,選擇安裝位置(可根據個人情況更換路徑。繼續點選Next,點選Install,點選Finish完成安裝。

Node環境和Vue腳手架的搭建(詳細教程)

③新增環境變數。

進入環境變數,編輯【系統變數】下的變數【Path】

Node環境和Vue腳手架的搭建(詳細教程)

安裝完成後可以進行驗證:win + r ,輸入命令:node -和npm -v(npm),彈出如:v16。14。0,那麼就安裝成功了,一般來說npm速度相對較慢,繼而使用國內的淘寶映象,安裝命令如下:

npm install -g cnpm ——registry=https://registry。npm。taobao。org

配置環境。

現在你全域性的倉庫是安裝在c盤下的,可以透過npm list -global命令檢視;所以當你們使用npm安裝全域性模組的時候會安裝到c盤下面的資料夾,這會使得你c盤資料龐大,所以我們便可以修改預設儲存地址;但是如果你c盤本身比較大,不在乎多存的這點資料,那就可以忽略不計這一步。

在你安裝node的資料夾下新建兩個資料夾;node_cache(快取資料夾)node_global(全域性倉庫資料夾)

3.Node.js的作用

Node。js一發布,立刻在前端工程師中引起了軒然大波,前端工程師們幾乎立刻對這一項技術表露出了相當大的熱情和期待。上一次一種技術能被整個前端界如此關注那還是在幾年之前,那時候Ajax這個概念剛剛被提出來。讓JavaScript跑在server端,這個想法簡直太棒了。這下我們不用再去學那些PHP、Ruby、Java、Scala或者其他什麼對前端來說奇怪的語言,也可以輕鬆地將我們的領域擴充套件到server端,多麼美好的前景!

Node。Js的首要目標是提供一種簡單的、用於建立高效能伺服器及可在該伺服器中執行的各種應用程式的開發工具。

首先讓我們來看一下現在的伺服器端語言中存在著什麼問題。在Java、PHP或者。NET等伺服器語言中,會為每一個客戶端連線建立一個新的執行緒。而每個執行緒需要耗費大約2MB記憶體。也就是說,理論上,一個8GB記憶體的伺服器可以同時連線的最大使用者數為4000個左右。要讓web應用程式支援更多的使用者,就需要增加伺服器的數量,而web應用程式的硬體成本當然就上升了。

Node。Js不為每個客戶連線建立一個新的執行緒,而僅僅使用一個執行緒。當有使用者連線了,就觸發一個內部事件,透過非阻塞I/O、事件驅動機制,讓Node。js程式宏觀上也是並行的。使用Node。js,一個8GB記憶體的伺服器,可以同時處理超過4萬用戶的連線。

二.Vue

1.什麼是Vue?

Vue是一個MVVM的漸進式javascript框架,它是初創專案的首選前端框架。Vue的目標是透過儘可能簡單的api實現相應的資料繫結和組合的檢視元件。

Vue框架是輕量級的,有很多獨立的功能或庫,在Vue裡我們可以根據自己的專案來選用它的一些功能。Vue 的核心庫只關注檢視層,所以開發者關注的只是m-v的對映關係。

其中提到的“漸進式框架”和“自底向上增量開發的設計”是Vue開發的兩個概念。

Vue可以在任意其他型別的專案中使用,使用成本較低,更靈活,主張較弱,在Vue的專案中也可以輕鬆融匯其他的技術來開發,並且因為Vue的生態系統特別龐大,可以找到基本所有型別的工具在vue專案中使用。

2.Vue腳手架搭建

已經安裝過node。js之後和淘寶映象的話,vue的執行環境基本上就搭建好了,只需再安裝全域性的webpack(命令列:npm install webpack -g )和vue-cli腳手架工具(在命令列裡輸入:npm install -g vue-cli )就行了。

Node環境和Vue腳手架的搭建(詳細教程)

Node環境和Vue腳手架的搭建(詳細教程)

輸入 vue init webpack mypro 回車建立專案:

Node環境和Vue腳手架的搭建(詳細教程)

進入專案資料夾:cd mypro (cd + vue init webpack mypro 中的專案名字mypro),回車進入專案資料夾:

輸入: npm install 初始化,安裝依賴包node_modules

安裝完成後輸入:npm run dev 執行就行了。

3.Vue的作用

控制元件自動跟資料繫結,提交表單到後臺的時候,可以直接使用data裡面的資料值,而不需要再使用$(“#id”)那一套方法來獲取控制元件的值,對控制元件賦值也方便很多,只需要改變data的值,控制元件就會自動改變值。將複雜的介面操作,轉化為對資料進行操作。

頁面傳值和狀態管理

Vue的頁面傳值可供選擇的方法非常多,比如使用子元件屬性傳值,比如使用頁面url引數的方法傳值,或使用vuex全域性狀態管理的方法頁面傳值等等。而原生開發的時,在頁面有多個引數的時候,頁面傳值和初始化要複雜很多。而vue直接將引數儲存在物件裡面,直接給子元件的屬性或vuex儲存一個物件就行了。

模組化開發、模組化更新

就像第二點所說的,其實可以引申到模組化開發。比如一個列表頁面裡面有新增功能,有修改功能,這時我們可以透過引用子元件的形式,當子元件內容更新的時候,修改主元件的資料,比如修改了一條資料後,我們需要列表頁同時重新整理,但我們不希望改變原來列表頁的頁碼和搜尋條件。假如你用原生開發來實現這個,需要寫很多業務邏輯儲存上一個頁面的搜尋條件和頁碼這些引數,但假如你用vue開發,將變得非常簡單。

程式碼可讀性

Vue天生具有元件化開發的能力,因此不同的功能基本都是寫在不同的模組裡面,程式碼的可讀性非常高。當一個新手接手一箇舊專案的時候,基本上可以做到一到兩天就能定位到要修改的程式碼,並進行修改。

基於強大的Nodejs,新增新的元件庫,基本一句npm命令就能安裝。比如當我需要使用axios元件的時候,直接npm install axios安裝一下,就可以使用axios這個元件。熟悉maven的同學估計很容易就能理解npm工具。

主路由、子路由、主頁面、子元件的方式,可以讓我們徹底拋棄iframe。寫過前端的同學都知道,因為iframe的捲軸、和子頁面跟其他頁面的互動性這些原因、使用者體驗還是遠遠沒有單頁面架構友好。而且使用Vue非常簡單方便地實現系統選單、導航等固定佈局。

css模組化:各個元件之間,可以使用相同的樣式名,但有不同的樣式屬性。比如元件A和元件B的button都綁定了class=“btn”, 但在兩個元件裡,我們可以實現兩個不同的btn樣式屬性,互不影響。