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. 通过ecplise导入mysql的jar包时,右键找不到build path问题

    当我们执行java连接数据库程序的时候,我们需要再我们的项目里导入mysql的jar包,这时,我们需要右键->build path进行导入,但是有时候我们右键的时候并没有出现build path ...

  2. Oracle-RAC sysdate和current_date时间不一致,导致客户端连接时间延迟

    [oracle@oracle-db1 ~]$ dateTue Oct 10 14:20:56 CST 2017[oracle@oracle-db1 ~]$ cat /etc/sysconfig/clo ...

  3. python双划线类型

    通过__开始的属性感觉分为两种类型: 利用dir调用的时候: < build in x object at 0x01F116B0>:这种貌似和运算符重载有关系,用户如果需要的话可以重写该函 ...

  4. Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)

    private void SMT(HttpContext context) { string SqlConnection82 = System.Configuration.ConfigurationM ...

  5. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  6. 使用discriminator实现鉴别器

    1在人员接口实现方法 public Employee getEmpByIdStep(Integer id); 2在映射文件进行配置 <!-- public Employee getEmpById ...

  7. P1309 瑞士轮 (吸氧了)

    P1309 瑞士轮 题解 1.这题可以模拟一下 2.sort吸氧可以过(可能是排序有点慢吧,不开会T) sort排序时注意: return 1 是满足条件,不交换 return 0是不满足,交换 代码 ...

  8. Flask中的request模板渲染Jinja以及Session

    Flask中的request与django相似介绍几个常用的以后用的时候直接查询即可 1.request from flask import request(用之前先引用,与django稍有不同) r ...

  9. 使用virt-manager创建无盘工作站(基于nfs文件系统)

    首先需要做些准备工作: 1.安装xming及virt-manager, 安装过程网上很多,就不一一叙述了.安装完成后,使用putty登陆服务器,需要配置如下: connection -> SSH ...

  10. java网络通信:netty

    Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty 是一个基于NIO的客户,服务器端编程框架,使用Netty 可以确保 ...