• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > 超简单的Vue.js环境搭建教程

超简单的Vue.js环境搭建教程

作者:行动了? 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue.js环境搭建教程,vue.js环境搭建,vue.js环境配置,vue.js环境,vue.js开发环境搭建等相关知识,行动了? 希望在学习及工作中可以帮助到您

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(最后这个是我创建的项目文件夹的名字)

过程中会出现 

3 cd vue_project

安装依赖,生成node_modules目录(安装依赖的代码库)

npm install=>会生成这个文件夹node_modules(注:当我们把用vue-cli脚手架搭建成的vue项目复制到其他地方时,要把node_modules目录删除,不然在其他地方无法执行cnpm run dev,这其中设计到路径的问题。删除之后要重新cnpm install)

npm run dev  准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中或者输入运行”npm run dev”的时候执行的是build/dev-server.js文件,运行”npm run build”的时候执行(用来执行发布的)的是build/build.js文件,我们可以从这两个文件开始进行代码阅读分析。

Devdeendencies是表示我们编译过程的一些依赖。

Readme文件:项目的描述文件

每个组件分为三个部分:模板、逻辑、样式

cnpm run dev 回车即可 ,就会打开浏览器http://localhost:8080 

应用场景:

针对具有复杂交互逻辑的前端应用;

它可以提供基础的架构抽象;

可以通过AJAX数据持久化,保证前端用户体验。

好处:

当前端和数据做一些操作的时候,可以通过AJAX请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景,刷新页面太昂贵,会重新加载很多资源,虽然有些会被缓存,但是页面的DOM,JS,CSS都会被页面重新解析一遍,因此移动端页面通常会做出SPA单页应用。

Vue.js的特点:MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>

您可能想查找下面的文章:

  • 超简单的Vue.js环境搭建教程

相关文章

  • 2017-05-30Vue.js实战之Vuex的入门教程
  • 2017-05-30Vue.js动态添加、删除选题的实例代码
  • 2017-05-30vue2.0数据双向绑定与表单bootstrap+vue组件
  • 2017-05-30Vue.js实现拖放效果的实例
  • 2017-05-30Map.vue基于百度地图组件重构笔记分享
  • 2017-05-30Vue分页组件实例代码
  • 2017-05-30vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
  • 2017-05-30vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
  • 2017-05-30vue中渐进过渡效果实现
  • 2017-11-26从 vue 1.x 升级到 vue 2.x 常见问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Vue.js bootstrap前端实现分页和排序
    • Vue.js每天必学之指令系统与自定义指令
    • Vue过滤器的用法和自定义过滤器使用
    • 详解Vue-基本标签和自定义控件
    • Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
    • 使用vue实现点击按钮滑出面板的实现代码
    • 全面解析vue中的数据双向绑定
    • 聊一聊Vue.js过渡效果
    • vue货币过滤器的实现方法
    • Vuex之理解Store的用法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有