zoukankan      html  css  js  c++  java
  • Vue.js 介绍及其脚手架工具搭建

    vue.js介绍 (MVVM、核心思想)

    vue.js 是一套轻量级的 MVVM 的渐进式框架。Vue 的核心库只关注视图层。
    vue.js 的官方网址是:点我,我是网址

    MVVM 介绍

    MVVM 全称是 Model - ViewModel - View 的简称。

    Model 对应的是数据,JavaScript 对象。
    View 对应的是视图,也就是 DOM。
    ViewModel 是连接 View 和 Model 的中间件,在 MVVM 下,View 和 Model 是不能直接通讯的,当数据变化(用户操作视图),ViewModel 都能监听到变化,实现了双向绑定。

    热门的 MVVM 框架有:vue.js react.js angular.js

    MVVM 应用场景

    1、针对具有复杂交互逻辑的前端应用。
    2、提供基础的架构抽象。
    3、通过 Ajax 数据持久化,不需要重新刷新页面,重新解析 DOM,保持前端的用户体验。

    vue.js 核心思想

    1、数据驱动。
    DOM 是数据的一种自然映射。

    数据响应原理( TODO )

    2、组件化思想。(扩展 HTML 元素,封装可重用的代码)

    组件设计原则

    1、页面上每个独立的可视/可交互区域视为一个组件。
    2、每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护。
    3、页面不过是组件的容器,组件可以嵌套自由组合成完整的页面。

    vue-cli 脚手架工具

    vue-cli 介绍

    工地上,脚手架是帮助工人作业搭建的架子。 vue-cli 可以帮助我们写好 vuejs 代码的工具,vue-cli 可以做什么:
    1、目录结构
    2、本地调试
    3、代码部署
    4、热更新
    5、单元测试 (ESlint)

    安装指令

    npm 下载地址:点我,我是地址

    安装vue-cli:npm install -g vue-cli
    初始化项目:vue init webpack 项目名
    安装依赖:npm install

    (npm 版本需要注意:npm: 2.14.20 should be >= 3.0.0,可以事先升级 node 为最新版本,直接下载 dmg 进行安装替换即可)

    运行:npm run dev

    运行项目

    默认情况下,浏览器打开 http://localhost:8080,就可以看到脚手架项目初始化的效果了。

    项目文件介绍
    webPack 打包

    1、webPack 是什么?
    webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

    webpack的配置及其项目路径介绍(#TODO)

    开发工具

    本次项目使用的开发工具是: webStorm , 具体配置方法可以参考:
    1、添加 vue.js for webStorm 插件。

    webStorm --> Preferences -->plugins-->Browse repositories, 搜索vue.js,点击 install 即可。

    2、添加 html 模版支持,让 webStorm 识别 vue 后缀的文件。


    找到这个地方,找到上面的html类型,将*.vue添加进其中。确定的时候会提示被占用了,要把那个清除掉,继续就OK了。
    这样系统会把.vue文件看成html,也就能正确识别里面的<script>标签了。

    3、若是旧版本的 webStrom ,则修改 ES6 的语法支持。这里默认是ES5.1,把它改成ES6。 (2016.3版则默认是 ES6)

    参考资料

    vue.js 官方网站
    慕课网 - vue.js 实战

    (转载:简书 李世铿 Vue.js 介绍及其脚手架工具搭建

  • 相关阅读:
    centos 添加 composer
    laravel5 缓存的使用
    git 的使用
    php 消息队列 rabbitmq 的安装使用
    vue插件大汇总
    vue 2.0 Gzip打包压缩
    Easy Mock 为啥那么打不开了?
    element ui 打印 表格
    解决 element 日期范围选择问题(只能选择相邻的 连两个月)
    vue router 的路由传参 params 和 query 的 区别
  • 原文地址:https://www.cnblogs.com/biglovevolcaner/p/6700537.html
Copyright © 2011-2022 走看看