Window环境下搭建Vue.js开发环境
原文链接:http://blog.csdn.net/solo95/article/details/72084907
笔者最近在进行前端的学习,在点完了HTML5、CSS3、JavaScript等技能树之后,是时候开始框架的学习了。目前为止前端框架呈现出React、Angular、Vue三足鼎立的局面,在这三种框架中,Vue最为简单,使用场景最为广泛,因此笔者从Vue开始学习,但是发现网上能搜到的Vue安装教程均不全面,所以写出此篇供大家学习。
大致步骤
- 安装Node.js
- 安装Vue.js
- 安装Webpack
Step1: 安装Node.js
Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引
擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。后续安装都依赖于npm命令(笔者注)。
官方下载地址:
https://nodejs.org/en/download/
- 下载完成后直接安装,选择默认路径,Windows还是比较方便的,这时候请注意,其他教程都有设置Path的步骤,其实你可以不设置,因为Windows下安装的时候默认有add to Path功能。
- Win + R打开cmd,然后输入
node --version
看到版本信息说明安装成功,接下来输入npm install node安装node的二进制文件,这可能耗费一点时间。
如果在上述步骤遇到问题可以参考这里:
http://www.runoob.com/nodejs/nodejs-install-setup.html
其中二进制文件的方法与上述步骤有所差异,菜鸟教程是下载exe直接安装。
Step 2: 安装Vue.js
首先使用淘宝的镜像升级npm,使其可以使用cnpm命令(单纯的npm可能由于网络长城因而速度受限)。
升级npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装Vue
cnpm install vue
安装Vue官方提供的命令行工具
cnpm install -g vue-cli
Step3: 安装webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript、JSX等),并将其打包为合适的格式以供浏览器使用。
安装WebPack
cnpm install webpack -g
在合适位置新建一个文件夹,命名为Vue-Demo,点进文件夹,右键git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录)
使用
vue init webpack vue-test
创建一个示例目录,回车下一步,遇到选择都选n。cd vue-test
进入这个目录,遇到命令行界面卡死,可以鼠标点进这个目录,然后git bash here。(如果没有安装Git你需要手动在cmd中cd进这个目录)cnpm install
安装依赖cnpm run dev
浏览器输入localhost:8080看到Vue界面证明所有步骤均成功。
- 遇到问题参考这里:
http://www.cnblogs.com/jiajia123/p/6132265.html
Window环境下搭建Vue.js开发环境的更多相关文章
- 在window下搭建Vue.Js开发环境
nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3,也可选择阿里云镜像https://npm.taobao.org ...
- 在window下搭建Vue.Js开发环境(转)
nodejs官网http://nodejs.cn/下载安装包,无特殊要求可本地傻瓜式安装,这里选择2017-5-2发布的 v6.10.3 cmd命令行: node -v //显示node版本 v6.1 ...
- window下搭建Vue.Js开发环境
一.安装node.js.https://nodejs.org/en/download/ 最新包会自动安装npm 二.安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度 ...
- vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)
2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2 ...
- 搭建Vue.js开发环境(window10)
我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...
- Window环境下搭建android NDK开发环境
1.下载ndk和cygwin NDK 下载地址:http://developer.android.com/tools/sdk/ndk/index.html Cygwin 下载地址:http://cyg ...
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
随机推荐
- 【BZOJ 2132】圈地计划 && 【7.22Test】计划
两种版本的题面 Description 最近房地产商GDOI(Group of Dumbbells Or Idiots)从NOI(Nuts Old Idiots)手中得到了一块开发土地.据了解,这块土 ...
- python 排序模块 ———— heapq(学习笔记)
from heapq import * def heasort(initi):# 排序 h=[] for value in initi: heappush(h,value)#将每一个item进入hea ...
- 16节实用性爆棚的Ps课:零基础秒上手,让你省钱也赚钱
ps视频教程,ps自学视频教程.ps免费视频教程下载,16节实用性爆棚的Ps课教程视频内容较大,分为俩部分: 16节实用性爆棚的Ps课第一部分:百度网盘,https://pan.baidu.com/s ...
- Qt 利用XML文档,写一个程序集合 四
接上一篇https://www.cnblogs.com/DreamDog/p/9214067.html 启动外部程序 这里简单了,直接上代码吧 connect(button,&MPushBut ...
- opengl绘制三角形
顶点数组对象:Vertex Array Object,VAO 顶点缓冲对象:Vertex Buffer Object,VBO 索引缓冲对象:Element Buffer Object,EBO或Inde ...
- SQLMAP学习笔记1 access注入
SQLMAP学习笔记1 access注入 Sqlmap是开源的自动化SQL注入工具,由Python写成,具有如下特点: 完全支持MySQL.Oracle.PostgreSQL.Microsoft S ...
- gitlab+jenkins持续集成(二)
1.jenkins服务器上的配置 -bin.tar.gz -C /opt/ yum install -y git /conf/settings.xml #只需更改maven的地址 <?xml v ...
- php从入门到放弃系列-02.php基础语法
php从入门到放弃系列-02.php基础语法 一.学习语法,从hello world开始 PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器&qu ...
- 多tomcat 同一个浏览器 多个项目 会导致session覆盖
1,多tomcat 同一个浏览器 同一个项目 会导致session覆盖 个人猜测:一个服务器中有多个Tomcat服务器多个项目,每个服务器占用不同的端口号,当在同一个浏览器里面同时打开2个系统时,一个 ...
- webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理
今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm ...