vue-cli(vue-V:2.9.6)创建项目(管理员模式运行)


vue-cli(vue-V:2.9.6)创建项目

说明:本篇博客试用于vue2版本,如果用vue2开发,按照本文的版本步骤创建工程,基本没问题,如果用的node、vue-cli、sass-loader、node-sass、vue-router......等版本和本文不一样可能会出错。

如果安装出现问题一定要检查安装的文件是否拼错

  • (举例:我安装sass-loader时控制台拼成了sass-loder,少一个字母a打死也不会成功)

一、node安装v12.13.0

1. node下载、安装:参考视频

想全面学习vue可以看此链接:,看不懂的可以看搭配视频,我是一个白嫖者,分享给想白嫖的你!(想更好的学习vue还是去官网学吧!)

  • 下载node-v12.13.0-x64.msi

  • 安装node只看此链接的安装作为参考,node安装出现2503、2502错误,解决办法

  • 环境配置建议看此链接:,镜像切换工具nrm建议不要下载,用它切换镜像容易出问题,npm与cnpm就够用了,这两个都不行,再切换其他镜像也是会失败!

  • 安装收藏以后可能用到

二、下载vue-cli、webpack与webpack-cli

  1. 管理员身份运行cmd

  2. 全局下载vue-cli、webpack与webpack-cli

    • npm install vue-cli -g

    • npm install webpack@4.41.2 -g

    • npm install webpack-cli@3.3.9 -g

  3. 查看版本

    • vue -V (版本应该是2.9.6)

    • webpack -v

    • webpack-cli -v

三、创建工程:hello-vue

  1. 管理员身份运行cmd,进入目录D:\IT\vue-study

    • d:

    • cd D:\IT\vue-study

  2. 创建一个名为hello-vue的工程:

    • vue init webpack hello-vue
  3. 进入项目工程:

    • cd hello-vue
  4. 安装vue-router@3.1.3:(如果安装失败往后看出错原因

    • npm install vue-router@3.1.3 --save-dev
  5. 安装element-ui@2.15.7

    • npm i element-ui@2.12.0 -S(注意-S的S是大写)
  6. 安装依赖

    • npm install
  7. 安装SASS加载器

    • npm install node-sass@4.13.0 --save-dev(如果安装失败往后看出错原因)

    • npm install sass-loader@8.0.0 --save-dev 打开项目需改成7.3.1(具体步骤可以看上面提到白嫖视频)

    • 项目初始化报 404 Not Found - GET https://registry.npmjs.org

  8. 启动测试

    • npm run dev
  9. 安装axios@0.19.0与vue-axios@2.1.5

    • cnpm install --save axios@0.19.0 vue-axios@2.1.5

vue3创建项目网上找的

四、npm安装vue-router报错原因分析:

  1. 未使用管理员权限下载vue-router,不知道的百度查找

  2. webpack与webpack-cli不兼容

    • (我用的版本亲测可用:1. webpack@4.41.2 2. webpack-cli@3.3.9

    • 判断兼容与否:管理员权限打开cmd,

      • 全局下载webpack与webpack-cli

      • 控制台输入webpack -v,看输出结果(只演示两个包下载成功的情况)

        • 控制台输出:4.41.2;兼容可用

        • 控制台输出:webpack:5.70.0,webpack-cli:4.1.11;不兼容需更换版本,可将webpack-cli换成webpack-cli:3.3.12)

  3. vue-router版本过高降低版本

    • 控制台输入:npm install vue-router@3.1.3 --save-dev

五、 node-sass下载失败分析:

node-sass 安装失败的各种坑

看评论

安装windows平台编译环境(需要在管理员权限下安装)

  • npm install -g node-gyp@3.8.0

  • npm install --global windows-build-tools --vs2015(出现python安装2503错误,参考上面node安装2503出错解决办法)