天道酬勤,学无止境

How to fix the problem with vue.js instalation

Good evening everybody! I'm trying to install vue.js on my linux mint using npm. When I run the simple command given in vue tutorial:

npm install -g @vue/cli

After some warnings the following errors appear in terminal:

 npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib' }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     and path to error log here

I understand, that "the operation was rejected by my operation system" But I have no idea, how to fix it. I will be grateful if someone helps me with this, as I suppose simple problem

评论

There is another solution that I found at another discution here o stackoverflow: npm throws error without sudo

Basicaly what is happening is that NPM does not have the privileges to access /usr/local/lib. To give it access, you could change the ownership of ~/.npm in order to belong to your current user. This could be this way:

sudo chown -R $(whoami) ~/.npm

This way you do not have to run npm as sudo, which is not recomended. I believe that it is due to vulnerabilities that are known in npm packages.

Here is an article about it: Don't use "sudo" with npm "install"

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何修复 Laravel Spark v4.0.9 上的“Vue 包版本不匹配”错误?(How do I fix a “Vue packages version mismatch” error on Laravel Spark v4.0.9?)
    问题 当我在 Laravel Spark v4.0.9 应用程序上运行npm run dev ,出现以下错误: Module build failed: Error: Vue packages version mismatch: - vue@2.0.8 - vue-template-compiler@2.2.6 This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler. If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest. 我的package.json看起来像这样: { "private": true, "scripts": { "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules -
  • 《vue.js从入门到项目实战》之Vue项目化笔记
    Vue项目化 前言: 《vue.js从入门到项目实战》的第六章和第八章。尝试一下Vue项目化的过程。 前置内容:vue的基础知识 上次学习了《vue.js从入门到项目实战》的前六章,重点学习了第二、三、四章的Vue实例和模板语法;了解了一下Vue组件(可复用的Vue实例)和Vue项目化(Vue CLI、Vue router、vuex) 接触了一部分Vue项目化的理论,这次对这一部分进行实践,边实践边记录遇到的问题。 文章目录 Vue项目化前言:理论内容Vue脚手架:Vue CLI前端路由:Vue router状态管理:Vuex 遇到的问题1npm安装淘宝镜像报错2安装vue.js报错3引入Vue模块报错4安装Vue CLI没报错5初始化项目出现了一个有意思的事6安装项目依赖出现问题 尝试运行第八章的项目 理论内容 Vue脚手架:Vue CLI 是Vue官方提供的构建工具,五分钟就可以搭建一个完整的Vue应用。 前端路由:Vue router ajax实现了无刷新的数据交互、前端路由实现了无刷新的页面跳转。ajax将web page发展成web app,而前端路由给web app增加了更多可能,如单页面应用。 Vue router是官方提供的路由管理器,致力于简化单页面应用的构建。 状态管理:Vuex 对于小型应用来说,完全没必要引入状态管理,因为这会带来更多开发成本
  • 从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境
    Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套规范的 Vite + Vue3 + TypeScript 前端工程化项目环境。 本文篇幅较长,从以下几个方面展开: 架构搭建代码规范提交规范单元测试自动部署 本项目完整的代码托管在 GitHub 仓库,欢迎点亮小星星 🌟🌟 技术栈 编程语言:TypeScript 4.x + JavaScript构建工具:Vite 2.x前端框架:Vue 3.x路由工具:Vue Router 4.x状态管理:Vuex 4.xUI 框架:Element PlusCSS 预编译:Stylus / Sass / LessHTTP 工具:AxiosGit Hook 工具:husky + lint-staged代码规范:EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide提交规范:Commitizen + Commitlint单元测试:vue-test-utils + jest + vue-jest + ts-jest自动部署:GitHub Actions 架构搭建 请确保你的电脑上成功安装 Node.js
  • 为什么 Vue.js Chrome Devtools 没有检测到 Vue.js?(Why is Vue.js Chrome Devtools not detecting Vue.js?)
    问题 我有一个简单的工作 Vue.js 应用程序的以下代码。 但是 vue.js devtools 没有响应。 几天前它运行良好,现在它不再运行了,可能是哪里出了问题? 当我去 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 时,它说它已经添加了。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script> <title>Document</title> </head> <body> <div class="container"> <div id="application"> <input type=
  • 基于Vue.js活动倒计时组件
    vue2-countdown vue活动倒计时组件及遇到的坑 基于vue2.x的活动倒计时组件 主要是最近为了公司做一个倒计时活动才找到了这个组件使用的。于是去github上翻看了文档结果是一年多没更新了,主要还是有部分bug还未修复的。还有就是自己遇到的坑吧。 目录 vue2-countdown vue活动倒计时组件及遇到的坑1.Install2.Usagevue2-countdown 项目存在的一些问题: 以下是该组件的基本使用方法 1.Install npm install vue2-countdown --save-dev 2.Usage import CountDown from 'vue2-countdown' components: { CountDown }, <count-down v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDownE_cb(1)" :currentTime="1481450106" :startTime="1481450110" :endTime="1481450115" :tipText="'距离开始文字1'" :tipTextEnd="'距离结束文字1'" :endText="'结束自定义文字2'" :dayTxt="'天'" :hourTxt="'小时'"
  • Sping Boot + Vue + Webpack 项目实战(三):配置静态资源、代码校验和webpack-dev-server
    前言 好了,上一篇我讲了怎么使用webpack来构建vue项目,接下将对它进一步完善,添加静态资源和代码校验及webpack-dev-server服务器,废话不多说,直接开始吧。 配置静态资源 安装 在配置之前,需要安装样式和文件资源处理的loader npm install style-loader --save-dev npm install --save-dev url-loader file-loader //url-loader是基于file-loader的 配置 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(gif|jpg|jpeg|png|svg)/, use: { loader: 'url-loader', options: { limit: 1024, // 每次输出文件的字节数的大小 name: '[name].[ext]' // 输出的文件类型 } } } ] }, css处理器 这里css处理器使用的是stylus,当然也可以使用其他处理器,可以根据个人习惯去更换,我这里使用它是因为它编写的样式简洁,容易阅读 安装 npm install stylus-loader stylus --save-dev 配置 module: {
  • laravel 6.0 版不包含资源/js 文件夹中的 vuejs 文件 assets/components,App.vue。 这是为什么以及如何解决它?(laravel version 6.0 does not include the vuejs file assets/components,App.vue, inside resources/js folder. This is why and how to fix it?)
    问题 在 Laravel 6.0 版发布后,当我安装新的 Laravel 应用程序时,它不包含vue.js文件assets/components 、 App.vue。 我不知道如何解决它。 我想在laravel和vue中开发一个项目。 require('./bootstrap'); 这是 app.js 文件,它只包含这行代码。 回答1 是的,它不包括因为它被移出一个名为 laravel/ui 的单独包中的核心,您可以使用composer安装该包,然后使用预构建的组件进行身份验证以及它提供的任何其他内容。 这是它的文档。 回答2 正如@nakov 所说,Vue 现在移至 larvel/ui 包。 要安装它,您必须在项目目录中运行composer require laravel/ui命令。 然后运行php artisan ui vue命令然后运行npm install && npm run dev 。 现在你可以看到 app.js 中有 vue 组件。
  • “$attrs 是只读的”,“$listeners 是只读的”,“避免直接改变 prop”(“$attrs is readonly”,“$listeners is readonly”,“Avoid mutating a prop directly”)
    问题 我是 Vue 的新手。 我正在尝试开发一个聊天应用程序,其中朋友列表将显示在左侧菜单上,聊天框将显示在正文中。 我正在使用 ajax 调用加载好友列表,并根据好友 ID 路由到聊天框。 这是代码示例。 <div class="chat-container clearfix" id="chat"> <div class="people-list" id="people-list"> <chatlist-component></chatlist-component> </div> <div class="chat"> <router-view></router-view> </div> </div> 聊天列表组件将从服务器加载好友列表。 这是我的 app.js 文件; Vue.use(VueRouter) const router = new VueRouter({ routes, linkActiveClass: "active" }); import ChatComponent from './components/ChatComponent'; const routes = [ { path: '/chat/:id/:name', component: ChatComponent , name: 'chat'} ]; Vue.component('chatlist
  • Nodejs+VUE(3.1)Nodejs和Vue交互(各自启服)
    一、安装vue环境 https://blog.csdn.net/qq_21859119/article/details/82843795 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack vue01 其他的回车; # 安装依赖 $ cd vue01 $ npm install 提示全装上 npm audit fix npm audit fix --force 二、配置IP/端口(阿里) 打开阿里云端口后还是访问不了,估计和nodejs那个阿里云问题是一样,在这里可以改配置 https://blog.csdn.net/u012230055/article/details/82152111 修改./config/index.js module.exports = { dev: { host: '172.16.15.200', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 改后可以了。 npm run dev启动验证端口
  • Vue.js~渐进式 JavaScript 框架。
    Vue.js~渐进式 JavaScript 框架。 文章目录 Vue.js~渐进式 JavaScript 框架。what。vue-element-admin。前端 MV* 模式。MVC。MVP。MVVM。 Hello World。v-bind。v-if。v-for。绑定事件 ~ v-on。双向绑定。Vue 组件。axios~易用、简洁且高效的 http 库。Vue 生命周期。 计算属性。slot。自定义事件内容分发。Vue.js 入门小结。Vue CLI需要 Node.js。安装 vue-cli。创建。 webpack。安装。配置。 vue-router。 what。 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 前端三大框架。 Angular React Vue axios 前端通讯框架。 UI 框架。 Ant-Design ElementUI、iview、ice(基于 Vue)。 BootStrap AmazeUI。妹子 UI。 JavaScript 框架。 jQuery Angular React
  • 史上最详细的vue cli讲解
    Vue cli是什么: Vue Cli 是一个基于 Vue.js 进行快速开发的完整系统,CLI 是一个全局安装的 npm 包,提供了终端里的 vue 命令 安装步骤: 1 要先下载node,js Vue CLI 4.x 安装需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+,你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本) 查看node.js版本 node-v 下载安装nodeJs很简单(和其他系统软件一样根据需求按步骤安装)这里不做介绍,中文官方下载地址:http://nodejs.cn/download/ 2.安装脚手架 npm install -g @vue/cli 删除老版本的脚手架 npm uninstall vue-cli -g 创建项目 vue create 项目名 安装项目 没有需要的话可以选择电脑自带的项目配置 一:项目配置前面几个都是系统默认的配置,最后一个是手动添加选项 二:手动选择需要的配置 () Choose Vue version 选择vue版本 () Babel 语法转换器把ES6转换成ES5 () TypeScript 是JavaScript 的一个超集,扩展了 JavaScript 的语法,使用 TypeScript 书写源码 ( ) Progressive Web App (PWA) Support
  • 找不到相关命令(Command not found)
    问题 一直在努力启动我的第一个 vue 项目,并正在寻找一些帮助。 我在我的系统上同时更新了 npm 和 node,但不断遇到同样的问题。 我的步骤: 1.) npm install npm WARN mbasile@1.0.0 无说明在 0.095 秒内更新 2.) npm install vue npm WARN mbasile@1.0.0 无描述 + vue@2.5.16 在 0.951 秒内更新了 1 个包 这就是事情变得时髦的地方? 3.) npm install -g @vue/cli 终端响应: npm 错误! 路径 /Users/mbasile/.npm-global/lib/node_modules//node_modules/.bin npm 错误! 代码 EACCES npm 错误! 错误号 -13 npm 错误! 系统调用 rmdir npm 错误! 错误:EACCES:权限被拒绝,rmdir '/Users/mbasile/.npm-global/lib/node_modules//node_modules/.bin' npm 错误! { 错误:EACCES:权限被拒绝,rmdir '/Users/mbasile/.npm-global/lib/node_modules//node_modules/.bin' npm 错误! 原因: npm 错误! {
  • 找不到相关命令(Command not found)
    问题 一直在努力启动我的第一个 vue 项目,并正在寻找一些帮助。 我在我的系统上同时更新了 npm 和 node,但不断遇到同样的问题。 我的步骤: 1.) npm install npm WARN mbasile@1.0.0 无说明在 0.095 秒内更新 2.) npm install vue npm WARN mbasile@1.0.0 无描述 + vue@2.5.16 在 0.951 秒内更新了 1 个包 这就是事情变得时髦的地方? 3.) npm install -g @vue/cli 终端响应: npm 错误! 路径 /Users/mbasile/.npm-global/lib/node_modules//node_modules/.bin npm 错误! 代码 EACCES npm 错误! 错误号 -13 npm 错误! 系统调用 rmdir npm 错误! 错误:EACCES:权限被拒绝,rmdir '/Users/mbasile/.npm-global/lib/node_modules//node_modules/.bin' npm 错误! { 错误:EACCES:权限被拒绝,rmdir '/Users/mbasile/.npm-global/lib/node_modules//node_modules/.bin' npm 错误! 原因: npm 错误! {
  • vue-cli使用
    使用npm命令需要先安装node.js,详细可去菜鸟教程https://www.runoob.com/nodejs/nodejs-install-setup.html Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具 下载vue-cli,在nodejs全局安装路径下 npm install -g vue-cli G:\resourcesWY\vue-cli>vue init webpack vueDemo#初始化、打包、命名 ? Project name vue_demo#项目名字不能有大写 ? Project description A Vue.js project ? Author littleyy <156922****@qq.com> ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been
  • vue-cli3.x使用详解_安装创建与2.x的区别
    1 vue-cli 3.x 简介 1.1 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统:是一个类似于 create-react-app 的可以用命令行快速配置和生成一个 vue 项目CLI:@vue/cli 全局安装的 npm 包,提供了终端里的 vue 命令(如:vue create 、vue serve 、vue ui 等命令)CLI 服务:@vue/cli-service 是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供 如:serve、build 和 inspect 命令)CLI 插件:给Vue 项目提供可选功能的 npm 包 (如: Babel/TypeScript 转译、ESLint 集成、unit 和 e2e 测试等) 1.2 具体工作 (1) 便捷的创建项目 (2) 添加 vue 插件快速配置项目 (3) 启动服务调试开发 (4) HTML 和静态资源 assets 的处理 (5) 配置 CSS ,配置 Webpack (6) 配置环境变量和环境模式:针对不同环境进行打包,发布项目 2 使用安装 2.1 node版本要求 vue cli 需要 node 版本 >=8.9, (官方推荐:8.11.0+ )。可使用 node -v 命令去检测 node 的安装版本,如果没有安装可到这里安装:
  • 手把手教你从0开始搭建一个vue项目(完结)
    前言 上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("path"); const config = new (require("webpack-chain"))(); const isDev = process.env.WEBPACK_DEV_SERVER; config .context(path.resolve(__dirname, ".")) //webpack上下文目录为项目根目录 .entry("app") //入口文件名称为app .add("./src/main.ts") //入口文件为./src/main.ts .end() .output .path(path.join(__dirname,"./dist")) //webpack输出的目录为根目录的dist目录 .filename("[name].[hash:8].js") .end() .resolve .extensions .add(".js").add(".jsx").add(".ts").add(".tsx").add(".vue") //配置以.js等结尾的文件当模块使用的时候都可以省略后缀 .end() .end() .module .rule("type
  • vue3.0项目的创建
    在创建vue工程项目之前要先安装node.js和添加环境变量 若没有完成此操作请上篇:node.js安装与添加环境变量 npm的仓库地址在国外,使用起来网速较慢,建议到淘宝镜像 安装nrm:npm install nrm -g (-g表示全局安装)查看nrm的仓库:nrm ls 更改淘宝镜像:nrm use taobao 再次查看nrm的仓库:nrm ls 安装vue的脚手架 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),通过 npm uninstall vue-cli -g 卸载它。 命令:npm install -g @vue/cli 创建vue工程文件 ①: 命令:vue create 项目的名称 ②:选择自定义配置,前两个都是自动模式 ③:通过方向键 ↑ ↓进行选择,空格确认与取消 1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 2 >( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 3 ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了
  • npm i and npm update breaking gulp, browserify builds
    What were you expecting to happen? Gulp to transpile vue.js components into usable and functional JS. What actually happened? When I run gulp contacts (shown under the Code and Configuration section below), the transpiling runs fine. No errors are outputted in the terminal, and everything appears to complete successfully. The problem is, when the page is reloaded I have an error in the console stating Uncaught SyntaxError: Unexpected end of input. When looking at the source, devtools shows something along these lines: module.exports = function parseHeaders(headers) { var parsed = {}; var key
  • 无法安装 Vue CLI? (苹果系统)(Can't install Vue CLI? (MacOS))
    问题 嘿,所以我正在尝试通过 npm( sudo npm install -g @vue/cli )安装 Vue,但我收到了一堆警告和错误,我无法真正理解它,也不知道为什么会发生这种情况。 .. npm WARN deprecated request@2.88.2: request has been deprecated, see [`https://github.com/request/request/issues/3142`](https://github.com/request/request/issues/3142) npm WARN deprecated resolve-url@0.2.1: [`https://github.com/lydell/resolve-url#deprecated`](https://github.com/lydell/resolve-url#deprecated) npm WARN deprecated urix@0.1.0: Please see [`https://github.com/lydell/urix#deprecated`](https://github.com/lydell/urix#deprecated) npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on
  • [Vue 警告]:未知的自定义元素: - 您是否正确注册了组件?([Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?)
    问题 我在带有 webpack-simple 的 CLI 模式下使用 Vue 2。 我有以下文件: 主要.js: import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import Routes from './routes'; Vue.use('VueRouter'); const router = new VueRouter({ routes: Routes, }); new Vue({ el: '#app', render: h => h(App), router: router, }); 应用视图: <template> <div> <router-view></router-view> </div> </template> <script> import Loader from './Loader.vue'; export default { name: 'app', } </script> <style lang="scss"> </style> 路线.js: import Game from './components/Game.vue'; import Login from './components/Login.vue'; export