? ? Vue.js目前是前端技術(shù)比較火熱的開發(fā)框架，是一個(gè)基于JavaScript的前端開發(fā)框架，它可以輕松地構(gòu)建大型的單頁(yè)面應(yīng)用程序。因?yàn)轫?xiàng)目需要在此記錄一下Ubuntu下如何搭建Vue開發(fā)環(huán)境。
目錄
1.nodejs + npm安裝
2.安裝CNMP（非必要）
3.Vue安裝
4.創(chuàng)建程序軟連接
5.創(chuàng)建Vue項(xiàng)目
5.部署Vue項(xiàng)目
（1）啟動(dòng)nginx并測(cè)試聯(lián)通性
?（2）安裝依賴并構(gòu)建項(xiàng)目
（3）將dis目錄拷貝到nginx服務(wù)器運(yùn)行目錄下
（4）修改nginx配置文件
（5）重新運(yùn)行nginx服務(wù)器
1.nodejs + npm安裝
Node.js是JavaScript運(yùn)行環(huán)境，它能夠使我們?cè)诜?wù)器端運(yùn)行JavaScript。
mkdir??node-npm-vue
cd?node-npm-vue
wget https://registry.npmmirror.com/-/binary/node/latest-v16.x/node-v16.15.0-linux-x64.tar.gz
tar -zxvf node-v16.15.0-linux-x64.tar.gz
cd?cd node-v16.15.0-linux-x64/bin/
npm升級(jí)方式：?
npm install -g npm@9.8.0?
2.安裝CNMP（非必要）
? ? ?由于NMP源都在國(guó)外，下載相關(guān)資源很慢，所以建議用國(guó)內(nèi)的淘寶NPM鏡像（http://npm.taobao.org/）通過(guò)cnmp命令安裝的包都會(huì)從淘寶NMP下載，速度很快?！ ?br> npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完之后，安裝模塊的命令就變?yōu)椋?br> cnpm install [name]
同步模塊命令為：
cnpm sync connect
3.Vue安裝
開發(fā)Vue項(xiàng)目，需要全局安裝Vue.js的腳手架工具vue-cli。腳手架工具說(shuō)法很形象，腳手架是為了保證各施工過(guò)程順利進(jìn)行而搭設(shè)的工作平臺(tái)。
npm install -g vue-cli
4.創(chuàng)建程序軟連接
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/npm /usr/bin/npm
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/cnpm /usr/bin/cnpm
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/vue /usr/bin/vue
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/vue-list /usr/bin/vue-list
5.創(chuàng)建Vue項(xiàng)目
以VScode作為IDE來(lái)開發(fā)vue項(xiàng)目
vue init webpack demo
?
?
5.部署Vue項(xiàng)目
以Nginx服務(wù)器來(lái)托管Vue應(yīng)用程序?yàn)槔M(jìn)行說(shuō)明
（1）啟動(dòng)nginx并測(cè)試聯(lián)通性
./nginx
http://127.0.0.1:8080/
?（2）安裝依賴并構(gòu)建項(xiàng)目
? ?在vue項(xiàng)目根目錄下執(zhí)行如下命令：
sudo npm install
sudo npm run build
?可以看到項(xiàng)目根目錄下生成dist文件。
（3）將dis目錄拷貝到nginx服務(wù)器運(yùn)行目錄下
cp -r ~/work/vue/demo/dist ./
（4）修改nginx配置文件
（5）重新運(yùn)行nginx服務(wù)器
killall -9 nginx
./nginx
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-576394.html
可以看到web頁(yè)面已經(jīng)變成vue頁(yè)面。?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-576394.html
到了這里，關(guān)于Ubuntu下搭建Vue開發(fā)環(huán)境，開發(fā)第一個(gè)程序并部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
