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. 效果

Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开相关推荐

nodejs绿色版下载安装及配置淘宝镜像、安装vue脚手架
目录一.下载地址二.安装三.测试四.环境配置五.配置淘宝镜像六.安装vue脚手架一.下载地址 nodejs下载详图: 二.安装傻瓜式安装这里我就不多说了(一直点确定就完事了) 三.测 ...
nodejs 配置淘宝镜像下载与安装路径配置
nodejs 配置淘宝镜像下载与安装路径配置查看数据源地址查看镜像地址设置回原镜像地址命令行输入 1.npm config set registry https://registry.npm. ...
nodejs window下安装与配置淘宝镜像
nodejs window下安装与配置淘宝镜像 1,前往nodejs官网下载安装软件,地址:https://nodejs.org/en/ 2,点击下一步继续安装,安装完成,在命令输入:node -v, ...
node配置淘宝镜像
node.js配置淘宝镜像加速: 查看当前镜像地址:npm get registry 还原本地镜像地址:npm config set registry https://registry.npmjs.o ...
修改下载仓库为淘宝镜像 npm config set registry https://registry.npmjs.org/, 如果要发布自己的镜像需要修改回来 npm
1, 修改下载仓库为淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 2, 如果要发布自己的镜像需要修改回来 npm conf ...
node-sass配置淘宝镜像仓库不生效解决办法
问题背景: 下载node-sass要访问github,特别慢,有时候甚至请求失败尝试解决: 给npm配置淘宝镜像:npm config set registry https://registry.n ...
linux安装node(含npm命令) 并配置淘宝镜像源
安装NPM 方法一使用apt安装 npm版本号可能不是最新的 apt install npm 方法二下载安装包离线安装 1. 下载压缩包 wget https://nodejs.org/dist/ ...
npm 配置淘宝镜像
首先解释一下 npm 为什么要配置淘宝镜像原因:因为node.js 默认使用的是国外的网站 .国内访问有一个跨国内局域网的操作.所以就会有时候很慢.这就跟为什么网站的静态资源有些会使用C ...
yarn配置淘宝镜像
一.Yarn 设置淘宝镜像 1.查询当前配置的镜像 yarn config get registry // 默认:https://registry.yarnpkg.com 2.设置成淘宝镜像 yarn ...

Vue2 脚手架下载及配置淘宝镜像--和ieda的配置和打开

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 脚手架下载及配置淘宝镜像--和ieda的配置和打开相关推荐

最新文章

热门文章