【总结】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. nopcommerce的WidgetZones

    来自:http://www.kingreatwill.com Hi, Having just started developing nopCommerce (and having forked out ...

  2. NYOJ 23.取石子(一)

    取石子(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 一天,TT在寝室闲着无聊,和同寝的人玩起了取石子游戏,而由于条件有限,他/她们是用旺仔小馒头当作石子.游 ...

  3. Mac 如何优雅的使用Microsoft office

    近期要使用文档编辑,但是发现mac下的pages实在不好用,或者说是不习惯,想安装个office  发现官方的office 都基本上要收费,网上的多数都要激活.实在没办法(没钱),看看WPS ,结果w ...

  4. android学习ViewPager的简单使用

    使用ViewPager需要引入android.support.v4.View.ViewPager这样的jar包,谷歌公司为解决当前版本碎片化的问题,提供的兼容的包.主要目的就是解决向下兼容问题. 1, ...

  5. fstab设置开机挂载--鸟哥[阅读]

    設定開機掛載: 手動處理 mount 不是很人性化,我們總是需要讓系統『自動』在開機時進行掛載的!本小節就是在談這玩意兒! 另外,從 FTP 伺服器捉下來的映像檔能否不用燒錄就可以讀取內容?我們也需要 ...

  6. SSH服务(一)

    一.初始SSH SSH是标准的网络协议,可用于大多数UNIX操作系统,能够实现字符界面的远程登录管理,它默认使用22号端口,采用密文的形式在网络中传输数据,相对于通过明文传输的Telnet,具有更高的 ...

  7. nopCommerce安装教程

    nopCommerce是一个通用的电子商务平台,适合每个商家的需要:它强大的企业和小型企业网站遍布世界各地的公司销售实体和数字商品.nopCommerce是一个透明且结构良好的解决方案,它结合了开源和 ...

  8. 初学python类

    边看python官方2.7的文档,一边动手测试了一些例子加深自己的印象. 官方文档的网址:http://python.usyiyi.cn/python_278/tutorial/classes.htm ...

  9. win10 安装 mysql解压版安装步骤

    参考资料:win 10 安装 mysql 5.7 网址:http://blog.sina.com.cn/s/blog_5f39af320102wbk0.html 本文参考上面的网址的教程,感谢作者分享 ...

  10. Python第一天---第一个Python程序

    1.我的环境是windows下,需要安装notepad++,安装Python2,配置环境变量(百度下可以见) 2.打开cmd窗口-----输入I:  [输入要在哪个磁盘存储python代码(我的在I: ...