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

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

在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境:

1、首先,我们需要安装 node.js:

  安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm -v 可以看到 npm 的版本号,如图:

2、安装cnpm:

我们可以利用淘宝npm镜像安装相关的依赖,因为如果使用 npm ,在国内运行起来会很慢,有时候甚至会安装失败。淘宝 NPM镜像 ,我们接着在命令行中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 安装 cnpm . 可以使用 cnpm -v 查看cnpm的版本号。

3、vue.js脚手架安装:

1)在命令行中输入:cnpm install -g vue-cli.这里采用 -g,是为了能够全局使用,而不是在当前目录下使用,安装完成之后会出现如图的信息:

  2)在命令行中输入:vue ,如图,则表示安装成功:

4、接下来就是创建一个实例了:

  1)在命令行中输入:vue init webpack first-product     ( first-product为项目名称 )

    输入:cd first-product  进入项目,再输入:dir

  2)安装依赖:

      命令行中输入:cd first-product  ( 项目名 ),进入具体项目中

   命令行中输入:cnpm install

  到此,我们的脚手架就安装完了

5、运行该项目:

  在命令行中输入:npm run dev ,在默认浏览器中会自动打开页面

到此,我们就搭建完了vue的环境,也创建我们的第一个vue实例了。

时间: 2024-10-26 13:09:25

vue.js开发环境搭建以及创建一个vue实例的相关文章

vue.js开发环境搭建

1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装...2).输入:vue -V,回车,若出现vue信息说明表示成功 4.创建vue项目 在cmd里输入:vue

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

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

vue.js 开发环境搭建

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 在cmd里 1)输入:cnpm install -g vue-cli,回车,等待

1、vue.js开发环境搭建

来源是:http://www.cnblogs.com/ganmy/p/6029774.html 1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue-cli脚手架,用于帮助搭

Vue.js开发环境搭建(安装过程遇到的问题)

网络上关于Vue.js的安装过程有很多介绍,这里不多赘述,这里只是记录自己安装过程和遇到的问题 1 首先安装node.js 到官网下载node.js安装包,安装过程和一般软件没有区别.安装完成后到终端查看版本号,若如下图所示,表示安装成功. 2.node.js环境变量新建 其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建"node_global"和"node_cache"两个文件夹.

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

2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2.下载并安装node.js(一直next即可) 安装完成之后在终端输入:node -v和npm -v查看是否安装成功.npm是node.js的包管理工具. 3.这里我们可以更改node.js默认下载依赖的位置 在自己安装的node.js文件夹中新建一个node_cache文件夹,新建一个node_g

vue.js开发环境安装教程

一.nodejs安装-npm安装1.nodejs安装①下载对应系统版本的Node.js:https://nodejs.org/en/download/② 运行程序开始安装,一路next最终install即可2.npm安装(新版Node.js已自带npm)③检测是否安装成功.快捷键win+R,输入cmd回车打开cmd窗口node -v 查看node.js的版本号npm -v 查看node.js自带的npm的版本号3.配置环境变量[说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及

在windows环境下基于sublime text3的node.js开发环境搭建

首先安装sublime text3,百度一堆,自己找吧.理论上sublime text2应该也可以.我只能说一句:这个软件实在是太强悍了. 跨平台,丰富的插件体系,加上插件基本上就是一个强悍的ide了.目前我在使用的主要是Emmet.Python.还有一些格式化的插件(xml,json),加上这次安装的node.js. node.js的安装就不用多说了,直接http://nodejs.org/ 点击install下载window版本的安装程序后安装即可.默认的安装会将安装目录加到path环境变量

创建Vue.js对象:我的第一个Vue.js输出信息

<!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</title><script src=”js/vue.js”></script></head><body><div id=”app”><p>{{ message }}</p></div> <script&g