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. Bootstap

    Bootstrap框架 Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序 ...

  2. 手写ORM

    利用ORM把mysql中的数据封装成对象,通过对象点语法来获取mysql中的数据,所以自己手写一个ORM,方便我们操作数据 一.ORM:对象关系映射 类 >>> 数据库的一张表 对象 ...

  3. Spring Boot教程(五)调度任务

    构建工程 创建一个Springboot工程,在它的程序入口加上@EnableScheduling,开启调度任务. @SpringBootApplication @EnableScheduling pu ...

  4. java后台转json、转对象、转list集合

    前台数据传递到后台转json 1.普通格式转换成对象 String data=request.getParameter("data"); //单数据的时候转换方式 JSONObje ...

  5. git创建公钥匙

    目的: 使用SSH公钥可以让你在你的电脑和码云通讯的时候使用安全连接(git的remote要使用SSH地址) 1.打开终端进入.ssh目录输入当下命令 cd ~/.ssh 如果.ssh文件夹不存在,执 ...

  6. Vue中computed、methods、watch的联系和区别

    computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...

  7. python函数的参数问题

    语法 def functionname( parameters ): "函数_文档字符串" function_suite return [expression] 参数问题 必备参数 ...

  8. lr参数与C语言函数参数的区别

    C变量不能再lr函数中使用: c变量必须定义在lr函数之前: LR参数可以在LR函数中直接当做字符串使用. LR参数是lr自己封装的一个钟对象, LR参数的表达方式:{ParamName}

  9. docker-容器完整构建过程

    container 代码app,构建,运行,分享(推送)image mkdir img1 cd img1 [root@cu-tmp-201 img1]# ls app.py Dockerfile re ...

  10. 测开之路一百二十八:flask之重定向和404

    a.b两个视图,分别返回a的页面和b的页面 重定向:redirect 重定向到路由:请求/a/时,重定向到/b/ 重定向到视图函数:url_for(“函数名“),访问/a/时,重定向到函数b() 主动 ...