Vue入门环境搭建

vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓: 
1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。 
这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 
输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了 
安装完npm镜像后,开始安装全局vue-cli脚手架,之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单。方法:cnpm install -g vue-cli 回车,验证是否安装成功,在命令行中输入vue,出来vue的信息说明安装成功 

 2.安装完脚手架以后开始,开始创建一个新项目:命令 vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)

至此,一个新的项目文件夹就创建完成,这个项目文件是在使用了脚手架vue-cli的前提下创建的,所以使用了这个工具提供的默认版式, 

这就是使用脚手架搭建的项目文件的结构

3.因为各个模板间都是相互依赖的,所以要安装依赖,在命令行输入cnpm install ,你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。

4.准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入 
cnpm run dev 回车即可 

8080就是默认的端口,在浏览器地址栏中输入localhost:8080会发现默认的模块打开了!

注:如果已经全局安装过vue-cli了,再搭建项目的时候无需再安装一遍,直接使用vue init webpack 项目名 即可

如果使用yarn来安装脚手架的话,要注意yarn命令的使用,现在yarn安装命令应该用 
yarn global add add vue-cli

时间: 2024-10-08 00:41:10

Vue入门环境搭建的相关文章

vue 入门环境搭建

公司项目要用vue.js来开发,要使用vue来开发前端框架,首先要有环境,所以给大家介绍一下如何搭建vue环境.其实很简单: 1.首先下载安装node.js. 去官网https://nodejs.org/zh-cn/下载安装包. 2.安装webpack 打开cmd命令界面,输入npm install webpack -g会自动安装. 如图表示成功安装webpack 3.编译项目并进行压缩 首先转到(这个地址是我项目的地址) 执行命令webpack --display-modules --disp

asp入门一 入门环境搭建

asp入门一 入门环境搭建,布布扣,bubuko.com

NodeJS入门--环境搭建 IntelliJ IDEA

NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习NodeJS,所以以此做个笔记,欢迎大家提出意见. 1.首先 下载安装NodeJS,下载安装IntelliJ IDEA 2.接下来我们详细介绍在IDEA中配置NodeJS 默认安装好了IDEA,在IDEA的file -> setting ->Plugins,右边默认是没有这个组件的需要你手动点击Browe repositories..,在插件列表中搜索nodejs,将看到NodeJS插件,点击下载,重启,(其实它会关联到你

android入门-环境搭建

最近除了修改论文,也没有什么事,就来学学android开发,第一课android开发,在网上百度各种版本的搭建环境,基本步骤都是 1.install jdk 2.install eclipse 3.install sdk 4.install adt(android develop tool) , 于是开始自己动手,去官网下载sdk,结果发现有集成adt的eclipse 和sdk 打包下载,对入门菜鸟我来说,省去了配置安装的步骤啦.elcipse sdk adt下载链接http://develop

ArcGIS API for Silverlight/ 开发入门 环境搭建

Silverlight/ 开发入门 环境搭建1 Silverlight SDK下载ArcGIS API for Microsoft Silverlight/WPF ,需要注册一个ESRI Gloab 账户.下载地址http://resources.esri.com/arcgisserver/apis/silverlight/2 开发环境:1)Visual Studio 2008 SP1 或者 Visual Web Developer Express with SP1 下载地址 :Visual S

一 vue开发环境搭建

2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运行环境,能够使得javascript脱离浏览器运行, 给vue一个运行环境. node.js的官网:  https://nodejs.org/en/download/ 安装完毕之后,在命令行下验证是否安装成功:输入nmp,显示如下就表示安装成功. 二.cnpm的安装: 安装完node之后,npm包含

Vue项目环境搭建

Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm vue ~~ django:vue是用来搭建vue前端项目的 ? 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ ? 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registr

2.vue.js 入门环境搭建

原文链接:http://blog.csdn.net/luckylqh/article/details/52863026?locationNum=2&fps=1 vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓: 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安

vue.js环境搭建

vue最开始说是库,现在应该可以说是框架了,很多大公司都开始用vue了,这得源于vue的本质 1:数据化驱动,2:组件化模板.项目中用vue都得搭建环境,经过一段时间的摧残后终于有勇气来写篇关于vue环境搭建的博文了,我相信网上已经有很多前辈的博文能够帮助大家完成搭建,与我来说只是记录下自己搭建环境的一点心得,如若能够帮助到两三人,足以. 1:因为vue.js的运行是基于node.js的npm环境下,所以我们得先安装node.js,这个就不累赘了,网上下个node.js安装即可. 2:记得刚开始