本文參考此博客(感謝此博主):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