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全面讲解笔记，看不懂的可以看搭配视频，我是一个白嫖者，分享给想白嫖的你！（想更好的学习vue还是去官网学吧！）

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

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

• 环境配置建议看此链接：此链接可以借鉴的点：全局npm（-g）环境配置的更改；淘宝镜像工具cnpm下载，镜像切换工具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出错解决办法）

node安装