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步问题,但是最终还是会因为各种问题报错,简直是无语了。。。

原文地址:https://www.cnblogs.com/xiximayou/p/12304952.html

时间: 2024-08-06 18:35:47

vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)的相关文章

windows下vue.js开发环境搭建教程

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

vue.js开发环境搭建

1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装...2).输入:vue -V,回车,若出现vue信息说明表示成功 4.创建vue项目 在cmd里输入:vue

vue.js开发环境安装教程

一.nodejs安装-npm安装1.nodejs安装①下载对应系统版本的Node.js:https://nodejs.org/en/download/② 运行程序开始安装,一路next最终install即可2.npm安装(新版Node.js已自带npm)③检测是否安装成功.快捷键win+R,输入cmd回车打开cmd窗口node -v 查看node.js的版本号npm -v 查看node.js自带的npm的版本号3.配置环境变量[说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及

快速搭建 Node.js 开发环境以及加速 npm

在公交车上刷微博,还是有很多同学在咨询: 如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本, 或者想快速切换 node 版本, 那么在非 Windows(如 osx, linux) 环境下, 请使用 nvm 来安装你的 node 开发环境, 保持系统的干净. 如果你使用 Windows 做开发,

Win7下搭建安卓android开发环境

本文出自 "孤狼" 博客,请务必保留此出处http://332374363.blog.51cto.com/5262696/1310882 另外,在搭建android开发环境时,还参考了http://www.apkbus.com/android-641-1-1.html 参考了:http://wenku.baidu.com/view/6108ac19b7360b4c2f3f6406.html 一.假设你现在什么都没有,那么你需要下载以下的东西: 1.JDK(JavaDevelopment

Windows下搭建go语言开发环境 以及 开发IDE (附下载链接)

1.下载 并且 安装 Go安装包 =========================================================== 在CSDN上传了我的版本,供大家下载: =========================================================== go1.2.windows-386.msi : http://download.csdn.net/detail/shuideyidi/7718563 go1.2.1.windows-am

在Node.js上搭建React.js开发环境

1.React.js的介绍: React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. 特点: 1.声明式设计 ?React采用声明范式,可以轻松描述应用. 2.高效 ?React通过对DOM的模拟,最大限

Windows下搭建objective C开发环境

最近打算针对iPhone.iPod touch和iPad开发一些应用,所以,需要开始学习Objective C(苹果推出的类似C语言的开发语言).由于苹果的自我封闭的产业链发展模式(从芯片.机器.开发语言.终端产品.服务)的限制,要想开发针对苹果 iPhone等产品的应用程序,就需要用Mac机器,在Xcode的IDE上使用Objective C语言开发.Mac机器就不用说了,那比PC机器要贵不少(当然性价比还是很高的),所以,要想廉价方式学习Objective C就必须要在Windows上能搭建

Eclipse 下搭建pyDev python开发环境及helloworld

一,安装基础环境 1,安装jdk7,并配置环境变量(pyDev要求jdk7及以上版本,否则安装好也不显示) 2,下载Eclipse并解压 3,安装python3.X 二,Eclipse下配置pyDev 1,安装插件:help -> Install new Software.. ->输入PyDev Update Site - http://pydev.org/updates 然后下一步.同意等等. 2,配置python编译器:Window -> perferences -> pyDe

C++开发安卓、windows下搭建Android NDK开发环境

1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个工具,我们可以把用C/C++代码编译成可以直接运行在Android平台上的本地代码,这些本地代码以动态链接库( *.so )的形式存在,也正因为这样,我们可以通过复用这些动态链接库从而复用本地代码. 那么,通过NDK这个开发工具包,那么我们是否可以将一个APK完全使用C/C++来编写呢? 答案是不可