一、安装Node.js

(以下安装环境均为win10)

下载链接:https://nodejs.org/en/download/

官网给出了两个版本,LTS和Curren。字面意思是推荐大多数用户使用LTS版本,而Current版本则是含有最新功能,百度了下LTS是长期维护版本,没有特殊要求这里就下载LTS版本了。

安装过程使用默认设置,一路下一步即可。

安装结束后打开控制台输入 node -v 查看版本号,若能正确执行则说明安装完成,并已加入环境变量

控制台输入node的话会进入node运行环境,输入,exit或者按两下ctrl+c退出

输入npm -v查看npm版本(这里和上面的v都是小写),正确显示版本表示安装成功,加入环境变量成功

二、安装vue.js

可以通过cdn引入,也可以通过安装vue-cli脚手架来使用vue

下面介绍安装vue-cli的方式

1. 安装淘宝镜像cnpm

国外的网站总是太慢,这里采用国内淘宝镜像cnpm来代替npm包管理工具,可以加快包的安装速度

命令:

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

2. 安装全局脚手架vue-cli

输入命令:cnpm install --global vue-cli

输入vue --version查看版本

3. 新建项目

vue init webpack test

创建一个webpack模板的vue项目,test是项目名称。

然后会让输入项目名称,项目描述和作者。

安装过程中会提示你是否安装vue-route,这个要用到,输入yes或者回车,之后让安装的东西就都是用不到的了,可以输入no。最后一个让你选择是否立刻运行npm install, 这里不要直接确定,npm很慢,选最后一个,等会自己安装。安装过程中你的当前路径会出现你创建的这个项目文件夹。然后再进入项目使用刚刚安装的cnpm,运行cnpm install,安装所需依赖。

4. 运行项目

cd进入刚刚创建的项目文件夹,运行命令

cnpm run dev

这时候在浏览器中输入 localhost:8080即可访问我们的项目(有时候会自动跳转)

出现如图界面,即创建成功。

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

  1. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  2. 搭建Vue.js开发环境(window10)

    我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...

  3. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  4. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  5. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  6. 十分钟上手-搭建vue开发环境(新手教程)

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  7. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  8. 搭建vue开发环境的步骤,六步完成

    搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...

  9. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

随机推荐

  1. 初识区块链——用JS构建你自己的区块链

    前言 区块链太复杂,那我们就讲点简单的.用JS来构建你自己的区块链系统,寥寥几行代码就可以说明区块链的底层数据结构.POW挖矿思想和交易过程等.当然了,真实的场景远远远比这复杂.本文的目的仅限于让大家 ...

  2. 【细语】C#之扩展方法原理及其使用

    1.写在前面 今天群里一个小伙伴问了这样一个问题,扩展方法与实例方法的执行顺序是什么样子的,谁先谁后(这个问题会在文章结尾回答).所以写了这边文章,力图从原理角度解释扩展方法及其使用. 以下为主要内容 ...

  3. 脚本检测Kafka和Zookeeper

    Java测试环境中Kafka最近总是自动停止,所有写了一个简单的脚本来监听Kafka和Zookeeper,其中Kafka监听端口为9092,Zookeeper监听端口为2181,脚本如下: #!/bi ...

  4. spring整合mybatis接口无法注入问题

    在学习Spring完之后简单的了解了MyBatis.然后进行简单的整合,遇到MyBatista接口映射的Bean无法自动注入的问题: 代码异常: 线程“main”org.springframe .be ...

  5. html中节点类型

    常用的节点有元素节点.属性节点.文本节点.注释节点.文档节点 来看例子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition ...

  6. centos7 Failed to start firewalld.service: Unit is masked.

    centos7 启动防火墙失败:Failed to start firewalld.service: Unit is masked.   ---- 刚yum安装了iptables 解决: 执行”sys ...

  7. jsp内置对象的作用范围

    内置对象的作用范围是指每个内置对象的某个实例在多长时间和多大的范围中有效,即在什么样的范围内可以有效地访问同一个对象实例. 在javax.servlet.jsp.PageContext的类中定义了4个 ...

  8. 博弈论进阶之SG函数

    SG函数 个人理解:SG函数是人们在研究博弈论的道路上迈出的重要一步,它把许多杂乱无章的博弈游戏通过某种规则结合在了一起,使得一类普遍的博弈问题得到了解决. 从SG函数开始,我们不再是单纯的同过找规律 ...

  9. Chrome opacity非1时border-radius圆角边框剪裁问题

    border-radius:50%可以让元素正方形元素表现为正圆. 如果元素设置了border边框,则会表现为一个正圆圈圈,类似这样: 但有时候,border边框的这个圈圈会在边缘处发生剪裁,个别浏览 ...

  10. Dynamics 365新功能:可编辑的网格(行内编辑)

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复238或者20161127可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...