NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,本文只介绍如何通过NPM进行安装Vue.js

NodeJS官方网站:http://nodejs.cn/download/

通过官网下载并安装NodeJS即可在cmd执行npm指令

淘宝npm镜像:由于默认使用的是国外的镜像,这会有时候导致下载vue时网速过慢或连接超时,推荐使用淘宝镜像cnpm指令安装,执行以下代码即可。

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

完成淘宝镜像的安装后 ,我们就可以开始安装vue的依赖包了

1.执行以下命令安装vue依赖包

npm install -g vue-cli

执行后结果:

安装后 输入命令 vue -V(必须大写V)查看vue版本号,若出现有版本号信息则安装成功

vue -V

2.新建Vue工程目录

先通过cd命令指向要新建项目所在的目录,以下代码通过在C盘根目录下新建一个名为 “test”的文件夹 存放

win10默认存放地址为:C:\User\USER(计算机用户名)

cd C:\
md test
cd test

通过以下指令完成工程目录创建

vue init webpack my-project

输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

Project name : 项目名称 填写或直接回车
Project description:项目描述  根据自己需求填写 可直接回车
Author:作者名 写个人信息或直接回车跳过
Install  vue-router? 安装vue的路由插件 建议选Y
Use ESLint to lint your code? 是否用ESLint来限制代码风格。初学者建议选N
setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha 建议选Y
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试 建议选N
Should we run `npm install` for you after the project has been created?
是否在创建项目后执行npm install? 选择NO,由于直接用npm install会调用国外镜像 下载速度可能较慢,文章后面会说到用国内镜像使用npm install,没有安装国内镜像的朋友可以直接使用YES ,use NPM

安装完成后打开目录C:\TEST(或者自己cd的地址上)即可看到项目已经创建完成

3.运行项目

先通过cd my-project(项目名)进入项目目录

cd my-project

使用cnpm install进行安装部署

cnpm install

安装部署成功后最后会出现这样一句即完成安装

最后通过npm run dev运行项目

npm run dev

运行后 出现该图即运行成功

测试:

运行command上显示的地址:http://localhost:8080,若出现欢迎使用vue的页面即运行成功

(新手入门,学习笔记)通过NPM进行Vue.js的安装的更多相关文章

  1. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

  2. 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)

    [原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...

  3. Three入门学习笔记整理

    一.官方网站:https://threejs.org 二.关于Three.js 三.开始 四.实例 基本结构 结果 五.概念 坐标系 场景 相机 灯光 3D模型 六.简单动画 七.交互控制 结束 # ...

  4. 人工智能新手入门学习路线和学习资源合集(含AI综述/python/机器学习/深度学习/tensorflow)

    [说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![握手][握手] 1. 分享个人对于人工智能领域的算法综述:如果你想开始学习算法,不妨先了解人工 ...

  5. Vue.js 学习笔记之五:编译 vue 组件

    正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...

  6. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  7. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  8. PyQt4入门学习笔记(三)

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  9. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

随机推荐

  1. [CF1093G]Multidimensional Queries:线段树

    分析 非常有趣的一道题. 式子中的绝对值很难处理,但是我们发现: \[\sum_{i=1}^{k}|a_{x,i}-a_{y,i}|=\sum_{i=1}^{k}max(a_{x,i}-a_{y,i} ...

  2. redis 安装 主从同步 哨兵模式

    一.redis 的安装1.先将安装包放到linux的一个文件夹下面 2.解压压缩包如图所示 3.解压后进入解压文件 4.安装: make 出现it.s a good idea to run 'make ...

  3. jconsole性能监控

    1.进入tomcat bin目录 vim catalina.sh #!/bin/sh下面加入: #!/bin/shJAVA_OPTS="-Dcom.sun.management.jmxrem ...

  4. DVWA--CSP Bypass

    0x01看到标题,是否有点疑惑 CPS 是什么东东.简单介绍一下就是浏览器的安全策略,如果 标签,或者是服务器中返回 HTTP 头中有 Content-Security-Policy 标签 ,浏览器会 ...

  5. 20175221 曾祥杰 数据库MySQL(课下作业,必做)

    数据库MySQL(课下作业,必做) 题目要求: 1. 下载附件中的world.sql.zip, 参考http://www.cnblogs.com/rocedu/p/6371315.html#SECDB ...

  6. jquery.fileupload-image-editor.js 中actions.resizeImage

    https://github.com/ChuckForkJS/jQuery-File-Upload/blob/master/js/jquery.fileupload-image-editor.js a ...

  7. RTMP服务器的延迟,多级边缘不影响延迟,gop为最大因素

    转自:http://blog.chinaunix.net/uid-26000296-id-4932826.html 编码器用FMLE,用手机秒表作为延迟计算. 结论: 1. 影响延迟的三个重要因素:网 ...

  8. C#中winform下利用ArcEngine调用ArcGIS Server发布的服务 AE9.3

    主要使用了AE中的IAGSServerOject接口及IMapServer接口.Private void GetServerTest_Click(object sender, EventArgs e) ...

  9. Delphi XE2 之 FireMonkey 入门(39) - 控件基础: TScrollBox、TVertScrollBox、TFramedScrollBox、TFramedVertScrollBox

    Delphi XE2 之 FireMonkey 入门(39) - 控件基础: TScrollBox.TVertScrollBox.TFramedScrollBox.TFramedVertScrollB ...

  10. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_4 mybatis中使用unpooled配置连接池的原理分析

    把之前的CRUD的代码src下的代码都复制过来 依赖项也都复制过来, 配置文件 整理一番 执行findAll方法的测试 查看日志的输出部分 修改程序池 再来执行findAll方法 Plooled从连接 ...