第一步,需要下载并安装node.js以及他的npm组件;

  第二步,用node -v;npm -v来测试node.js以及npm是否安装成功(建议用GIT命令行工具,因为GIT是linux系统),如果显示出它的版本,说明已经安装成功,如下图;

  

  第三步,下载vue-cli,在命令行中输入npm install -g vue-cli,自动下载vue-cli(会生成一大堆的依赖文件)如下图;

  

  第四步,命令行中输入vue,测试vue是否安装成功,安装成功,如下图;

  

  第五步,命令行vue list看vue中有哪些子类,如下图;

  

  第六步,用vue init webpack ***命令行,下载webpack包,(***代表项目的名字,为英文,如sanfeng1)如下图;

  

    在安装时会询问你,①、Project name (sanfeng1);项目名称(sanfeng1)。(确定按enter,否按N)

             ②、 Project description (A Vue.js project);项目描述(一vue.js项目)。(随意输入一段简短介绍,用英文)

             ③、Author (sunsanfeng);作者(sunsanfeng)。(确定按enter,否按N)

             ④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render         functions are required elsewhere;Vue公司的建立(使用箭头键)>运行时+编译器:大多数用户推荐运行时间:约6kb轻民+ gzip,但模板(或任何Vue具体HTML)只允许在。VUE文件渲染功能是必需的其他地方。(按enter)

             ⑤、Install vue-router? (Y/n);安装的路由?(/ N)。(可安可不安,以后也可以再安,根据需求选择)

            ⑥、Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ N)。(使用ESLint语法,就要做好心理准备,除非你非常懂ESLint语法,要不就会处处报错,我就被逼疯过,建议N)

            ⑦、Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(选N)

            ⑧、Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(选N)

      出现如下图,说明已经安装成功;

      

  默认情况下,webpack安装的是最新版本的,如果要安装其他版本,使用命令行vue init webpack#1.0 ***就可以了。

  第七步,进入我们刚才创建的项目,cd sanfeng1,并安装依赖npm install,安装成功,如下图;

  

  第八步,运行这个项目 npm run dev运行成功,如下图;

  

  在浏览器打开地址以及端口号,就可以看见我们的项目了。

  

  

vue-cli webpack在node环境下安装使用的更多相关文章

  1. node环境下安装vue-cli

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

  2. linux环境下安装sphinx中文支持分词搜索(coreseek+mmseg)

     linux环境下安装sphinx中文支持分词搜索(coreseek+mmseg) 2013-11-10 16:51:14 分类: 系统运维 为什么要写这篇文章? 答:通过常规的三大步(./confi ...

  3. 在Hadoop1.2.1分布式集群环境下安装hive0.12

    在Hadoop1.2.1分布式集群环境下安装hive0.12 ● 前言: 1. 大家最好通读一遍过后,在理解的基础上再按照步骤搭建. 2. 之前写过两篇<<在VMware下安装Ubuntu ...

  4. 在windos 环境下安装

    在windows 环境下安装node 和 StrongLoop需要一些几个步骤. 本人使用的安装软件,文章最后的分享. 1,安装Git: 2,安装Node.js: 3,安装npm: 4,安装Stron ...

  5. Linux环境下安装NodeJS和mongoDB

    前面的话 本文将详细介绍如何下Linux环境下安装NodeJS和mongoDB NodeJS [1]使用二进制包安装 1.在官网下载Linux环境下的NodeJS安装包 2.通过xftp软件将安装包上 ...

  6. Elasticsearch Docker环境下安装

    Elasticsearch Docker环境下安装 Daemon镜像配置的是https://registry.docker-cn.com Linux:vi /etc/docker/daemon.jso ...

  7. node环境下:node_modules里面的文件

    node环境下:node_modules里面的文件 package.json来制定名单,需要哪些npm包来参与到项目中来,npm install命令根据这个配置文件增减来管理本地的安装包. depen ...

  8. YApi——手摸手,带你在Win10环境下安装YApi可视化接口管理平台

    手摸手,带你在Win10环境下安装YApi可视化接口管理平台 YApi YApi 是高效.易用.功能强大的 api 管理平台,旨在为开发.产品.测试人员提供更优雅的接口管理服务.可以帮助开发者轻松创建 ...

  9. 【转】windows环境下安装win8.1+Mac OS X 10.10双系统教程

    先要感谢远景论坛里的各位大神们的帖子  没有他们的分享我也不能顺利的装上Mac OS X 10.10! 写这篇随笔主要是为了防止自己遗忘,同时给大家分享下我的经验. 本教程适用于BIOS+MBR分区的 ...

随机推荐

  1. JavaScript 小函数积累及性能优化

    获取值的类型: var toString = Object.prototype.toString; function getType(o) { return toString.call(o).slic ...

  2. Spring Boot启动过程(七):Connector初始化

    Connector实例的创建已经在Spring Boot启动过程(四):Spring Boot内嵌Tomcat启动中提到了: Connector是LifecycleMBeanBase的子类,先是设置L ...

  3. 开启新模式WinForm

    从今天开始咱们正式进入WinForm开发模式 首先很官方的介绍下什么是winform:客户端应用程序:C/S 这就是winform 有什么特别特别重要的特点呢:可以操作用户电脑上的文件 举个简单的例子 ...

  4. css3常用方法以及css3选择器

    最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面   CSS3 边框   CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...

  5. IOS的控制器

    控制器简单来说,就是用来做界面跳转的,类似于 Android 的Intent 1.创建一个控制器 控制器的常见的创建方式 )通过storyboard创建 //直接创建 NJViewController ...

  6. IOS对话框UIAlertView

    //修改弹出对话框的样式 alertView.alertViewStyle = UIAlertViewStylePlainTextInput; //根据索引获取指定的某个文本框 [alertView ...

  7. 根据优先关系矩阵使用逐次加一发构造优先函数(Java)

    若已知运算符之间的优先关系,可按如下步骤构造优先函数: 1.对每个运算符a(包括#在内)令f(a)=g(a)=1 2.如果a⋗b且f(a)<=g(b)令f(a)=g(b)+1 3.如果a⋖b且f ...

  8. kafka的高可用和一致性探究

    一.kafka基础 本篇文章讨论的kafka版本是目前最新版 0.10.1.0. 1.1 kafka种的KafkaController 所有broker会通过ZooKeeper选举出一个作为Kafka ...

  9. dubbo高级配置学习

    启动时检查 可以通过check="false"关闭检查,比如,测试时,有些服务不关心,或者出现了循环依赖,必须有一方先启动. 关闭某个服务的启动时检查:(没有提供者时报错) < ...

  10. 模板不存在:./xx 错误位置 FILE: LINE:110 (thinkphp上传至服务器后模板无法解析原因)

    thinkphp上传至服务器后模板无法解析原因 前几日做好的响应式静态页面上传至虚拟空间,打开网址地址出现: 模板不存在:./App/Admin/View/Config/customerService ...