vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)
2020-02-13。
网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题。接下来看下最新的安装方法。
前四步是一样的:
1、下载并安装vscode
2、下载并安装node.js(一直next即可)
安装完成之后在终端输入:node -v和npm -v查看是否安装成功。npm是node.js的包管理工具。
3、这里我们可以更改node.js默认下载依赖的位置
在自己安装的node.js文件夹中新建一个node_cache文件夹,新建一个node_global文件夹:接下来在终端输入:
npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
4、由于npm下载包一般很慢,使用npm install -g cnpm --registry=https://registry.npm.taobao.org更换为淘宝镜像源。
会安装在E:\nodejs\node_global下,此时需要将cnpm加入的path路径中。完成之后输入cnpm -v查看是否成功。
5、这里开始使用最新的命令下载vue/cli
cnpm install -g @vue/cli
在下载最后两个依赖时可能会报错:
此时输入命令:npm update,再输入
cnpm install -g @vue/cli
6、新建一个项目
vue create my-project
最后输入
npm run serve
启动程序。
浏览器中:
唉,旧版本的弄了我好久。下一篇再看怎么配置vscode了。
分割线---------------------------------------------------------------------------------------------------------------------------------------------------------------
以下是旧版本的。。。
1、下载并安装vscode
2、下载并安装node.js(一直next即可)
安装完成之后在终端输入:node -v和npm -v查看是否安装成功。npm是node.js的包管理工具。
3、这里我们可以更改node.js默认下载包的位置
在自己安装的node.js文件夹中新建一个node_cache文件夹,新建一个node_global文件夹:接下来在终端输入:
npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
4、由于npm下载包一般很慢,使用npm install -g cnpm --registry=https://registry.npm.taobao.org更换为淘宝镜像源。
会安装在E:\nodejs\node_global下,此时需要将cnpm加入的path路径中。完成之后输入cnpm -v查看是否成功。
5、安装vue-cli脚手架构建工具
cnpm install -g vue-cli
6、随便找个位置新建一个文件夹,并在该处进入到终端,输入:
vue init webpack firstVue
这里会下载不下来,因为连接不到github.com,会报错:ETIMEDOUT 13.250.177.223:443。我们可以离线安装。首先去https://github.com/vuejs-templates/下载好压缩包,我电脑死活连不上,只好先用手机下载好,然后在传给电脑。下载之后解压成webpack,在C:\Users\Administrator\下新建一个.vue-templates文件夹,直接创建会不成功,在终端进入该路径,然后输入:md .vue-templates即可。然后将webpack文件放在该目录下。
7、进行离线创建项目(多加一个参数)
vue init webpack firstVue --offline
然后会看到:虽然解决了上述第6步问题,但是最终还是会因为各种问题报错,简直是无语了。。。
vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)的更多相关文章
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- Mac安装vue.js开发环境
Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...
- 快速搭建 Node.js 开发环境以及加速 npm
如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...
- 【转】使用nvm快速搭建 Node.js 开发环境
原文链接:http://www.cnblogs.com/shuoer/p/7802891.html 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本 ...
- ES6 学习笔记 (2)-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境
笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...
- Windows下搭建Spark+Hadoop开发环境
Windows下搭建Spark+Hadoop开发环境需要一些工具支持. 只需要确保您的电脑已装好Java环境,那么就可以开始了. 一. 准备工作 1. 下载Hadoop2.7.1版本(写Spark和H ...
- [转载]Sublime Text 3 搭建 React.js 开发环境
[转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
- 如何在Ubuntu下搭建Android NDK开发环境
1 搭建Android SDK开发环境 参考在在Ubuntu下搭建Android SDK开发环境(图文)首先在Ubuntu下搭建Android SDK开发环境. 2 下载NDK开发包 打开官网: ht ...
- Windows下搭建objective C开发环境
摘自:http://blog.csdn.net/zhanghefu/article/details/18320827 最近打算针对iPhone.iPod touch和iPad开发一些应用,所以,需要开 ...
- 手把手教你学node之搭建node.js开发环境
搭建node.js开发环境 本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...
随机推荐
- 洛谷P1028 数的计算 题解 动态规划入门题
题目链接:https://www.luogu.com.cn/problem/P1028 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数 \(n\) ): 先输入一个自然数 \(n(n \ ...
- php hash比较缺陷
PHP在处理哈希字符串时,会利用”!=”或”==”来对哈希值进行比较,它把每一个以”0E”开头的哈希值都解释为0,所以如果两个不同的密码经过哈希以后,其哈希值都是以”0E”开头的,那么PHP将会认为他 ...
- Atom + Texlive 配置 Latex 环境
Atom + Texlive 配置 Latex 环境 步骤1: 安装TexliveTexlive点击 "Download" 下载,然后安装,等待安装完成即可 步骤2: 安装Atom ...
- Go Web 编程之 响应
概述 上一篇文章中,我们介绍了请求的结构与处理.本文将详细介绍如何响应客户端的请求.其实在前面几篇文章中,我们已经使用过响应的功能--通过http.ResponseWriter发送字符串给客户端. 但 ...
- GitHub项目绑定自己的域名
github博客搭建:https://blog.csdn.net/walkerhau/article/details/77394659?utm_source=debugrun&utm_medi ...
- BFT-SMaRt:用Java做节点间的可靠信道
目录 一.引子 二.名词统一 1. 节点id 2. 节点 3. 本地节点 4. 配置域 5. TTP 6. 陌生域 三.节点服务类 四.节点通信系统概览 五.节点通信层准备 1. 创建socket服务 ...
- APP开通支付宝支付 转账功能
注意:支付宝单笔转账到账户功能的准入条件 首先要在商家中心注册,从商家中心可以跳转到开放平台. 登陆蚂蚁金服开放平台 1 开发中心->网页&移动应用 2 根据需求选择应用类型创建应用 3 ...
- 倍增LCA模板2董博文版 伪代码
Dfs(int rt){ f[][rt]; ;k<=;k++) f[k][rt]=f[k-][f[k-][rt]]; } int LCA(int x,int y){ if(Dp[x]<Dp ...
- 前端.解决form-contral总是换行问题
form-control 总是会换行,后面加单位的时候很难看,如下图. <div class="col-sm-3"> <input id="invest ...
- [bzoj4524] [loj#2047] [Cqoi2016] 伪光滑数
Description 若一个大于 \(1\) 的整数 \(M\) 的质因数分解有 \(k\) 项,其最大的质因子为 \(Ak\) ,并且满足 \(Ak^K \leq N\) , \(Ak<12 ...