【总结】Vue的安装主要有一下几个步骤:

1、安装npm淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、安装脚手架工具vue-cli
cnpm install -g vue-cli
3、创建新的项目
vue init webpack my-project
4、进入项目路径
cd my-project
5、安装项目文件
cnpm install
6、运行项目
cnpm run dev

【安装过程】 

1、在安装Vue之前需要先安装git和node

安装git,下载网址https://git-scm.com/downloads/,按提示安装,完成后把git bash的快捷方式放到桌面,打开后的效果如下图

安装node,进入nodejs的官网的下载页面https://nodejs.org/en/download/,根据电脑选择安装包,我这里是64位的windows系统,所以我选如下图

下载完成后一路next即可完成安装,打开git bash,输入node –v和npm –v,如果能正确输出版本号,则说明安装包安装成功,效果如图:

 2、安装Vue

2.1安装npm的淘宝镜像

由于npm国内的访问速度很慢,我们一般使用淘宝的镜像,在git bash里面输入如下代码(注意代码registry后面不要有空格):

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

安装完成后会出现如下的代码:(会有点慢,需要等待一会)

2.2全局安装vue-cli

cnpm install -g vue-cli

2.3创建项目

创建一个基于 webpack 模板的新项目,项目名为my-project

vue init webpack my-project

新手创建项目的时候,所有选项选择否N,以免代码出现错误,后期进阶到高级的时候可以自己重新创建。

出现如上的代码,则说明安装成功,这里只需要按快捷键CTRL+C就可以退出当前页面,进入命令输入界面

上面安装的位置是在,git bash的头部信息上可以看到安装的位置,然后进入到项目的文件夹里面,这里是进入到my-project文件夹

2.4进入项目路径

cd my-project       

输入ls可以查看当前目录下有哪些文件夹和文件

输入ll –a可以查看当前目录下文件的详细信息

2.5安装运行

cnpm install

当出现如下代码则说明安装成功:

运行我们的项目,这里的代码是加上cnpm的:

cnpm run dev

安装完成之后允许上面的代码,会显示如下的代码:

出现这些代码之后,页面会自动跳转到页面http://localhost:8080/#/,页面如下:

【Vue安装中常见错误

错误1:提示错误,Error: Cannot find module 'chalk'

这是因为在执行代码cnpm run dev之前漏掉了关键的一步,即安装项目文件cnpm install,在运行之前先安装项目文件,即可以解决。

其他...

[Vue安装教程]十分钟学会vue 安装的更多相关文章

  1. PHP学习过程_Symfony_(3)_整理_十分钟学会Symfony

    这篇文章主要介绍了Symfony学习十分钟入门教程,详细介绍了Symfony的安装配置,项目初始化,建立Bundle,设计实体,添加约束,增删改查等基本操作技巧,需要的朋友可以参考下 (此文章已被多人 ...

  2. ISE 14.7安装教程最新版(Win10安装)——解决Win10安装完后打不开快捷方式的方法

    ISE 14.7安装教程最新版(Win10安装) Xilinx ISE是一款世界著名的硬件设计软件,它为设计流程的每一步都提供了直观的生产力增强工具,覆盖从系统级设计探索.软件开发和基于HDL硬件设计 ...

  3. Docker和Docker-compose安装教程以及docker-elk,docker-storm安装教程

    此安装教程仅供我自己安装配置时查看,其他的人不可以偷看!!! 安装Docker 1. Update package information, ensure that APT works with th ...

  4. Windows系统Git安装教程(详解Git安装过程)

    Windows系统Git安装教程(详解Git安装过程)   今天更换电脑系统,需要重新安装Git,正好做个记录,希望对第一次使用的博友能有所帮助! 获取Git安装程序   到Git官网下载,网站地址: ...

  5. 2021最新WordPress安装教程(三):安装WordPress详细步骤

    前面已经通过< 2021最新WordPress安装教程(一):Centos7安装Apache>和< 2021最新WordPress安装教程(二):配置PHP和MySQL>两篇文 ...

  6. 2021最新WordPress安装教程(二):安装PHP和MySQL

    这是 2021最新WordPress安装教程系列的第二篇文章,前一篇文章< 2021最新WordPress安装教程(一):Centos7安装Apache>已经完整的介绍了如何在Centos ...

  7. 十分钟学会 tmux

    tmux 是一款终端复用命令行工具,一般用于 Terminal 的窗口管理.在 macOS 下,使用 iTerm2 能应付绝大多数窗口管理的需求. 如上图所示,iTerm2 能新建多个标签页(快捷键 ...

  8. 零基础十分钟学会用git在coding.net上传(pull)和push

    ---恢复内容开始--- 对于入门者来说,特别是刚刚接触计算机的人来说,模仿是最快的学习方式了,先能够会使用(对于初学者来说,这种使用新事物的感觉很能爽的)至于原理,以后再说.下面先让初学者快速的学会 ...

  9. vue学习(十二)vue全家桶 Vue-router&Vuex

    一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...

随机推荐

  1. HttpStatus各种状态

    JS.ns("JS.HTTPStatus","JS.XMLHttpRequest"); /** * FC 2616 HTTP1.1规范的HTTP Status状 ...

  2. Given two binary string, return their sum (also a binary string)

    主要思路:将二进制转化为十进制,然后进行十进制加法,最后再将加法所得的结果转化为二进制 public class BinarySum2 { public static void main(String ...

  3. Java位操作

    无论说是在哪一门计算机语言,位操作运算对于计算机来说肯定是最高效的,因为计算机的底层是按就是二进制,而位操作就是为了节省开销,加快程序的执行速度,以及真正的实现对数的二进制操作.      使用位操作 ...

  4. React Native 系列(六) -- PropTypes

    前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...

  5. WCF项目的架构设计

    本文将介绍以WCF开发项目为主的架构设计,主要从类库的分类和代码的结构. 下面将以一个WCF实例做具体的介绍.此项目底层是一个Windows Service,WCF服务Hosted在此Windows ...

  6. js判断移动终端(手机浏览器)

    方法1: <script type="text/javascript">         var browser = {             versions: f ...

  7. Asp.net中,从弹出窗体取选择值(转)

    在Asp.net中,从A页面中弹出B页面,在B页面中选择数据后,关闭并将数据更新到A页面,是一种常用 的方式.只是我对Javascript不熟悉,所以捣鼓了一下午,终于有了一点成绩:测试项目有两个页面 ...

  8. LoadRunner+Android模所器录制脚本

    为了测试Android软件的服务端的功能,需要重现某些客户端操作,便于发现功能问题,性能问题.也方便客户端与本机服务端特别是服务端代码进行断点调试.这个时候需要对网络操作进行重现. loadRunne ...

  9. [mark] first shellcode

    好久没写博客了,今天终于搞出了第一个shellcode,以此mark一下. #include "stdafx.h" #include <Windows.h> #incl ...

  10. fineui webform

    基于 jQuery 的专业 ASP.NET WebForms/MVC 控件库