当前位置: 首页 > news >正文

[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,在运行之前先安装项目文件,即可以解决。

其他...

 

转载于:https://www.cnblogs.com/zhanai/p/7526127.html

相关文章:

  • 我也来开博
  • Ora2Pg的安装和使用
  • 简单记录几个有用的sql查询
  • springboot_database项目介绍
  • 使用window-based模板创建一个单view程序(转)
  • Python初学基础
  • OSPF分解试验部分-LAB10:OSPF外部路由汇总
  • 问题-百度云同步盘登陆时提示155010错误
  • 电脑启动时必须要按F1才能进入系统
  • mongodb 配置单实例与双实例
  • 2017-9-16
  • 10、Windows驱动开发技术详解笔记(6) 基本语法回顾
  • 防止重复提交
  • SQL合并数据
  • jdk1.8新特性
  • 2019.2.20 c++ 知识梳理
  • angular2 简述
  • egg(89)--egg之redis的发布和订阅
  • express如何解决request entity too large问题
  • javascript从右向左截取指定位数字符的3种方法
  • JavaScript类型识别
  • js正则,这点儿就够用了
  • Kibana配置logstash,报表一体化
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • PV统计优化设计
  • python3 使用 asyncio 代替线程
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • ReactNativeweexDeviceOne对比
  • TCP拥塞控制
  • Vue实战(四)登录/注册页的实现
  • 多线程事务回滚
  • 工作中总结前端开发流程--vue项目
  • 离散点最小(凸)包围边界查找
  • 前端
  • 悄悄地说一个bug
  • 深入 Nginx 之配置篇
  • 微服务入门【系列视频课程】
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 智能网联汽车信息安全
  • ​批处理文件中的errorlevel用法
  • !!【OpenCV学习】计算两幅图像的重叠区域
  • # 执行时间 统计mysql_一文说尽 MySQL 优化原理
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • #在 README.md 中生成项目目录结构
  • (12)目标检测_SSD基于pytorch搭建代码
  • (3)nginx 配置(nginx.conf)
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (差分)胡桃爱原石
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (详细版)Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models
  • (一)SpringBoot3---尚硅谷总结
  • (转)拼包函数及网络封包的异常处理(含代码)
  • (转)详解PHP处理密码的几种方式
  • .class文件转换.java_从一个class文件深入理解Java字节码结构