容易上手搭建vue2.0开发环境

第一步:安装node

前端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

2:查看node的版本号

打开cmd ,输入 node -v,回车,查看node版本号,出现版本号说明安装成功。

命令行: node  -v

3.安装淘宝 npm 镜像

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

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

4. 安装全局vue-cli脚手架

淘宝镜像安装成功后,我们就可以全局vue-cli脚手架了,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

命令行:cnpm install --global vue-cli

5. 开始创建新项目

脚手架搭建完,我们开始创建第一个新项目,我个人建议尽量不要安装在C盘,因为vue下载下来的文件比较大,,如果需要改盘的话。直接输入D: 回车就可以直接改盘

附加:如果要进来D盘里面的某文件夹,直接输入 cd 文件名 回车

命令行:vue init webpack my-project-first

my-project-first是项目的文件夹名,是基于webpack 的项目,输入之后就一直回车,知道是否出现安装vue-router,
这个我们在项目要用到,所以就输入y 回车

注释: project name  项目的名字

project  description  项目的描述

author  作者

6. 注意

下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的

创建完成之后的提示:

打开D盘查看一下,会发现多了一个刚刚创建的文件夹

7. 进来项目文件夹

文件夹已经下载好了,现在就可以进入文件夹,输入: cd my-project-first 回车进入新建的项目。

命令行:cd my-project-first

8. 在项目里安装依赖

因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,在项目里输入以下命令。

命令行:cnpm install

9. 运行

一切环境依赖安装准备就绪,我们来测试一下自己新建的vue项目的运行情况,输入命令:cnpm run dev直接回车。会弹出一个浏览器访问地址默认为localhost:8080。

(我将地址修改为8081进行访问)

命令行:cnpm run dev

10. 在浏览器输入localhost:8081

8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080就可以打开默认的模板了;(我的电脑上8080端口有需要,被另外一个项目占用,故而使用8081的端口)

在浏览器输入localhost:8081,显示如下,到此为止,vue开发环境搭建完毕。

但是在最后一步的时候,有些人会遇到这样的报错:

 

解决方案:
1:在项目里执行这样的命令

命令行:npm i [email protected]~1.12.0

2:重新开启运行即可成功:
命令行:npm run dev

最后如何修改默认的端口?

既然提到自己修改了默认的端口,那就说明一下。根目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js,这里不仅可以改变端口,还可以根据需要改变其他配置信息。
改版原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 

原文地址:https://www.cnblogs.com/liujun1128/p/11359736.html

时间: 2024-11-03 09:50:48

容易上手搭建vue2.0开发环境的相关文章

ubuntu 12.04(64位)下搭建android5.0开发环境

?? 本文介绍在WIN7操作系统通过在虚拟机VMWARE和Ubuntu下搭建了一个android5.0编译环境的操作过程,包括LINUX系统安装,JDK安装,samba服务和ssh服务安装.因为要下载补丁,需要网络支持,要能够上网.电脑要64位cpu,安装好win7操作系统. 第一步: 下载ubuntu地址:LINUX有3个版本,分别是server,desktop,alternateserver版本是没有图形界面服务器安装版本.alternate适合专业个性化定制安装版本,不推荐初学者用这个版本

VUE2.0开发环境安装

安装nodejs后顺序执行如下命令: npm install webpack -g npm install vue-cli -g vue init webpack my-project cd my-porject npm i npm run dev

vue_使用npm搭建vue2.0脚手架开发环境

前言: 在使用vue进行开发时需要搭建vue的运行环境,这里主要是使用淘宝镜像cnpm进行搭建vue的脚手架开发环境.主要是分为mac和window两个版本,两个环境的搭建都是大同小异. mac开发环境的搭建: 1.安装Node.js(这个只需要去nodeJS官网下载安装就可以了) 以下的命令都是在终端输入 2.在电脑终端使用命令 node -v 检查版本(检查安装成功) 3.安装淘宝npm镜像 sudo npm install -g cnpm --registry=https://regist

vue2.0新手环境搭建

#vue2.0新手环境搭建 1. 安装node.js(稳定版本,>4.0.0即可)2. 获取nodejs模块安装目录访问权限(windows跳过此步)sudo chmod -R 777 /usr/local/lib/node_moudules ``` sudo chmod -R 777 /usr/local/lib/node_moudules ```3. 安装淘宝镜像 ``` npm install -g cnpm ```4. 安装webpack ``` cnpm install webpack

(转)Eclipse下搭建Hadoop2.4.0开发环境

Eclipse下搭建Hadoop2.4.0开发环境 一.安装Eclipse 下载Eclipse,解压安装,例如安装到/usr/local,即/usr/local/eclipse 4.3.1版本下载地址:http://pan.baidu.com/s/1eQkpRgu 二.在eclipse上安装hadoop插件 1.下载hadoop插件 下载地址:http://pan.baidu.com/s/1mgiHFok 此zip文件包含了源码,我们使用使用编译好的jar即可,解压后,release文件夹中的h

windows下cocos2dx3.0开发环境及Android编译环境搭建

cocos2dx更新到了3.x版本,自己一直没有换,现在开发组要求统一换版本,我就把搭建环境的过程记录下来. 一.Windowns下开发环境搭建 1.  所需工具 1)cocos2d-x-3.0rc0.zip   http://cn.cocos2d-x.org/download/  截止写博文时,最新版本为V3.2. 2)VS2012 http://www.baidu.com/s?wd=VS2012 3)Python  https://www.python.org/download/releas

WINCE6.0开发环境搭建

XP系统下Wince6.0开发环境搭建 VS2005 以及补丁 WINCE6.0 以及补丁 一.安装VS2005 1.       先安装VS2005. 2.       安装VS2005 SP1补丁,文件名是"VS80sp1-KB926604-X86-CHS .exe",在安装补丁的时候,进度条可能会死在那里不会动了,重新安装一下就可以了. 二.安装WINCE6.0 1.      先安装Windows Embedded CE 6.0.msi 2.      安装WINCE6.0补丁

Windows 7旗舰版搭建andriod 4.0开发环境记录

搭建Android环境步骤(仅供参考): 官方搭建步骤: http://developer.android.com/index.html 搭建环境之前需要下载下面几个文件包: 一.安装Java运行环境JRE(没这个Eclipse运行不起来)和JDK 官网下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html, 先装JRE,再装JDK,这个没什么说的,直接点击下一步就好了.... 二.安装Android SDK 将

一步步构造自己的vue2.0+webpack环境

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wkdemo,这是我们的项目目录.执行 npm init 命令生成package.json文件.执行npm init之后,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行 npm init -y 直接跳过询问步骤. 2.安装项目依赖项 npm install webpack webpack-