天天看點

如何啟動一個Vue3.x項目啟動一個Vue3.x項目

1. 安裝node.js

2. cd到項目目錄下

3. npm run serve

Node.js下載下傳與安裝(npm)

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運作環境。 JavaScript本來隻能跑在浏覽器上,然後Node.js就

是一種能讓js直接運作在作業系統的工具。并且它就能夠讓JS代碼在作業系統上實作一些類似檔案操作等功能。

Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。      
npm 是JavaScript 世界的包管理工具,并且是 Node.js 平台的預設包管理工具。
(類似Python中的pip一樣。)
由于新版的nodejs已經內建了npm,是以之前npm也一并安裝好了。同樣可以通過輸入 npm -v 來測試是否成功
安裝。指令如下,出現版本提示表示安裝成功:      

更新npm至最新的穩定版本

npm install npm@latest -g      

npm常用指令:

https://segmentfault.com/a/1190000012099112

使用cnpm

因為npm安裝插件是從國外伺服器下載下傳,受網絡影響大,安裝依賴包的時候經常會出現逾時的問題。我們可以使
用cnpm 代替npm。
cnpm是淘寶團隊維護的一個完整 npmjs.org 鏡像,用來代替官方版本(隻讀),同步頻率目前為 10分鐘 一次以保證
盡量與官方服務同步。      
npm install -g cnpm --registry=https://registry.npm.taobao.org      

cnpm跟npm用法完全一緻,隻是在執行指令時将npm改為cnpm。

例如: cnpm install [email protected]

webpack介紹

webpack 就是一個把我們在後端寫的JS代碼打包成浏覽器認識的JS檔案(當然webpack 很強大它可以打包JS、
CSS、圖檔等靜态資源)。 我們并不關心打包後的JS檔案裡面的内容都是什麼,隻要它體積小、浏覽器能認識就可
以了。      
webpack安裝
我們這裡安裝的是 webpack v4+ 版本,還需要安裝CLI工具配合。我們這裡安裝的是webpack-cli 。執行下面的
指令同時安裝webpack 和webpack-cli 。      
npm install webpack webpack-cli -g -D      

啟動一個Vue3.x項目

Vue-CLI安裝:    Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)

vue-cli 是一個Vue官方提供的快速建構Vue項目的腳手架工具,能夠極大的提高開發效率。

全局安裝最新版本vue-cli

npm install -g @vue/cli      

安裝完畢後檢查vue-cli版本:

vue --version      

Vue-CLI使用

vue create 項目名稱      

接下來具體建立過程見下方GIF動圖:

使用浏覽器打開http://localhost:8080/ ,就能看到Vue項目已經搭建好了。

除了上面指令行方式建立Vue項目外,還可以使用vue ui 指令以圖形化界面建立和管理項目。

vue ui      

補充常用指令(需進入項目目錄下執行):

1. 安裝項目依賴/配置項目(拿到一個Vue項目之後先運作這個安裝包依賴)

npm install      

2. 編譯并在本地啟動一個開發環境

npm run serve      

3. 編譯并打包一個生産版本

npm run build      

4. 運作測試(前提你要寫好測試腳本)

npm run test      

5. 運作代碼檢測

npm run lint