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