如何啟動一個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

cnpmnpm用法完全一致,只是在執行命令時將npm改為cnpm

例如: cnpm install bootstrap@3.3.7

 

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

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM