Ubuntu18.04搭建VUE環境 VSCode

1.nodejs下載安裝

下載更新前先更新軟件源

sudo apt-get update

安裝node

sudo apt-get install nodejs

查看版本（版本號應該在8.8以上）

nodejs -v

我這裏使用的是

2.npm安裝下載

下載安裝npm

sudo apt-get install npm

由於npm在安裝@vue/cli時速度非常慢，因此吧npm的倉庫地址改爲淘寶鏡像

npm config set registry https://registry.npm.taobao.org --global

設置成功以後由於下載默認的node和npm版本較低，而且在後續安裝@vue/cli時對二者版本有所要求，因此先更新版本。切記一定要先換成淘寶鏡像，否則後續過程會慢到你懷疑人生。

參考了很多博客都說在這裏要安裝cnpm但是我安裝了cnpm以後在後續過程中一直有問題，因此就直接改了倉庫地址，非常成功。

3.更新

更新npm

sudo npm i -g npm

查看版本已經是最新

更新nodejs

sudo npm install -g n
sudo n latest

4.Vue安裝

1.安裝手腳架工具@vue/cli

由於現在Vue3.x已經將vue-cli更改爲@vue/cli,因此要注意若是使用了vue-cli安裝的是2.x，可以先卸載在進行後續安裝

npm uninstall vue-cli -g

清理緩存 加上管理員權限，我在這裏沒加就失敗了

sudo npn cache clean --force  

安裝@vue/cli

sudo npm install -g @vue/cli

安裝@vue/cli-service

sudo npm install -g @vue/cli-service-global 

測試Vue版本號

vue -V

5.在VSCode中下載Vtur插件

此處默認大家都有VSCode編輯器

創建vue文件測試是否搭建成功。我在此處隨便寫了個Vue文件（App.vue）進行測試

<template>
    <div>
        測試
    </div>    
</template>
<script>

export default {
    
    data(){
        return{
            msg:'hello world'
        }
    }
}
</script>
<style>
    div{
        background-color: red;
    }
</style>

打開終端運行切換到文件目錄下，我這裏是在桌面下的VUE文件夾中

cd  桌面/VUE

運行

vue serve App.vue  
//我此處的文件爲App.vue

在瀏覽器中輸入相應的網址

6.錯誤集錦

搭建過程中跌跌撞撞
1.出現

npm ERR! A complete log of this run can be found in:npm ERR!     /home/galaxy/.npm/_logs
2020-03-15T04_08_57_951Z-debug.log

的錯誤
首先切換到對應目錄下刪除log文件

cd   /home/galaxy/.npm/_logs
rm -rf 2020-03-15T04_08_57_951Z-debug.log

清除緩存

sudo npn cache clean --force  

再繼續剛纔步驟。
由於還有的錯誤沒有及時保存，導致無法記錄。大家還是根據錯誤提示多百度吧。上述過程是安裝成功後記錄下來的，如有錯誤，歡迎指出，定及時改正。
到此爲止大功告成！！！！撒花撒花！！！