第一步:环境的搭建 :

vue推荐开发环境:

Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言(https://nodejs.org/zh-cn/download/)

npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/

node.js安装好之后呢 ,检查一下版本顺便看看是否已经安装成功。

win+R,输入cmd,接着输入node -v检测是否安装成功,顺便再输入npm-v 查看npm包管理器版本号

安装cnpm

在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待,安装完成如下图。

完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网

环境搭建好之后,开始安装vue啦

安装vue-cli脚手架构建工具

在命令行中运行命令npm install -g vue-cli,然后等待安装完成。通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

用vue-cli构建项目

要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。

在桌面目录下,在命令行中运行命令vue init webpack firstVue。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,

也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在桌面生成该文件夹),如下图。

运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

再重新win+r →cmd→ cd 项目文件夹→运行命令cnpm install,等待安装。

要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后

安装完成之后,会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源

接着 就该运行我们的项目了。

在项目目录中,运行命令npm run dev,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面

来源:http://www.cnblogs.com/wrrISjs/p/7759849.html

vue的安装的更多相关文章

  1. 10.2 Vue 环境安装

     Vue 环境安装 环境准备  nodejs 下载安装  https://nodejs.org/en/ 查看下载版本 C:\>node -v v7.6.0 C:\>npm -v 4.1.2 ...

  2. VUE项目安装

    连接转载:https://www.cnblogs.com/Colwill-Blog/p/6682091.html 刚刚开始学习Vue.js.今天分享一下我的Vue项目安装过程. 我是windows系统 ...

  3. node服务的安装以及vue的安装

    相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...

  4. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  5. 01: vue.js安装

    1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...

  6. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  7. VUE的安装与Django之间打通数据

    一  VUE的安装与项目创建 1.1.安装nodeJS 官网下载安装:https://nodejs.org/zh-cn/ 1.2.安装脚手架 vue官网 => 学习 => 教程 => ...

  8. Vue.js 安装及其环境搭建

    For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...

  9. Vue的安装并在WebStorm中运行

    一.Vue的安装需要两个支持分别为:nodejs.npm Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O ...

随机推荐

  1. Windows 安装 setuptools 和 feedparser

    一.安装setuptools: 页面: https://pypi.python.org/pypi/setuptools#downloads 1.下载该zip文件,解压,例如:C:\setuptools ...

  2. linux nexus bulid

    1. 将下载好的nexus-2.5.1-bundle.tar.gz包,用FTP工具传至服务器上. 2. 解压安装包 解压命令: ? 1     tar -zvxf nexus-2.5.1-bundle ...

  3. pandas的连接函数concat()函数

        pd.concat(objs, axis=0, join='outer', join_axes=None, ignore_index=False,   keys=None, levels=No ...

  4. iOS开发:一个高仿美团的团购ipad客户端的设计和实现(功能:根据拼音进行检索并展示数据,离线缓存团购数据,浏览记录与收藏记录的批量删除等)

    大致花了一个月时间,利用各种空闲时间,将这个客户端实现了,在这里主要是想记录下,设计的大体思路以及实现过程中遇到的坑...... 这个项目的github地址:https://github.com/wz ...

  5. 综合出现NSScanner: nil string argument libc++abi.dylib: terminat错误的解决方案

    在开发中出现了这个错误,断点查找很久,没找到问题所在的代码,google下,发现了下面这几点会产生这个错误: 首先,顾名思义,错误原因是我们在调用某个方法的时候,传入了一个空字符串(注意区别于字符串内 ...

  6. JAVA-JSP内置对象之request获得封装所有参数值的Map

    相关资料:<21天学通Java Web开发> 获得封装所有参数值的Map1.通过request对象的getParameterMap()方法来获得封装所有的参数值的Map对象.2.通过该Ma ...

  7. 在IIS中访问APS页面时提示:“最可能的原因使用的托管的处理程序,但是未安装或未完整安装asp.net“

    打开CMD窗口,执行下面的命令: "%WINDIR%\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe" -iru -ena ...

  8. How Not to Crash系列地址

    http://inessential.com/hownottocrash How Not to Crash #1: KVO and Manual Bindings How Not to Crash # ...

  9. WPF委托命令DelegateCommand的传参方式

    首先引用  Microsoft.Practices.Prism MVVM模式代码如下: XAML代码: <!-- 无参方式 --> <Button Content="Tes ...

  10. 防简单攻击iptables策略

    #!/bin/sh IPTABLES=/sbin/iptables # clear $IPTABLES -F # if pkg type is allow, then accept #$IPTABLE ...