一、 安装 node.js

首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399

安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

二、安装 vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:

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

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

同样可以使用 cnpm -v 查看是否安装成功

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

三,生成项目

首先windows按键+R打开这个窗口,输入cmd点击确定进入命令行界面

首先输入vue init webpack auth(项目名称)命令,然后会出现下面的内容,第一行至第四行直接按回车键即可,第五行是问你是否确认安装vue-router,我们这里选择安装,剩下的几行选择NO

然后我们输入cd auth(项目名称)进入这个项目,再输入npm install进行一些必要的安装,一直等到安装完成即可,这里时间可能会长一点,耐心等待

然后输入npm run dev即可

这是生成的项目目录结构,我们一般是在src\components下面写模板,就是所谓的单页面,生成以后默认会有一个Hello.vue

每个页面都是这样的结构,第一部分是html,第二部门是js,第三部分是css

vue_cli安装的更多相关文章

  1. vue_cli 安装

    1.安装node 2.cmd node-v3.如果是刚刚安装输入 node-v 会成功出现版本 如果不是全局安装 过段时间输入 node-v会出现 'node' 不是内部或外部命令,也不是可运行的程序 ...

  2. 新启vue_cli项目+引入Element

    [1]安装vue_cli vue init webpack 项目名字 [2]安装Element-UI cnpm install element-ui -S //写入dependencies cnpm ...

  3. docker——容器安装tomcat

    写在前面: 继续docker的学习,学习了docker的基本常用命令之后,我在docker上安装jdk,tomcat两个基本的java web工具,这里对操作流程记录一下. 软件准备: 1.jdk-7 ...

  4. 网络原因导致 npm 软件包 node-sass / gulp-sass 安装失败的处理办法

    如果你正在构建一个基于 gulp 的前端自动化开发环境,那么极有可能会用到 gulp-sass ,由于网络原因你可能会安装失败,因为安装过程中部分细节会到亚马逊云服务器上获取文件.本文主要讨论在不变更 ...

  5. Sublime Text3安装JsHint

    介绍 Sublime Text3使用jshint依赖Nodejs,SublimeLinter和Sublimelinter-jshint. NodeJs的安装省略. 安装SublimeLinter Su ...

  6. Fabio 安装和简单使用

    Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...

  7. gentoo 安装

    加载完光驱后 1进行ping命令查看网络是否通畅 2设置硬盘的标识为GPT(主要用于64位且启动模式为UEFI,还有一个是MBR,主要用于32位且启动模式为bois) parted -a optima ...

  8. Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part3:db安装和升级

    Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part3:db安装和升级 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 5.安装Database软件 5. ...

  9. Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作

    Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...

随机推荐

  1. gcc和g++使用澄清

    一:gcc与g++比较 编译c/c++代码的时候,有人用gcc,有人用g++,于是各种说法都来了,譬如c代码用gcc,而 c++代码用g++,或者说编译用gcc,链接用g++,一时也不知哪个说法正确, ...

  2. eclipse项目中将普通文件夹转化成资源文件夹

    1.点选该文件夹 2.右键属性Properties 3.选择属性:Build Path 4.点选属性:Use as  Source Folder ......等待变成资源文件夹 参考更详细的: ecl ...

  3. 关于Java中集合的讲解~

    http://blog.csdn.net/zccst/article/details/5092816 comparable& Comparator 都是用来实现集合中的排序的,只是Compar ...

  4. Excel开发学习笔记:发布VSTO下的Excel开发项目

    遇到一个数据处理自动化的问题,于是打算开发一个基于excel的小工具.在业余时间一边自学一边实践,抽空把一些知识写下来以备今后参考,因为走的是盲人摸象的野路子,幼稚与错误请多包涵. 开发环境基于VST ...

  5. C# 获取图片某像素点RGB565值

    Project Source Download: http://download.csdn.net/detail/mostone/6360007 [csharp] view plain copy pu ...

  6. 关于python+django操作数据库中的表

    数据库中的表示这样设计的 class C(models.Model): name = models.CharField(max_length=32) class B(models.Model): na ...

  7. AOP基础-JDK动态代理

    动态代理技术就是用来产生一个目标对象的代理对象的,代理对象应与目标对象(被代理的对象)有相同的方法,实现对目标对象访问的拦截,并增强目标对象的一些功能,而不需要目标对象去做任何的更改,使得目标对象有更 ...

  8. [Python Study Notes]一个简单的区块链结构(python 2.7)

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  9. od命令 查看二进制文件

    od命令用于输出文件的八进制.十六进制或其它格式编码的字节,通常用于显示或查看文件中不能直接显示在终端的字符. 以数值进制格式输出:od [选项] 文件 od   -d 文件       --十进制输 ...

  10. web网页 页面布局的几种方式(转)

    web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...