Vue.js 开发环境搭建及实例运行简明教程

2019年9月14日14:34:56 评论 99

Vue和jQuery一样,是一个前端框架,如果你要问在过去的一年里,前端技术框架什么最火,那无疑就是前端三巨头:React、Angular和Vue。今天,我们就一起来简单了解一下什么是Vue,以及它的语法和运行环境搭建过程。本文将通过一个Demo案例,来说明如何使用这个优秀的前端框架。

Vue.js 开发环境搭建及实例运行简明教程

什么是Vue.js

Vue是一套用来构建用户界面的渐进式JavaScript框架,其中心思想是数据驱动,以前我们使用jQuery写代码时常用$('.dom').text('我把值改变了'),这种写法先要获得结构,然后再修改数据更新结构,而Vue的做法是直接赋值this.msg="我改变了",然后msg就会同步到某个结构上。视图管理抽象为数据管理,而不是管理dom结构。还有一点需要说明的是,Vue是国人写的,技术文档支持中文。

Vue.js官网    官方教学视频

环境搭建

工欲善其事,必先利其器,我们先从搭建Vue环境开始。Node和NPM的环境不用说是必须的,现在前端流程化很热门,基本上新的技术都会在这套流程基础上做开发。

安装

在用 Vue 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如webpack或Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

执行命令:

init的过程中会问你给项目定义一些描述,版本之类的信息,可以不管,一直输入y确定跳过,完成之后即可。

构建项目

在桌面上创建一个目录demo,用来构建Vue项目。

执行命令∶

运行项目

进入根目录myProject,执行命令:

npm install 是安装项目所需要的依赖,npm run dev 是运行项目。执行完成后控制台会提示:
Your application is running here: http://localhost:8080
在浏览器中输入http://localhost:8080,就可以看到项目首页了。

自定义开发

接下来,我们简单开发一个功能,用来动态显示Vue中预设的值。

创建Demo.vue文件

进入根目录,在/src/components下新建一个Demo.vue文件,内容如下:

提示:如果启动程序时报Newline required at end of file but not found错误,在这段代码最后一行后添加空行即可。

配置路由

修改/src/route目录下的index.js文件,添加代码:

然后指定路由规则:

也可以指定二级路由,示例代码如下:

提取码:rcp1

测试

配置完路由,在地址栏输入:http://localhost:8080/#/demo,按下回车,就可以看到我们自定义的那个页面了,内容显示为:Boots are in stock。

最后更新:2019-09-30
weinxin
关于本站
本站是一个分享建站经验、SEO优化、互联网技术以及日常生活的个人生活博客。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: