目录

Vue2 脚手架下载及配置淘宝镜像

为什么需要 Vue Cli 脚手架?

环境配置，搭建项目

1. 搭建 Vue2 脚手架工程，

2.查看

3.冲突

4. 下载

5. 安装

6. 验证

7. 先删除以前的 cli 版本<不论是之前未下载或没有下载>

8. 安装淘宝镜像-cnpm

说明

9-安装 webpack 和 webpack-cli ,

10. 安装 cnpm install -g @vue/cli@4.0.3 

 11. 确认 Vue-Cli 版本

12. 创建目录 vue_project, 并 cmd 到该目录

13. 使用 webpack 创建 vue 脚手架项目

14. 浏览器： http://localhost:808 

 到这里恭喜大家成功了

 IDEA 打开项目，运行项目

1.打开

2.配置 NPM

 3. 效果

---

Vue2 脚手架下载及配置淘宝镜像

为什么需要 Vue Cli 脚手架?

目前开发模式的问题

1. 开发效率低

2. 不够规范

3. 维护和升级, 可读性比较差

环境配置，搭建项目

1. 搭建 Vue2 脚手架工程，

需要使用到 NPM(node package manager), npm 是随 nodejs 安装的一款包管理工具, 类似 Maven。所以我们需要先安装 Nodejs

2.查看

为了更好兼容 ，这里我们安装 node.js10.16.3， (因为这里是演示 Vue 脚手架工程),后面我们还会讲解 Vue3 的脚手架工程搭建, 再对 Node 升级.

3.冲突

如果以前安装过 node.js , 为防止版本冲突，先卸载之, 如果你没安装 nodejs, 就不管

4. 下载

node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/ 

5. 安装

node.js10.16.3 , 直接下一步即可, 注意位置是自己设定的不要有中午路径

6. 验证

是否安装成功, 如果看到不到, 退出 cmd, 重新开一个窗口测试即可

7. 先删除以前的 cli 版本<不论是之前未下载或没有下载>

npm uninstall vue-cli -g

8. 安装淘宝镜像-cnpm

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

说明

npm 和 cnpm 的区别

1) 两者之间只是 node 中包管理器的不同, 都可以使用

2) npm 是 node 官方的包管理器。cnpm 是个中国版的 npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

3) 如果因为网络原因无法使用 npm 下载，那 cnpm 这个就派上用场了

4) 小结: npm 和 cnpm 只是下载的地址不同，npm 是从国外下载东西，cnpm 是从国内 下载东西 

9-安装 webpack 和 webpack-cli ,

指令: npm install webpack@4.41.2 webpack-cli -D

 (说明：这里指定了 webpack 的版本, webpack 是一个 打包工具)

10. 安装 cnpm install -g @vue/cli@4.0.3 

 11. 确认 Vue-Cli 版本

12. 创建目录 vue_project, 并 cmd 到该目录

13. 使用 webpack 创建 vue 脚手架项目

(提醒：如果出现了 downloading template....,60s 退出窗口，重新来操作一次即可.)

  

14. 浏览器： http://localhost:808 

 到这里恭喜大家成功了

 IDEA 打开项目，运行项目

1.打开

将 Vue 脚手架项目，直接拖到 IDEA，就可以打开

2.配置 NPM

 3. 效果