一、安装node.js。https://nodejs.org/en/download/ 最新包会自动安装npm

二、安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度是超级慢啊。所以我们要安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

三、安装vue-cli脚手架构建工具。安装命令cnpm install -g vue-cli

四、至此,环境以及工具已经准备好。我们使用vue-cli来构建项目。进入到e我们的工作目录为 E:\VueJs。运行命令vue init webpack MyVue

五、安装过程中,需要我们输入项目名称,描述,作者,版本(独立版),使用ESLint规范等等,此时,我们看到工作目录下已经自动生成了目录MyVue,如下图。

六、主要用的包都在package.json中,如下图

七、cd到我们的项目文件夹MyVue中,运行命令cnpm install 安装包,(注意:我们已经使用淘宝镜像cnpm)

八、安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源

九、安装完依赖包之后,就可以运行整个项目了。 运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

十、Welcome to Your Vue.js App

window下搭建Vue.Js开发环境的更多相关文章

  1. 在window下搭建Vue.Js开发环境

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org ...

  2. 在window下搭建Vue.Js开发环境(转)

    nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...

  3. Window环境下搭建Vue.js开发环境

    原文链接:http://blog.csdn.net/solo95/article/details/72084907 笔者最近在进行前端的学习,在点完了HTML5.CSS3.JavaScript等技能树 ...

  4. vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)

    2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2 ...

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

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

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

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

  7. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  8. ES6 学习笔记 (2)-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境

    笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...

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

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

随机推荐

  1. ETL-informatica进阶资料整理

    名称 资源 说明 Informatica全球客户支持网站 https://network.informatica.com/ Informatica全球客户支持网站Network,其前身为MySuppo ...

  2. Redis介绍以及安装具体解释

    redis是一个key-value存储系统. 和Memcached类似.它支持存储的value类型相对很多其它,包含string(字符串).list(链表).set(集合).zset(sorted s ...

  3. APK反编译去广告大揭秘

    APK反编译去广告 具体步骤: 1.下载 apktool 下载地址:https://code.google.com/p/android-apktool/downloads/list 2.通过apkto ...

  4. openSessionInView的使用原理及性能分析

    看到好多项目中用到了openSessionInView,这种做法无非是开发方便,能够在JSP页面中操作数据库层方面的业务. 下边说下openSessionInView的使用方法及性能问题. 使用: 1 ...

  5. Android组件系列----ContentProvider内容提供者【1】

    [正文] 一.ContentProvider简单介绍: ContentProvider内容提供者(四大组件之中的一个)主要用于在不同的应用程序之间实现数据共享的功能. ContentProvider能 ...

  6. 使用Onedrive

    买了个某捷的大硬盘,于是发现比较坑,非要用云存储才能获得额外200G.于是费了一个多小时.不过学习到了很多. 首先硬盘下会给出对应的exe文件,点击运行就可以. 之后注册希捷的账号,以及微软的账号. ...

  7. 关于servlet的@WebServlet注解

    @WebServlet注解用于标注在一个继承了HttpServlet类之上,属于类级别的注解. 1.jsp页面 通过action提交到RegistServlet 类: <form action= ...

  8. sublime text3之修改注释颜色

    在用sublime text3编写Python2代码时总觉得注释颜色太浅了, 看起来吃力,于是就尝试去修改,和sublime text2不同, sublime text3的主题配置文件在Sublime ...

  9. jQuery的一些选择器

    一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...

  10. iOS开发—— Couldn't add the Keychain Item

    报错:*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Couldn ...