一、首先要安装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. akka消息传递

    消息传递 消息本身要求是什么?是否必须可以序列化?消息传递根据传递的要求严格程序依次分为三类,1.至多一次到达 至消息最多一次传递到目的端,消息可能会丢失,但不会重复2.至少一次到达 潜在可能存在多次 ...

  2. 【android内存泄露】 WebView篇

    在咱的博客园app里,新闻的内容使用WebView展示的.在测试中,咱重复进入.退出某个新闻10多次,观察到 Objects一直在不断增长,反复触发GC,但是一直回收不了,占用的内存越来越高,于是警觉 ...

  3. 小练手:用HTML5 Canvas绘制谢尔宾斯基三角形

    文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大 ...

  4. windows下Qt5.4.2 for android开发环境配置

    安装包链接: http://yunpan.cn/cFs5tikVA83hK 访问密码 d029   本人所有的软件都安装在D:/Qt   1. 安装 Qt 5.4.2      不在讲述 2, 安装p ...

  5. sparkSQL实战详解

    摘要   如果要想真正的掌握sparkSQL编程,首先要对sparkSQL的整体框架以及sparkSQL到底能帮助我们解决什么问题有一个整体的认识,然后就是对各个层级关系有一个清晰的认识后,才能真正的 ...

  6. ipythons 使用攻略

    ipython是一个 python 的交互式 shell,比默认的 python shell 好用得多,支持变量自动补全,自动缩进,支持 bash shell 命令,内置了许多很有用的功能和函数. 安 ...

  7. libcstl中的list没法插入自定义数据

    一开始运行出错,开启debug以后发现在push自定义对象的时候调试器提示找不到一个叫/XXX/XXXX/XXXX/libcstl-2.3.0/src/cstl_list_private.c</ ...

  8. MyBatis如何返回自增的ID

    <insert id="insertTable" parameterType="com.infohold.city.map.model.CheckTemplateM ...

  9. log4j2按日志级别输出到指定文件

    在项目中,可能会产生非常多的日志记录,为了方便日志分析,一般可以将日志按级别输出到指定文件,本次就先说说log4j2的实现吧: 1.先加入log4j2依赖包 2.写一个java类进行测试,类文件中仅仅 ...

  10. iOS开发值得学习的Demo

    一.HXWeiboPhotoPicker - 仿微博照片选择器 GitHub地址:https://github.com/LoveZYForever/HXWeiboPhotoPicker 二.AFNet ...