寄语:vue的安装不是理想化的,会出现很多问题,需要静下心认真研究,熬过去就会懂得更多,以下是我遇到的问题和最真挚的建议,按照我的方法不会出错,一定会成功,我尝试了很多次方式,查阅了很多资料,最终总结出这篇vue安装经验,感谢阅读,送给同感之人。

1.安装node,点击链接:https://nodejs.org/en/download/ 

a.一定要从官网下载

b.放置D盘一级目录下

c.选择Add to PATH(默认会添加到path环境变量中)

npm: Nodejs下的包管理器。

           webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

           vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

开始:

如图,下载8.9.3 LTS (推荐给绝大部分用户使用

双击安装

可以使用默认路径,本例子中自行修改为d:\nodejs

一路点Next

点Finish完成

打开CMD,检查是否正常

2.查看node和npm版本

          a.node -v

          b.npm -v(此版本node自带)

          c.更新npm版本

然后运行以下2条命令

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"(若安装失败,手动建立node_cache项目文件)

如上图,我们再来关注一下npm的本地仓库,输入命令npm list -global

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息,我们关注一个配置文件

C:\Users\Administrator\.npmrc

使用文本编辑器编辑它,可以看到刚才的配置信息

检查一下镜像站行不行命令1

输入:npm config get registry

检查一下镜像站行不行命令2

看看能否获得vue的信息,输入:Npm info vue

注意,此时,默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录,

3.如果直接运行npm install等命令会报错的。

我们需要做1件事情:

1、增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules

(注意,一下操作需要重新打开CMD让上面的环境变量生效)

一、测试NPM安装vue.js

输入命令:npm install vue -g

这里的-g是指安装到global全局目录去

二、测试NPM安装vue-router

输入命令:npm install vue-router -g

安装vue脚手架,输入运行:npm install vue-cli -g

编辑环境编辑path

备注:对path环境变量添加D:\nodejs\node_global

win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】

四.测试vu,搭建vue项目

重新打开CMD,并且测试vue是否使用正常

注意:vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,

他的配置并不全放在根目录下的 webpack.config.js 中。

初始化,安装依赖

安装依赖,输入运行:npm install

运行vue项目程序。输入:npm run dev

成功界面,提示打开地址,浏览器复制:http://localhost:8080

设置自动打开浏览器,输入:npm run build

生成静态文件,打开dist文件夹下新生成的index.html文件

nmp下新建出来的vue01的目录描述:

注意:如出现2种情况,输入对应的命令行:

1. Error npm vue-cli3 这种错误。安装sass,请输入命令:npm install node-sass --save-dev (使用save会在package.json中自动添加,安装淘宝镜像)

                  npm install sass-loader --save-dev 

   2.vue项目无法运行,模块无法加载,找不到(因为环境变量有变动),需要重新加载模块,请输入命令:Npm rebuild node-sass

cnblogs.com/crazycode2/p/6535105.html

安装vue错误详情解决办法的更多相关文章

  1. 安装sql server 2005时出现“安装汇编”错误的解决办法

    今天安装sql server 2005 management studio到最后步骤的时候报“安装汇编”错误,卸载重装的几遍还是不行,最后将net framework 3.5删除后,终于安装成功了.

  2. php源代码安装常见错误与解决办法分享

    错误:configure: error: libevent >= 1.4.11 could not be found 解决:yum -y install libevent libevent-de ...

  3. Python3.6及以上pip安装pymssql错误的解决办法[Windows&Linux freetds安装]

    只有由于Python3.6装不上 pymssql,所以一直用Python3.5的版本. 报错界面 现在有了新的解决方法: 原帖如下: https://docs.microsoft.com/en-us/ ...

  4. WIN7下安装visualC++2008 redistributable 出现1935错误的解决办法(转自)

    转自:http://zhidao.baidu.com/link?url=jylNh_JeANi4wrOMmd4d2i06e_N3QCw7z6BLGiNNNTu1Hc6ADTkUq2PORExKmjtk ...

  5. 在Linux下安装PHP过程中,编译时出现错误的解决办法

    在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决办法 configure: error: libjpeg.(a ...

  6. Oracle10g安装中遇到的错误及解决办法

    linux解决xhost: unable to open display实用技巧:在Linux下设置xhost方法步骤 第一步:用root登陆linux,启动vnc服务:第二步:根据vnc起来的端口, ...

  7. 使用wubi安装ubuntu14.04出现的常见错误的解决办法

    花了一天的时间终于安装上了Ubuntu14.04,过程坎坷,是血泪史,开始报“cannot download the metalink and therefore the ISO”错误,解决后,又报“ ...

  8. npm install 错误 安装 chromedriver 失败的解决办法

    npm 安装 chromedriver 失败的解决办法npm 安装 chromedriver 时,偶尔会出错,错误提示类似于:npm ERR! chromedriver@2.35.0 install: ...

  9. Centos7.2yum安装时候出现db5错误的解决办法

    Centos7.2使用yum安装软件是出现如此错误提示 解决办法 删除 /var/lib/rpm文件夹下面所有以__db开头的文件

随机推荐

  1. SQL SERVER2000将多行查询结果拼接到一行数据及函数的创建

    处理前的查询结果如上图: 通过借助SQL变量的定义 ) DECLARE @Num int SET @Scope='' ), ' ' GROUP BY ContractID 实现了一下效果: //创建拼 ...

  2. centos 桌面没有有线设置,不能上网

    1.ifconfig 发现缺少网卡 ensxx 2.cd /etc/sysconfig/network-scripts/  发现有网卡ens的配置文件,只是没有启动 3.ifconfig -a 发现有 ...

  3. 《深入理解java虚拟机》学习笔记-----郑雨迪

    一.学习java虚拟机的原因 二.java代码的运行 java -c 编译成.class 文件(java字节码) java字节码(.class文件)无法直接执行,因此,java虚拟机需要将字节码编译成 ...

  4. Mysql高性能笔记(一):Schema与数据类型优化

    1.数据类型 1.1.几个参考优化原则 a.  更小的通常更好 i.更小的数据类型,占用更少磁盘.内存和CPU缓存,需要的CPU周期更少 ii.如果无法确定哪个数据类型是最好的,就选择不会超过范围的最 ...

  5. 在graphviz中创建可点击的图形

    1.创建一个dot文件,在节点属性中使用URL关键字: target关键字指定链接打开的方式 //test.dot digraph Arch { A; B [URL="http://docs ...

  6. (转)学习HTML5 Canvas这一篇文章就够了

    作者:做人要厚道2013 原文:https://blog.csdn.net/u012468376/article/details/73350998

  7. python3.x执行post请求时报错“POST data should be bytes or an iterable of bytes...”的解决方法

    使用python3.5.1执行post请求时,一直报错"POST data should be bytes or an iterable of bytes. It cannot be of ...

  8. mysql中整数类型后面的数字,比如int(11),11代表11个字节吗?

    原先对mysql不太理解,但也没有报错.但理解的不够深入.这次补上. 原来以为int(11)是指11个字节,int(10)就是10个字节.我错了. http://zhidao.baidu.com/li ...

  9. 深入理解Java的三种工厂模式

    一.简单工厂模式 简单工厂的定义:提供一个创建对象实例的功能,而无须关心其具体实现.被创建实例的类型可以是接口.抽象类,也可以是具体的类 实现汽车接口 public interface Car { S ...

  10. C++题目:回文数判断

    Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same back ...