Linux環境搭建vue開發環境


本文參考此博客(感謝此博主):https://blog.csdn.net/dingpeiqiang/article/details/87829886

node.js安裝

Vue.js是一套構建用戶界面的 “漸進式框架”。與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,並且非常容易學習,非常容易與其它庫或已有項目整合。2016年,Vue同Angular、React形成三足鼎立的局面,讓前端的開發者顧不暇接,接下來了解一下Vue的環境搭建。

Vue項目通常通過webpack工具來構建,而webpack命令的執行是依賴node.js的環境的,所以首先要安裝node.js。

node.js的官方地址為:https://nodejs.org/en/download/

Linux服務器上創建vue文件夾,切換到vue文件目錄

mkdir /usr/local/mjtabu/vue

cd vue

Linux環境下載node.js,鏈接為剛剛在官網復制的下載鏈接

wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz

 解壓已下載文件

tar -xf node-v14.15.4-linux-x64.tar.xz

賦予解壓后文件執行權限

chmod -R +x node-v14.15.4-linux-x64

建立軟連接,變為全局

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/npm /usr/local/bin/ 

rm -f /usr/local/bin/node

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/node /usr/local/bin/

檢驗nodejs是否已變為全局,若出現以下界面則表示node.js安裝成功。

node -v

npm -v

cnpm的安裝

安裝完node之后,npm包含的很多依賴包是部署在國外的,下載速度超級慢。所以最好安裝cnpm。

cnpm:是淘寶對npm的鏡像服務器。

cnpm 安裝命令

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

若是直接 cnmp -v 則會失敗,原因需要再加一步   建立軟連接

rm -f  /usr/local/bin/cnpm

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/cnpm /usr/local/bin/cnpm 

cnpm

cnpm -v

若出現以下信息,則表示cnpm安裝成功

vue-cli的安裝

vue-cli是vue官方提供的一個命令行工具,可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需一分鍾即可啟動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

vue-cli 安裝命令

cnpm install -g vue-cli

同理,創建 vue-cli 軟鏈接

rm -f /usr/local/bin/vue

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/vue /usr/local/bin/vue

輸入vue,查看是否安裝完成

vue 

新建一個Vue項目測試(以下操作未測試完成)

新建一個項目文件夾,命名為 vue-demo,cd到此文件夾,按照如下操作進行初始化

vue init webpack vue-demo

cd到vue-demo這個項目的目錄中,執行以下命令

npm run dev

 

理論上啟動了就能用 http:\\localhost:8080 啟動了, 若是在centOS上沒有辦法運行

解決方式:vue-demo >config>index.js  修改host為127.0.0.1 指定ip地址就可以了

Linux命令校驗效果(...)

curl  http://localhost:8080

Linux服務器開放以上配置端口后就可以在瀏覽器訪問了

 

 

當然也可以用npm安裝http-server測試你寫的網頁的效果

npm install -g http-server

命令行輸入http-server,然后在瀏覽器上就可以訪問

http-server


免責聲明!

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



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