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

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

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

 


目录
相关文章
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
38 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
18天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
180 4
|
22天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
30 3
|
1月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
241 0
|
2月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2月前
|
JavaScript
Vue3基础(20)___Vue3配置错误路由重定向写法
本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。
45 0
Vue3基础(20)___Vue3配置错误路由重定向写法
|
1月前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
30 0
|
3月前
|
JavaScript
在Vue中使用Avue、配置过程以及实际应用
这篇文章介绍了作者在Vue项目中使用Avue组件库的体验,包括安装配置过程和实际应用示例,展示了如何通过Avue实现动态增加输入框和输入验证的功能。
在Vue中使用Avue、配置过程以及实际应用
|
3月前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
1032 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令