windows下搭建vue开发环境实践

  Vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。2016年,Vue同Angular、React形成三足鼎立的局面。为了提升自己的知识面,今天实践操作一下Vue的环境搭建。

  一、安装node.js

 Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js。官方地址为:https://nodejs.org/en/download/,按需下载相应版本。

 

  在windows下一直“下一步”即可。安装完毕之后,在命令行下验证是否安装成功:输入nmp,显示如下就表示安装成功。

  

  二、安装cnpm 

  安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度是超级慢啊。所以我们要安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。
  安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

  (如果上述方式提示版本过低,可以执行这个命令:npm --registry https://registry.npm.taobao.org info underscore )  

  

  三、安装vue-cli的
  vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

  # 全局安装 vue-cli
  cnpm install -g vue-cli  # 或 cnpm install --global vue-cli

    

  安装完后,检查是否安装成功,输入vue,出现以下提示表示安装成功。

  

  四、创建一个Vue项目

  进入到想要保存的目录下,输入:vue init webpack my-project,并按提升进行默认安装

  

  成功后应该提示如下信息,不过我的卡在了途中,但是也安装成功了。

  

  查看项目目录

  

  进入到my-project中,执行 cnpm install 安装依赖包,我的是在上一步就生产了node_modules目录,提示已经安装过。

  

  五、运行项目  

  在my-project中运行 cnpm run dev

  

  在浏览器中输入提示的运行地址 http://localhost:8080会看到如下内容,即证明安装运行成功

  

  

  参考文章:https://www.cnblogs.com/xuzhengzong/p/8672325.html

  

  

原文地址:https://www.cnblogs.com/iverson-3/p/11362253.html

时间: 2024-08-08 01:11:43

windows下搭建vue开发环境实践的相关文章

windows下搭建vue开发环境+IIS部署

特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装包,作者选择的是windows 64bit. 下载完毕,按照windows一般应用

【原创】win10下搭建vue开发环境+IIS部署

[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装

Windows下搭建PHP开发环境

Windows下搭建PHP开发环境 一.准备工作-所需软件 ·   Apache  \php\httpd-2.2.25-win32-x86-no_ssl.msi ·   PHP \php\php-5.3.1-Win32-VC6-x86.zip ·   Oracle client 10g\php\client 二.安装软件 安装Apache: 双击安装,与安装其他Windows软件没有什么区别,在填Server Infomation时,并没有特殊规定,只要输入的信息符合格式即可. 安装完成之后,在

Cocos2d-x 3.1.1 在Windows下搭建Android开发环境

Cocos2d-x 3.1.1 在Windows下搭建Android开发环境 本篇博客来给大家介绍如何在Windows下搭建Cocos2d-x Android开发环境,笔者前面写了几篇博客都是针对如何对Android项目进行交叉编译的,对应了Cocos2d-x 2.2.3版本和Cocos2d-x 3.0版本,其实3.0版本跟3.1.1是一样的,只是笔者介绍如何不适用命令行对Cocos2d-x Android项目进行交叉编译,而直接在Eclipse进行交叉编译. 前面几篇博客,如果有需要比较差别的

Windows下搭建PHP开发环境,整合Apache+PHP+MySQL(举例软件为32位)

原文来自:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html 在原作者的基础上,只是做了详细的解释.避免走弯路.(注:红色字体为本人加的) 一.准备工作-下载所需软件 Apache  httpd-2.2.22-win32-x86-openssl-0.9.8t.msi PHP       php-5.3.10-Win32-VC9-x86.zip MySQL   mysql-5.5.20-win32.msi 二.安装软件 安装A

[转]Windows下搭建PHP开发环境

原文:http://www.cnblogs.com/pharen/archive/2012/02/06/2340628.html PHP集成开发环境有很多,如XAMPP.AppServ......只要一键安装就把PHP环境给搭建好了.但这种安装方式不够灵活,软件的自由组合不方便,同时也不利于学习.所以我还是喜欢手工搭建PHP开发环境,需要哪个模块自己安装就行了,或者那个软件需要升级,直接升级那个软件就行了,并不影响其他软件,非常方便. 一.准备工作-下载所需软件 Apache  httpd-2.

Windows下搭建IOS开发环境(一)

我们都知道开发iPhone等ios平台的移动应用时需要使用Mac本,但是Mac本都比较昂贵,所以我们可以采用Windows7上利用VMWare安装Mac操作系统的方法来模拟ios开发环境,达到降低成本的目的. 1.相关配置 操作系统:windows7旗舰版 Work station:VMWare10 Mac操作操作系统:OS X 10.8 2.相关资源下载地址 (1)VMWare10的资源比较多,可以到网上自己下载 http://www.xp510.com/xiazai/ossoft/deskt

WINDOWS下搭建Android开发环境:

推荐链接: 1. http://www.cnblogs.com/skynet/archive/2010/04/12/1709892.html. (个人推荐,这位大神写的相当棒!) 一. 名词解释 JDK,Java开发环境.下载地址:http://www.oracle.com Eclipse,IBM公司开发的一款开源IDE.http://www.eclipse.org Android SDK,Android 开发工具,包含开发Android程序所需类库.源码.文档.案例等资源.http://www

在Windows下搭建Android开发环境

随着移动互联网的迅速发展,前端的概念已发生很大的变化,已不仅仅局限在网页端.而Android系统作为智能机市场的老大,作为前端开发工程师,非常有必要了解和学习.但面对众多学习资料,站在前端开发工程师的角色,怎样挑选出合适的路进行快速学习,而不必浪费大量时间去摸索,该系列文章希望能帮助到小伙伴们. 文章会挑选几个实际的例子,贯穿在整个系列中,涉及到Java.Android.程序设计等多方面知识,力求让大家快速掌握.俗话说,工欲善其事,必先利其器,系列的第一篇就从Window系统下Android的环