windows下搭建vue开发环境

一、安装node.js 安装
 
vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js环境,所以首先要安装node.js。
安装完毕之后,在命令行下验证是否安装成功:输入nmp, 显示如下就表示成功
二、cnpm的安装
安装完node之后,npm包含的很多依赖包都是部署在国外的,下载速度超级慢,所以我们要安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。
安装命令为:nom install -g cpm --registry=https://resgistry.npm.taobao.org
 
三、vue-cli的安装
vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装命令为:cpm install -g vue-cli,回车,等待安装。
安装完后,检查是否安装成功,输入vue,出现以下提示安装成功
四、试试新建一个vue项目
1、新建一个项目文件夹,命名为vue-demo,cd到此文件夹,输入:vue init webpack vue-démo,回车,按照如下操作进行初始化:
我们暂时不适用模板提供的测试框架,Karma + Mocha,以及Nightwatch。
(2)项目目录
(3)安装项目依赖的包
cd到vue-demo文件夹,执行cnmp install(或npm install),安装依赖包,安装完成之后,项目目录多了node_modules
(4)命令项目
在命令行里输入 cnpm run dev,执行完成后启动项目,浏览器出现以下结果,说明启动成功。注意浏览器的版本,低版本的不支持喔!

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

  1. 二、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  2. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  3. 2 webpack 4 加vue搭建开发环境最终配置

    1 package.json { "name": "c", "version": "1.0.0", "desc ...

  4. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  5. vue的开发环境搭建命令加图解

    vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...

  6. vue.js2.0实战(1):搭建开发环境及构建项目

    Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...

  7. 前端开发 Vue -1windows环境搭建Vue Node开发环境

    解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...

  8. Vue/Element-ui 安装搭建开发环境(一)

    Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...

  9. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

随机推荐

  1. ADO.NET 扩展属性、配置文件 和 对战游戏

    扩展属性 有外键关系时将信息处理成用户可看懂的 利用扩展属性 如:Info表中的民族列显示的是民族代号处理成Nation表中的民族名称 需要在Info类里面扩展一个显示nation名称的属性 例:先前 ...

  2. js-面试题1

    //1. y 和 z的值? ; ; ; function add(n){n=n+;} y = add(x); function add(n){n=n+;} z = add(x); //y,z输出und ...

  3. Python 黑帽编程 4.2 Sniffer之数据本地存储和加载

    在上一节,我们完成了编写一个简易的Sniffer的第一步--数据捕获. 很多时候,我们需要将捕获的数据先保存到磁盘上,之后再使用工具或者自己编写代码来进行详细分析. 本节我们在上一节的基础上来讲解保存 ...

  4. 简单三层分页aspnetpager控件(欢迎指点)

    首先添加引用AspNetpager.dll(将.dll文件放在bin中进行引用) 接着添加<%@ Register Assembly="AspNetPager" Namesp ...

  5. java线程之多个生产者消费者2.0

    上一节中,通过while和notifyAll解决了多个生产者,消费者对共享资源的访问问题,现在开始升级 但是,仍然有改进之处,主要体现在两点: 1)使用新版本1.5开始后的锁Lock解决,目的将其全部 ...

  6. java 多线程之卖票两种方式

    1.通过extends Thread /* 需求:简单的卖票,多个窗口同时买票 (共用资源) 创建线程的第二种方式:实现Runnable接口 步骤: 1,定义类实现Runnable接口 2,覆盖/重写 ...

  7. css中的text-overflow

    css中的text-overflow HTML中: <body><div class="clip">此处中多余的文字直接被切掉,不显示</div> ...

  8. Python dir()/help()

    dir() dir()用来查询一个类或者对象所有属性.你可以尝试一下 print dir(list) 返回的结果: ['__add__', '__class__', '__contains__', ' ...

  9. Zore copy(翻译《Efficient data transfer through zero copy》)

    原文:https://www.ibm.com/developerworks/library/j-zerocopy/ <Efficient data transfer through zero c ...

  10. [DB] - Mysql创建定时任务

    mysql支持定时任务的创建,要求mysql服务器开始定时任务调度. 1. 查看是否开启定时任务执行 SHOW VARIABLES LIKE 'event_scheduler'; // OFF表示没有 ...