一、首先要安装nodejs :

别去官网下,慢的要死,这是国内的什么版本都有。地址

这是我下载的。

然后就傻瓜式安装。

验证是否安装成功

二、node.js的环境变量的新建。  //我安装的路径是D:\Develop\Nodejs

其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

1、 启动cmd依次执行以下两条命令

  

npm config set prefix " D:\Develop\Nodejs\node_global"
npm config set cache " D:\Develop\Nodejs\node_cache"

2、设置环境变量:
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
a)新增系统变量NODE_PATH:把变量值设置成“D:\Develop\Nodejs\node_global\node_modules” (这样就可以把后面全局安装的装到global里并且可以直接用命令使用。)
b)修改用户变量PATH:选中PATH,点击编辑,把“D:\Develop\Nodejs\node_global;”加到前面

三、安装淘宝的npm镜像
1、命令

npm config set registry https://registry.npm.taobao.org

2、验证命令

npm config get registry

如果返回https://registry.npm.taobao.org,说明镜像配置成功。
3、安装cnpm
输入:

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

即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
这个其实看个人爱好吧,因为npm在国内下载速度是很慢,所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。注意(cnpm下载的依赖不全,尽量少用)

四、安装全局vue-cli脚手架

npm install -g vue-cli

这时vue就安装好了在dos命令敲 vue -V 就可看到vue版本了


使用npm-cli创建模板项目

vue init webpack vue_demo

解释上面命令
webpack是最简单的vue一个模板
vue_demo是项目名称

接下来根据提示输入工程的信息

vue-router需要安装,新手可以选择不安装ESLint和所有测试工具,一下子学太多容易从入门到放弃

 ? Project name vue_demo
? Project description A Vue.js project
? Author chiang
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

然后我们进入这个项目所在的地址,依次命令如下:

cd vue_demo
npm install
npm run dev(或者npm start)

vue环境的搭建的更多相关文章

  1. VUE环境项目搭建以及简单的运行例子

    1.打开cmd命令窗口,node-v和npm-v可以查看相应的安装版本信息. 2.使用一下命令全局安装vue-cli. 1)npm install  -g  vue-cli 2)如果使用淘宝镜像,则是 ...

  2. vue 环境的搭建及初始化项目

    其实超级简单,虽然网上很多,但是我顺便记录下相当于做笔记吧 1nodejs 的安装, 在node官网下载,点击安装,安装的时候最好选择路径在d盘 2设置环境变量 我的电脑-->属性-->系 ...

  3. vue环境的搭建与第一个demo

    参考两个博客 1 2 git.npm和淘宝镜像的安装过程过程省略了,直接开始webpack + vue-cli + 创建demo 首先,在磁盘创建一个文件夹,命名为vue-projects,里面再建一 ...

  4. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  5. 初次搭建vue环境(最基础的)

    一直以来觉得搭建环境是自己的短板,恰巧老大跟我说他刚才面试一个有4年工作经验的人,给那面试的人出了到机试题,给了1小时的时间连环境都没搭好.且不说那人的工作经验是否掺有水分,自己还是有点尴尬的,以前的 ...

  6. vue+node+webpack搭建环境

    一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  ) 注意node的版本,只有支持和谐模 ...

  7. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  8. vue环境搭建及项目介绍

    搭建开发环境(搭建开发环境前必须安装node.js): 1.安装vue脚手架工具 $ npm install -g vue-cli 2.创建项目(注意项目名字不要有大写字母) vue init < ...

  9. Vue 环境搭建(win10)

    1.安装node node官网安装地址 推荐安装稳定版本(LTS)以及安装路径为系统盘(C) 查看node安装成功否 注释:以下命令使用 命令提示符(管理员)权限,win10 对user权限的限制了访 ...

随机推荐

  1. PreparedStatement和Statement区别详解

    技术原理 该 PreparedStatement接口继承Statement,并与之在两方面有所不同: PreparedStatement 实例包含已编译的 SQL 语句.这就是使语句“准备好”.包含于 ...

  2. C++ 单链表的实现

    #ifndef LINKEDLIST_H #define LINKEDLIST_H #define MAXLEN 256 template <class T> struct LinkedL ...

  3. ViewResolver和ResponseBody笔记

    处理HttpResponseBody有两种方式,ViewResolver(视图解析器)和ResponseBody ViewResolver.View多用于jsp,ViewResolver的主要作用是把 ...

  4. linux第四周

    一.知识点总结 (一)用户态.内核态和中断 1.内核态:在高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态 2.用户态:在低级别的指令状态下,代码 只能在级别允许的特 ...

  5. bootstrap-datetimepicker日期控件下载

    bootstrap-datetimepicker.js bootstrap-datetimepicker.zh-CN.js bootstrap-datetimepicker.min.css 下载网站: ...

  6. linux一键安装php脚本

    #!/bin/sh echo "----------------------------------start install php --------------------------- ...

  7. 技术分享:JS工作原理

    一 浏览器组成可分两部分:Shell+内核. 浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎. 渲染引擎功能作用 渲染引擎,负责对 ...

  8. MySQL表类型MyISAM/InnoDB的区别(解决事务不回滚的问题)

    MyISAM:这个是默认类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.与 ...

  9. Web应用体系结构

    容器 Servlet没有main()方法,它们受控于另一个Java应用,这个Java应用称为容器(Container).我们最常见的tomcat就是这样一个容器. Web服务器应用(如Apache)得 ...

  10. spring mvc: xml生成

    spring mvc: xml生成 准备: javax.xml.bind.annotation.XmlElement; javax.xml.bind.annotation.XmlRootElement ...