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. VGA/DVI/HDMI/DP/Type-C等常用显示接口对比介绍

    在我们的生活中,无论是电脑.电视还是投影设备等等,都离不开视频输出接口,尤其在显卡上面,通常会出现3种甚至更多的接口.很多人并不了解其中的区别,觉得只要有画面输出就可以了,其实对于很多显示器来说并非如 ...

  2. (WCF) There is already a listener on IP endpoint 0.0.0.0:9999.

    有個nettcpbinding, service host總是不能起來,出現如題錯誤. 查了下,同樣的程序并沒有在進程裏面,但是看起來好像有其他的程序在占用這個Port C:\Program File ...

  3. BZOJ 3168 Luogu P4100 [HEOI2013]钙铁锌硒维生素 (矩阵求逆、二分图匹配)

    线性代数+图论好题. 题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?id=3168 (luogu) https://www.lu ...

  4. [CF1101F]Trucks and Cities:分治优化决策单调性

    分析 好像是有一个叫这个名字的算法,链接. 令\(f[i][j][k]\)表示一辆每公里耗油量为\(1\)的货车从\(i\)到\(j\)中途加\(k\)次油最小的油箱容量.枚举所有的起点和中途加油的次 ...

  5. [spring jpa] 解决SimpleJpaRepository的多数据源配置问题

    前言 前段时间使用spring jpa做了一个项目,由于涉及到了多个数据库,因此需要进行多数据源的配置.网上找了很多的资料,尝试着配置,都以失败告终.之后通过断点最终完成了多数据源的配置.这篇博客主要 ...

  6. 白鹭http请求post

    示例demo: //new http请求 var request = new egret.HttpRequest(); //请求参数 var params = "p1=postP1& ...

  7. React Native商城项目实战02 - 主要框架部分(tabBar)

    1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...

  8. 506C Mr. Kitayuta vs. Bamboos

    分析 代码 #include<bits/stdc++.h> using namespace std; #define int long long ],h[],now[],cnt[]; in ...

  9. 旋转数组 空间复杂度为O(1) 的2 种方法 + 1种空间复杂度O(n)

    题目地址 : 旋转数组. 网上好多不是根本就是错的,就是空间复杂度不是真正为1 下面总结一下 方法1 普通方法(空间复杂度不满足要求,但是题目并不会判错,说明他们没用对空间进行校验) ··· publ ...

  10. @Aspect 注解切面解析

    注解切面解析 注解切面解析器 /** * 注解切面解析器 */ public class BeanFactoryAspectJAdvisorsBuilder { /** * Bean 工厂 */ pr ...