网站首页 » 前端开发 » 前端工具 » deepin (Linux) 系统安装 vue/cli 3.0
上一篇:
下一篇:

deepin (Linux) 系统安装 vue/cli 3.0

前言

首先声明一下,这是一篇水文,没什么技术含量,只作记录用,方便后来者,少掉坑,快速开发,不被无关紧要的事担误.如果你已经把 vue/cli 3.0 安装好,那么你就可以不用看了.
本文主要是针对 deepin (Linux) 系统用户安装 vue/cli 3.0

开始吧

不管是在 window 系统下还是在 Linux 和系统下要想安装 vue/cli 3.0,我们都必需要先安装 Node.js 和 npm , 这两个安装很简单,只要用官网下载一个资源包,解压就可以了.

https://nodejs.org/en/download/current/

点击 Linux Binaries (x64) 右边的下载链接进行下载.下载完后解压,把解压出来的文件夹放到你想要放的目录下,因为这个资源包括了node 和 npm ,所以我们接下来要做的就是
在终端执行两行代码创建软件链接就可以了.

ln -s /home/zhaoxixiong/Software/node/bin/npm /usr/local/bin/ 
ln -s /home/zhaoxixiong/Software/node/bin/node /usr/local/bin/

如果出现下面的提示

提示

ln: 无法创建符号链接’/usr/local/bin/npm’: 权限不够

此时你可以在命令行前面加上 sudo 来以管理员的身份创建软链接.

完了之后事,我们就来安装 vue/cli 3.0

npm install -g @vue/cli

安装这个需要点时间,安装过程中很有可能会提示以下警告:

警告

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/@vue/cli/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”x64″})

这个不要紧,不管它,安装完后,如果你直接使用 vue 使用的话,它会提示:

提示

bash: vue: 未找到命令

这是因为,我们还需要像上面的 node 和 npm 一样,为 vue 创建一个软链接才行.但是这里有一个问题,要想成功创建软链接,你得直接 vue 安装在哪里,执行以下命令可查看

npm config ls -l

在列出的文件内容中你可能看到

prefix = "/home/zhaoxixiong/Software/node"
preid = ""

prefix 中的路径就是 vue 的安装路径了.你会惊讶的发现它竟然和 node 和 npm 一样同在一个 bin 目录下,于是乎我们就可以顺理成章地像下面那样创建软链接了:

ln -s /home/zhaoxixiong/Software/node/bin/vue /usr/local/bin/

完了之后就可以了 使用 vue 命令来创建你的项目了.

vue create vue-project

在创建的时候我遇到了一个中断性的问题

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes

我敲了 yes 回车选择了切换到 https://registry.npm.taobao.org 之后不多久就会卡在下面这行一警告了.

警告

npm ERR! Unexpected end of JSON input while parsing near ‘…/bin/webpack.js”},”di’

虽然大概知道是什么意思,但却不知道为何为出现这种情况,更不知道如何解决.

不过,我用管理员权限进行安装,并且没有选择 https://registry.npm.taobao.org ,回车让它使用默认的 npm 来安装,竟然一路顺风,成功安装.

现在,已经在 deepin (Linux) 系统中成功安装了 vue/cli 3.0,你可以尽情地使用了.

问题总结

如果执行 npm install -g @vue/cli 命令时出现如下错误

报错

npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/abbrev npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/ansi-escapes npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/ansi-regex npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/apollo-server-errors npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/apollo-server-plugin-base npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/arr-diff npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/arr-union npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/arr-flatten npm WARN checkPermissions Missing write access to /home/xxxx/Software/node/lib/node_modules/@vue/cli/node_modules/array-filter ……

那么你可以使用

sudo npm install -g @vue/cli 来安装,如果还是出现这个错误,那么你可以选切换到 cnpm 淘宝镜像

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

然后 sudo cnpm install -g @vue/cli

安装成功后,就可以按提示进行启动了,

npm run serve
报错

Error: ENOSPC: no space left on device, watch ‘/home/xxxx/Software/node/bin/new-blog/public’ at FSWatcher.start (internal/fs/watchers.js:164:26) at Object.watch (fs.js:1232:11) at createFsWatchInstance (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:37:15) at setFsWatchListener (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:80:15) at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:232:14) at FSWatcher.NodeFsHandler._handleDir (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:414:19) at FSWatcher. (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:462:19) at FSWatcher. (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:467:16) at FSReqWrap.oncomplete (fs.js:155:5) Emitted ‘error’ event at: at FSWatcher._handleError (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/index.js:260:10) at createFsWatchInstance (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:39:5) at setFsWatchListener (/home/xxxx/Software/node/bin/new-blog/node_modules/chokidar/lib/nodefs-handler.js:80:15) [… lines matching original stack trace …] at FSReqWrap.oncomplete (fs.js:155:5)

如果出现上面的错误,那么你可以通过下面命令执行

sudo npm run serve

如果通过命令行 vue create vue-project 安装完之后,vue-project 目录有创建,但里面就只有一个 package.json 文件,那么你可以试试下面这样来创建

suod vue create vue-project

这样基本就可以完成从安装到启用 VUE 项目了

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/deepin-system-install-vue-cli-3/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END