[Vue安装教程]十分钟学会vue 安装
【总结】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 安装的更多相关文章
- PHP学习过程_Symfony_(3)_整理_十分钟学会Symfony
这篇文章主要介绍了Symfony学习十分钟入门教程,详细介绍了Symfony的安装配置,项目初始化,建立Bundle,设计实体,添加约束,增删改查等基本操作技巧,需要的朋友可以参考下 (此文章已被多人 ...
- ISE 14.7安装教程最新版(Win10安装)——解决Win10安装完后打不开快捷方式的方法
ISE 14.7安装教程最新版(Win10安装) Xilinx ISE是一款世界著名的硬件设计软件,它为设计流程的每一步都提供了直观的生产力增强工具,覆盖从系统级设计探索.软件开发和基于HDL硬件设计 ...
- Docker和Docker-compose安装教程以及docker-elk,docker-storm安装教程
此安装教程仅供我自己安装配置时查看,其他的人不可以偷看!!! 安装Docker 1. Update package information, ensure that APT works with th ...
- Windows系统Git安装教程(详解Git安装过程)
Windows系统Git安装教程(详解Git安装过程) 今天更换电脑系统,需要重新安装Git,正好做个记录,希望对第一次使用的博友能有所帮助! 获取Git安装程序 到Git官网下载,网站地址: ...
- 2021最新WordPress安装教程(三):安装WordPress详细步骤
前面已经通过< 2021最新WordPress安装教程(一):Centos7安装Apache>和< 2021最新WordPress安装教程(二):配置PHP和MySQL>两篇文 ...
- 2021最新WordPress安装教程(二):安装PHP和MySQL
这是 2021最新WordPress安装教程系列的第二篇文章,前一篇文章< 2021最新WordPress安装教程(一):Centos7安装Apache>已经完整的介绍了如何在Centos ...
- 十分钟学会 tmux
tmux 是一款终端复用命令行工具,一般用于 Terminal 的窗口管理.在 macOS 下,使用 iTerm2 能应付绝大多数窗口管理的需求. 如上图所示,iTerm2 能新建多个标签页(快捷键 ...
- 零基础十分钟学会用git在coding.net上传(pull)和push
---恢复内容开始--- 对于入门者来说,特别是刚刚接触计算机的人来说,模仿是最快的学习方式了,先能够会使用(对于初学者来说,这种使用新事物的感觉很能爽的)至于原理,以后再说.下面先让初学者快速的学会 ...
- vue学习(十二)vue全家桶 Vue-router&Vuex
一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...
随机推荐
- HttpStatus各种状态
JS.ns("JS.HTTPStatus","JS.XMLHttpRequest"); /** * FC 2616 HTTP1.1规范的HTTP Status状 ...
- Given two binary string, return their sum (also a binary string)
主要思路:将二进制转化为十进制,然后进行十进制加法,最后再将加法所得的结果转化为二进制 public class BinarySum2 { public static void main(String ...
- Java位操作
无论说是在哪一门计算机语言,位操作运算对于计算机来说肯定是最高效的,因为计算机的底层是按就是二进制,而位操作就是为了节省开销,加快程序的执行速度,以及真正的实现对数的二进制操作. 使用位操作 ...
- React Native 系列(六) -- PropTypes
前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...
- WCF项目的架构设计
本文将介绍以WCF开发项目为主的架构设计,主要从类库的分类和代码的结构. 下面将以一个WCF实例做具体的介绍.此项目底层是一个Windows Service,WCF服务Hosted在此Windows ...
- js判断移动终端(手机浏览器)
方法1: <script type="text/javascript"> var browser = { versions: f ...
- Asp.net中,从弹出窗体取选择值(转)
在Asp.net中,从A页面中弹出B页面,在B页面中选择数据后,关闭并将数据更新到A页面,是一种常用 的方式.只是我对Javascript不熟悉,所以捣鼓了一下午,终于有了一点成绩:测试项目有两个页面 ...
- LoadRunner+Android模所器录制脚本
为了测试Android软件的服务端的功能,需要重现某些客户端操作,便于发现功能问题,性能问题.也方便客户端与本机服务端特别是服务端代码进行断点调试.这个时候需要对网络操作进行重现. loadRunne ...
- [mark] first shellcode
好久没写博客了,今天终于搞出了第一个shellcode,以此mark一下. #include "stdafx.h" #include <Windows.h> #incl ...
- fineui webform
基于 jQuery 的专业 ASP.NET WebForms/MVC 控件库