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  

再继续刚才步骤。
由于还有的错误没有及时保存，导致无法记录。大家还是根据错误提示多百度吧。上述过程是安装成功后记录下来的，如有错误，欢迎指出，定及时改正。
到此为止大功告成！！！！撒花撒花！！！