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

author author     2022-09-15     747

关键词:

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实例了。

 

基于webpack的vue.js开发环境快速搭建

1.安装nodenode下载地址2.安装淘宝NPM镜像命令地址3. 安装vue#全局安装vue-clicnpminstall-gvue-cli4. 创建一个基于"webpack"模板的新项目#创建一个项目文件夹,在文件夹下shift+右键,选择在此处打开cmdvueinitwebpack5.安装依赖#安装依赖c... 查看详情

搭建vue开发环境

...框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发... 查看详情

使用vscode搭建vue开发环境(代码片段)

搭建Vue开发环境有两种安装方式1使用script标签、直接下载并用script标签引入,Vue会被注册为一个全局变量。这里又分两个版本我们开发就使用开发版本就够了点击下载开发版本到本地把生产版本的也下载下来可以发现,... 查看详情

vuejs之开发环境搭建

...,使得我们能够快速地上手并使用,特别适合单页应用的开发。Vue.js是数据驱动的,它通过一些特殊的语法,将DOM和数据绑定起来,无需手动操作DOM。一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应 查看详情

vue.js开发环境搭建

1、安装node.js,忽略2、基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:npminstall-gcnpm–-registry=https://registry.npm.taobao.org,回车,等待安装...3、安装全局vue,用于帮助搭建所需的模板框架在cmd里,1).输入:cnpminstall-gvu... 查看详情

vue.js开发环境搭建

1、安装node.js,忽略2、基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:npminstall-gcnpm–-registry=https://registry.npm.taobao.org,回车,等待安装...3、安装全局vue,用于帮助搭建所需的模板框架在cmd里, 1).输入:cnpminstall-g... 查看详情

vue.js开发环境搭建

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

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

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

vue.js项目的开发环境搭建与运行(代码片段)

...责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看)。1开发环境安装步骤:(一)安装node.js(JavaScript运行环境runtime)从node.js官网下载并安装node,安装过程很简单,一路“下一步&r... 查看详情

1vue.js开发环境搭建

来源是:http://www.cnblogs.com/ganmy/p/6029774.html1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npminstall-gcnpm–-registry=https://registry 查看详情

vue开发(开发环境+项目搭建)

...框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发... 查看详情

萌新--关于vue.js入门及环境搭建

十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西。在淘宝上买了相关视频,前两章简介听得懵懵懂懂的,能够... 查看详情

vue.js:搭建开发环境及构建项目

 发环境的搭建安装node.js直接下一步就好,注意安装的位置 Node.js官网:https://nodejs.org/en/验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口。输入node-v即可得到对应的Node.js版本。 npm包管... 查看详情

vue.js开发环境搭建

一、NODEJS的安装Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。 二、NODE.JS的环境变量的新建。   其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装... 查看详情

一个简单的springboot+vue前后端框架搭建(代码片段)

...户界面的渐进式框架。Vue是一个js框架,提供了一套开发规则,按照这个开发规则就可以提高开发效率。补充:渐进式意思是,vue.js本身功能局限,一旦配合其他的工具可以增强其功能。1.2、使用Vue需要做哪些... 查看详情

windows下搭建vue开发环境

...架”。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。2016年,Vue同Angular、React形成三足鼎立的局面,让前端的开发者顾不暇接... 查看详情

vue开发系列一坏境搭建

使用vue开发,需要用到围绕vue.js配套的一系列工具,常用的工具如下:vue.js    核心。VueRouter2   实现路由组织工具。webpack   项目打包以及编译工具。nodejs  前端开发环境。npm  &... 查看详情

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

    网络上关于Vue.js的安装过程有很多介绍,这里不多赘述,这里只是记录自己安装过程和遇到的问题   1首先安装node.js 到官网下载node.js安装包,安装过程和一般软件没有区别。安装完成后到终端查... 查看详情