精华内容
下载资源
问答
  • Vue框架简介
    千次阅读
    2018-11-14 22:35:22

    什么是Vue.js

    • Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
    • Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
    • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
    • 前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;

    为什么要学习流行框架

    • 企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;

    • 企业中,使用框架,能够提高开发的效率;

    • 提高开发效率的发展历程:原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】)

    • 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;

    • 增强自己就业时候的竞争力

    • 人无我有,人有我优

    • 你平时不忙的时候,都在干嘛?

    框架和库的区别

    • 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。

    • node 中的 express;

    • 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。

      1. 从Jquery 切换到 Zepto
      1. 从 EJS 切换到 art-template

    Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别

    • MVC 是后端的分层开发概念;
    • MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
    • 为什么有了MVC还要有MVVM

    Vue.js 基本代码 和 MVVM 之间的对应关系

    Vue之 - 基本的代码结构和插值表达式、v-cloak

    Vue指令之v-text和v-html

    Vue指令之v-bind的三种用法

    1. 直接使用指令v-bind
    2. 使用简化指令:
    3. 在绑定的时候,拼接绑定内容::title=“btnTitle + ‘, 这是追加的内容’”
    更多相关内容
  • vue框架简介

    万次阅读 多人点赞 2019-06-15 04:50:36
    是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架Vue的核心库只关注视图层 vue的兼容性 Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript 5特性。Vue....

    MVVM框架概述

     

     

    什么是vue

    是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层

     

     

    vue的兼容性

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器

     

     

    vue学习资源

    vue.js中文官网:http://cn.vuejs.org/

    vue.js源码:https://github.com/vuejs/vue

    vue.js官方工具:https://github.com/vuejs

    vue.js官方论坛:forum.vuejs.org

     

     

    对比其他框架-React

    React 和 Vue 有许多相似之处,它们都有使用 Virtual DOM;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统

    都有支持native的方案,React的RN,vue的Wee下

    都支持SSR服务端渲染

    都支持props进行父子组件间的通信

    性能方面:React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

    不同之处就是:

    • 数据绑定方面,vue实现了数据的双向数据绑定,react数据流动是单向的
    • virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
    • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理(如果要操作直接this.xxx)
    • 组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

     

     

    对比其他框架-angular

    在性能方面,这两个框架都非常的快,我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话,你可以参考这个第三方跑分。单就这个跑分来看,Vue 似乎比 Angular 要更快一些。

    在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。

    灵活性:Vue 相比于 Angular 更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范,但也有开发者喜欢更灵活自由的方式。

     

     

    vue.js的核心特点—响应的数据绑定

    传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html元素的数据,就的使用js代码获取元素然后在处理业务逻辑

    响应式数据绑定的方式操作页面,可以直接使用像下面代码那样的写法就可以将数据填充到页面中

    <template>
      <div id="app">
        {{ message }}
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          message: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <style>
    </style>

     

     

    vue.js的核心特点—可组合的视图组件

    一个页面映射为组件树。划分组件可维护、可重用、可测试,也就是一个页面由多个组件组合而成

    vue中实现组件引入示例

    第一步:import导入需要引入的组件文件;

    第二步:注册组件;

    第三步:在需要引入组件的文件中加上组件标签(这个标签的标签名就是注册的组件名字,多个单词的和这里有xx-xx的形式)

    需要注意的是:组件可以嵌套引入,也就是说组件可以引入其他组件

    首先创建一个组件,用于被引入的组件,组件名字叫Hello.vue

    <template>
      <div class="hello">
        <h2>Essential Links</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello'
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>

    然后在需要引入的组件中,先使用import导入组件

    import Hello from './components/Hello'

    然后使用components注册这个组件

    components: {
        Hello
    }

     在需要引入组件的文件中加上组件标签(这个标签的标签名就是注册的组件名字,多个单词的和这里有xx-xx的形式)

    <hello></hello>
    <template>
      <div id="app">
        {{ message }}
        <hello></hello>
      </div>
    </template>
    
    <script>
      import Hello from './components/Hello'
      export default {
        name: 'app',
        data () {
          return {
            message: 'Welcome to Your Vue.js App'
          }
        },
        components: {
          Hello
        }
      }
    </script>
    
    <style>
    </style>

    单文件组件:Js,css,html 存在一个文件中,是一个单文件组件,下面vue模板文件里的Hello.vue就是一个单文件组件

    <template>
      <div class="hello">
        <h2>{{ msg }}</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello',
      data () {
        return {
          msg: 'Hello Vue'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    </style>

     

     

    vue.js的核心特点—虚拟DOM

    虚拟DOM的概述

    运行的js速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM节点,这样就造成了很大程度上的资源浪费。

    利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM

    当数据发生变化时,能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })
    
    console.dir(document)

     

     

    vue.js的核心特点—MVVM模式

    MVVM概述:M:Model数据模型 , V:view 视图模板  , vm:view-Model:视图模型

    vue的MVVM实例(双向数据绑定):当输入框输入数据的时候,相应的message也会改变

    <template>
      <div id="app">
        <input type="text" v-model="message"/>
        {{ message }}
      </div>
    </template>
    
    <script>
      export default {
        name: 'app',
        data () {
          return {
            message: 'Welcome'
          }
        }
      }
    </script>
    
    <style>
    </style>

    vue是如何实现双向数据绑定的:当数据发生改变—自动更新视图。利用Object.definedProperty中的setter/getter代理数据,监控对数据的操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
      <input type="text" id="username"><br />
      <span id="uName"></span>
    <script>
      var obj = {
        pwd: '123'
      }
      Object.defineProperty(obj, 'username', {
        set: function (val) {
          document.getElementById('uName').innerText = val
          document.getElementById('uNmae').value = val
          console.log('set')
        },
        get: function () {
        }
      })
      document.getElementById('username').addEventListener('keyup' ,function () {
        obj.username = event.target.value
      })
    </script>
    </body>
    </html>

     

     

    vue.js的核心特点—声明式渲染

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,初始化根实例,vue自动将数据绑定在DOM模板上

    声明式渲染与命令式渲染区别

    声明式渲染:所谓声明式渲染只需要声明在哪里,做什么,而无需关心如何实现

    命令式渲染:需要具体代码表达在哪里,做什么,如何实践

    需求:求数组中每一项的倍数,放在另一个数组中实例

    命令式渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
      var arr = [1, 2, 3, 4, 5]
      var newArr = []
      for (var i = 0; i < arr.length; i++) {
        newArr.push(arr[i] * 2)
      }
      console.log(newArr)
    </script>
    </body>
    </html>

    声明式渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
      var arr = [1, 2, 3, 4, 5]
      var newArr = arr.map(function (item) {
        return item * 2
      })
      console.log(newArr)
    </script>
    </body>
    </html>

     

    展开全文
  • vue开发框架简介

    2017-03-09 10:20:26
    vue基于npm开发框架模板创建介绍
  • Vue框架介绍及应用ppt

    2020-11-09 17:58:10
    Vue 团队和发展现状介绍 设计思路及与其它框架的比较 生态介绍和方案推荐 3.0 新特性、改动介绍
  • Vue框架介绍

    千次阅读 2020-02-11 23:16:59
    文章目录vue框架vue介绍Vue环境导入挂载点el插值表达式过滤器文本指令js对象补充属性方法简写:属性变量简写js中的类第一种声明类的方法第二种声明类的方法(难点)补充js函数补充事件指令绑定事件绑定事件 vue框架 ...

    vue框架

    vue介绍

    一、定义:javascript渐进式框架

    ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目

    二、优势:

    ​ 有指令(分支结构、循环结构…),复用页面结构等

    ​ 有实例成员(过滤器,监听),可以对渲染的数据做二次格式化

    ​ 有组件(模块的复用或组合),快速搭建页面

    ​ 虚拟DOM

    ​ 数据的双向绑定

    ​ 单页面应用

    ​ 数据驱动

    三、学习Vue的好处:

    ​ 前台三大主流框架:

    1. angular(庞大)

    2. React(精通移动端)

    3. Vue(吸取前两者优势,轻量级),可以实现前后台分离开发,节约开发成本

      并且Vue是中国人开发的,官方文档是中文,学习理解更轻松

    Vue环境导入

    1. cdn导入

      <script src="https://cn.vuejs.org/js/vue.js"></script>
      
    2. 本地导入(官网下载开发版本)

      <script src="js/vue.js"></script>
      

    在这里插入图片描述

    挂载点el

    1. 一个挂载点只能控制一个页面结构(优先匹配加载到的结构)
    2. 挂载点挂载的页面标签严格建议用id属性进行匹配(一般习惯用app)
    3. html标签与body标签不能作为挂载点(html和body标签不可以被替换)
    4. 是否接收vue对象,是外界是否要有vue对象的内容决定的

    在这里插入图片描述

    插值表达式

    1. 空插值表达式:{{ }};(空插值表达式中要加空格,否则不能渲染,知道即可,没什么用)
    2. 中渲染的变量在data中可以初始化
    3. 插值表达式可以进行简单运算与简单逻辑
    4. 插值表达式符合冲突解决,用delimiters自定义(了解)

    在这里插入图片描述

    过滤器

    1. 用实例成员filters来定义过滤器
    2. 在页面结构中,用 | 来标识使用过滤器
    3. 过滤方法的返回值就是过滤器过滤后的结果
    4. 过滤器可以对1~n个变量进行过滤,同时还饿可以传入辅助的变量,过滤器方法接收参数是安装传入的位置先后

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1MmSIDg8-1581433036412)()]

    在这里插入图片描述

    文本指令

    1. v-* 是vue指令,会被bue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义)

    2. v-text是原样输出渲染内容,渲染控制的标签自身内容会被替换掉(

      123

      会被num替换)
    3. v-html可以解析渲染html语法的内容

    4. 补充

      <!-- js基本数据类型:字符串、数字、布尔、undefined --><p v-text="'abc' + num + 10"></p><p>{{ 'abc' + num + 10 }}</p>
      

    在这里插入图片描述

    在这里插入图片描述

    v-text文本指令只能接收变量(当成一个字符串),不能渲染业务代码

    事件指令

    语法:v-on:可以简写为 @

    对比DOM驱动:

    1. js选择器获取目标标签
    2. 为目标标签绑定事件
    3. 在事件中完成相应逻辑
    var btn = document.getElementsByTagName('button')[0];
    btn.onclick = function () {
    console.log(111111111111);
    };
    

    一、数据驱动

    1. 操作是一个功能,使用需要一个方法来控制
    2. 方法名是变量,所以控制变量就可以控制该方法

    二、事件指令

    1. 在实例成员methods中声明事件方法
    2. 标签通过事件指令绑定声明的方法:v-on:事件=“事件方法名” , eg: 按钮

    绑定事件

    在这里插入图片描述

    在这里插入图片描述

    js对象补充

    1. js没有字典类型,只有对象类型,对象可以完全替代字典来使用
    2. js中对象的属性名,都采用字符串类型,所以就可以省略字符串的引号标识
    3. 对象中属性值为函数时,称之为方法,方法建议简写:方法名(){}
    4. 如果对象的属性是一个变量,且变量名与属性相同,还可以简写:{属性,}

    属性方法简写:

    在这里插入图片描述

    属性变量简写

    在这里插入图片描述

    js中的类

    第一种声明类的方法

    在这里插入图片描述

    第二种声明类的方法(难点)

    在函数内部出现了this语法,该函数就是 类,否则就是普通函数

    在这里插入图片描述#### 类属性

    给类属性赋值,所有对象都能访问

    在这里插入图片描述

    补充

    <script>
        // 核心
    
        // 掌握
        let age = 17.5;
        obj = dic = {
            name: 'Bob',
            age,
            eat() {
    
            }
        };
    
        // 掌握
        Student.prototype.num = 100;
        let s1 = new Student();
        let s2 = new Student();
        console.log(s1.num, s2.num);
        
        // 了解
        class People {
            constructor(name) {
                this.name = name
            }
    
            eat = function () {
    
            }
        }
    
        // 了解
        function Student(name) {
            this.name = name;
            this.eat = function () {
    
            }
        }
    
    </script>
    

    js函数补充

    直接上代码

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>js函数</title>
    </head>
    <body>
    </body>
    <script>
        // 1)函数的形参与调用时传入的实参关系(你传你的,我收我的)
        //      传入和接受的参数个数不需要一致
        //      但是一定按位进行赋值(没有关键字参数)
        //      没有接收的实参会被遗弃,没有被赋值的形参会被赋值为undefined
        function fn1(a, b) {
            console.log(a, b);
            return a + b;
        }
    
        let res = fn1(10, 20, 30);
        console.log(res);
    
        // 2)函数定义的演变
        let fn2 = function (a, b) {
            return a + b;
        };
    
        // 省略关键字的箭头函数
        let fn3 = (a, b) => {
            return a + b;
        };
    
        // 没有函数体,只有返回值的函数,可以省略作用域{},由于只有返回值,所以return也省略
        let fn4 = (a, b) => a + b;
        console.log(fn4(11, 22));
    
        // 如果形参只有一个时,声明参数的()也可以省略
        let fn5 = num => num * num;
        console.log(fn5(3));
    
        // 弱语言
        console.log(10 + '5');
        console.log(10 - '5');
        console.log(+'55555');
    
    </script>
    </html>
    
    展开全文
  • Vue(框架)介绍​

    千次阅读 2021-10-22 13:34:26
    前言,关于Vue框架 很多地方都称Vue框架,按我的理解其实叫做Vue类库更合适,这边标题遵循传统叫法,称Vue框架,并且在后面补充加了个括号。 介绍Vue之前,必须先介绍Node.js,Vue的源代码是在Node下面编译成通常...

    前言,关于Vue框架

    很多地方都称Vue框架,按我的理解其实叫做Vue类库更合适,这边标题遵循传统叫法,称Vue框架,并且在后面补充加了个括号。

    介绍Vue之前,必须先介绍Node.js,Vue的源代码是在Node下面编译成通常意义网页的。

    一、传统的JavaScript

    传统的js是运行在浏览器上的,因为浏览器内核分为两个部分:

    渲染引擎---渲染HTML和CSS;

    JavaScript 引擎---负责运行 JavaScript,随着技术的发展, Chrome 使用的 JavaScript 引擎是 V8,它的速度非常快且性能好,同时由2009年5月Ryan Dahl开发的Node.js 诞生。

    二、什么是Node.js?

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 

    Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHPPythonPerlRuby 等服务端语言平起平坐的脚本语言。 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。

    Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

    官网上对其特点描述为:

    1. 它是一个Javascript运行环境

    2. 依赖于Chrome V8引擎进行代码解释

    3. 事件驱动

    4. 非阻塞I/O

    5. 轻量、可伸缩,适于实时数据交互应用

    6. 单进程,单线程

    相对于传统的JavaScript来说,Node.js 是一个运行在服务端的框架,它的底层就使用了 V8 引擎。我们知道 Apache + PHP 以及 Java 的 Servlet 都可以用来开发动态网页,Node.js 的作用与他们类似,只不过是使用 JavaScript 来开发,它大大提升了开发的性能以及便利。

    (1)使用node开发还可以使用node自有配套的npm包管理工具:
    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
    允许用户从NPM服务器下载别人编写的第三方包到本地使用。
    允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
    允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

    Node.js 的使用包管理器 npm来管理所有模块的安装、配置、删除等操作,使用起来非常方便。

    (2)node本身就是一个服务端的框架,对于一些简单的项目,我们可以不需要后端配合,直接用node进行数据库的增删改查(但是我们一般不使用这个功能);

    (3)nodejs是一个服务js平台,有自身带的npm(基于 Node.js的前端项目包管理工具),有第三方的grunt(基于 Node.js的前端项目构建工具即即脚手架)、有第三方的express(路由功能)等强大的代码与项目管理应用。还有自身带的webpack(基于 Node.js的前端项目部署打包工具),v8(谷歌客户端浏览器javascript引擎)等强大的功能。

    npm(包管理工具)是基于 Node.js的前端项目包管理工具,是项目中对各种程序包的依赖管理,传统的开发项目主要是后端,现在技术在更新,前端有了框架的开发模式管理,也需要用包管理工具的思想去管理,目的是简化第三方程序包在项目中引用复杂化。前端的js包是全世界JavaScript 天才开发共享的各种代码模块,把这些代码模块都按照一个独立的软件功能统一在一个库中,一个代码模块是一个程序包(package,即代码模块)。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块),使用包的结构使您能够轻松跟踪依赖项和版本。  官网: https://www.npmjs.cn/

    webpack是基于 Node.js的前端项目部署打包工具。

    grunt是基于 Node.js的前端JavaScript语言项目构建工具,即脚手架。一句话:构建项目自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。官网:https://www.gruntjs.net/

    Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。

    三、Vue

    首先vue.js 是库,不是框架,不是框架,不是框架。

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

    vue.js 支持路由功能开发的 叫vue-route.js,vue.js支持数据请求功能开发的 叫vue-resource.js,李祥需求查资料求证?

    vue.js 下载过来直接在html中引入就能使用,并不一定要npm install vue,那仕么业务开发需求场景下需要使用NPM呢?NPM是仕么?

    Vue.js可以在html里直接引用后使用,等到与Vue一起配合使用的第三方应用的库或框架多起来后,一个个从html里引入就不方便了,所有要借用node.js中的npm管理包的引入,是方便包管理。

    使用Vue.js开发的前端项目如何部署?我们用到node.js中的程序打包工具比如webpack(node.js中的程序部署打包工具),可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理,让前端开发更爽。

    Vue.js是数据驱动,和JQuery思路不同,你几乎不需要自己进行复杂低效的dom操作,开发简介明了。从这一点上说,可以基本抛弃JQuery了。

    Vue.js开发有第三方支持的项目构建工具,vue-cli脚手架

    通过上面的分析,与其说是VUE需要借助NODE开发前端项目,不如换个思路,在NODE中集成VUE开发前端项目,所以,先安装Node,使用Node的npm先安装Vue,然后再安装vue-cli脚手架,最后通过vue-cli脚手架构建前端项目。

     再扩展一下思路:

    上述我们解读了Vue与Node的关系,从他们之间的关系,刨根问底,这个问题的本质是前端开发思想的问题,传统前端开发只是CSS、CSS3、HTML、HTML5、传统JS、面向对象JS(类似jQuery类库)的开发,前端技术在近几年发展迅速,如今的前端开发己不再是 10 年前写个 HTML 和 css 那样简单 了,新的概念层出不穷,比如 ECMAScript 6、 Node.js、 NPM、前端工程化、轻量级模板引擎、模块化(如vue模块vue-require.js)、组件化、预编译、双向数据绑定、路由(如vue路由vue-route.js、前端路由的框架通用的有 Director、Angular 的 ngRouter、React 的 ReactRouter)、状态管 理、动画、、 SSR、前后端分离开发等。这些新东西在不断 优化我们的开发模式,改变我们的编程思想。 随着这些技术的普及,出现一套可称为“万金油”的技术技被许多商业项目用于生产环境:

    jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)是一种前端开发方案


    这套技术战以 jQuery 为核心,能兼容绝大部分浏览器,这是很多企业比较关心的,因为他们 的客户很可能还在用 IE7 及以下浏览器。使用 RequireJS 或 SeaJS 进行模块化开发可以解决代码依 赖混乱的问题, 同时便于维护及团队协作。使用轻量级的前端模板(如 doT)可以将数据与 HTML 模板分离。最后,使用自动化构建工具(如 Gulp)可以合并压缩代码,如果你喜欢写 Less、 Sass 以及现在流行的 ES 6,也可以帮你进行预编译。 这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式,由于它的简 单、 高效、实用, 至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移,出现了更复杂 的业务场景,比如 SPA (单页面富应用〉 、 组件解稍等。为了提升开发效率,降低维护成本,传 统的前端开发模式己不能完全满足我们的需求,这时就出现了如 Angular、 React 以及我们要介绍 的主角 Vue 。

            从综合解决方案来讲,Node.js迈出第一步,为前端工程化开发奠定了基础,基于Node提供了项目脚手架、打包工具、包管理工具等等,基于Node诞生了Vue、Angular、 React等前端开发思想,以及组装搭配的前端开发方案。

             在 Node.js 出现后,jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)开发组合又有了改善,就是所谓的大前端,得益于 Node.js 和 JavaScript 的语 言特性, html 模板可以完全由前端来控制,同步或异步渲染完全由前端自由决定,并且由前端维 护一套模板,这就是为什么在服务端使用 artTemplate、 React 以及 Vue2 的原因。说了这么多,到 底怎样算是 SPA 呢?其实就是在前后端分离的基础上,加一层前端路由。

             前端路由,即由前端来维护一个路由规则。实现有两种,一种是利用 url 的 hash, 就是常说的 锚点(刑, JavaScrip/通过 hashChange 事件来监听 url 的改变, IE7 及以下需要用轮询:另一种就是 HTML5 的 History 模式,它使 url 看起来像普通网站那样,以“/”分剖,没有#,但页面并没有 跳转,不过使用这种模式需要服务端支持,服务端在接收到所有的请求后,在fl指向同一个 html 文 件,不然会出现 404。因此, SPA 只有一个 ht时,整个网站所有的内容都在这一个 html 里,通过 JavaScript 来处理。 前端路由的优点有很多,比如页面持久性,像大部分音乐网站,你都可以在播放歌曲的同时 跳转到别的页面,而音乐没有中断。再比如前后端彻底分离。前端路由的框架通用的有 Director (ht刷://github.com/flatiron/director ),不过更多还是结合具体框架来用,比如 Angular 的 ngRouter, React 的 ReactRouter,以及本节要介绍的 Vue 的 vue-router。 如果要独立开发一个前端路由,需要考虑到页面的可插拔、页面的生命周期、内存管理等 问题。

    Node的webpack打包的核心思想就是单页面富应用(SPA) 。 SPA 通常是由一个 html 文件和一堆按需 加载的 js 组成,它的 html 结构可能会非常简单,比如:
    <!DOCTYPE html>

    <html lang=”zh-CN”>

    <head>

    <meta charset=”UTF-8”>

    <title>webpack app</title>

    <link rel=” stylesheet” href=”dist/mai口 .css ”>

    </head>

    <body>

    <div id=” app”></div> <script type=”text/javascript” src=”dist/main.j s ”></lcript>
    </body>

    </html>
    看起来很简单是吧?只有一个<div>节点,所有的代码都集成在了神奇的 main扣 文件中,理论 上古可以实现像知乎、淘宝这样大型的项目。 在开始讲解 webpack 的用法前,先介绍两个 ES6 中的语法 export 和 impo此, 因为在后面会大 量使用,如果对它不了解,可能会感到很困惑。 export 和 import 是用来导出和导入模块的。 一个模块就是一个js 文件,它拥有独立的作用域, 里面定义的变量外部是无法获取的。比如将一个配置文件作为模块导出,示例代码如下:

     以上几个示例中,导入的模块名称都是在 export 的文件中设置的,也就是说用户必须预先知道 这个名称叫什么,比如 Config、 add。而有的时候,用户不想去了解名称是什么,只是把模块的功能 拿来使用,或者想自定义名称,这时可以使用 export default 来输出默认的模块。示例代码如下:

     Node+Vue+ VueRequire+VueRoute+VueCli就是流行的前端开发方案。

    Vue项目框架的搭建

    1、安装node.js

    直接百度搜索或者在其中文官网也可以下载下载 | Node.js 中文网 ,在安装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功。如下图所示:

    2、改变原有的环境变量
    (1)配置npm的全局模块的存放路径以及cache的路径,在nodejs的主目录下新建"node_global"及"node_cache"两个文件夹,例如两个文件夹放在NodeJS的主目录下,便在NodeJs下建立"node_global"及"node_cache"两个文件夹,输入以下命令改变npm配置。

     然后输入如下两个命令:

    npm config set prefix “E:\commontool\nodejs\node_global”
    npm config set cache “E:\commontool\nodejs\node_cache”

    (2)在node_global文件夹下新建node_modules文件夹,系统环境变量Path中添加路径E:\commontool\nodejs\node_global\node_modules,此后所安装的模块都会安装到改路径下。

    (3)在命令行输入以下命令试着安装express(注:“-g”这个参数意思是装到global目录下,也就是上面说设置的“E:\commontool\nodejs\node_global”里面。)

        npm install express -g
       安装完毕后可以看到.\node_global\node_modules\express 已经有内容

     (4)控制台cd进入E:\commontool\nodejs\node_global\node_modules\express路径下,在命令行输入node进入编辑模式,输入以下代码测试是否能正常加载模块:
    require(‘express’)  ,假设成功,可以看到有输出。假设出错,检查NODE_PATH的路径。

    3、安装淘宝npm(cnpm)

    (1)输入以下命令
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    (2)添加系统变量path的内容
    因为cnpm会被安装到E:\commontool\nodejs\node_global下,而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm;如下图配置:

     (3)输入cnpm -v输入是否正常。

    4、vue-cli的搭建

    打开cmd ,敲入命令:
    cnpm install --global vue-cli (–global:全局安装)

    安装成功后输入vue -V出现版本号证明安装成功。

    5、vue的命令

    安装依赖cnpm install,注意,一般用的是cnpm;如果平常时开发就跑npm run dev(本地开发跑代码),如果需要打包则跑npm run build

    安装调试界面:

    cnpm i -g @vue/cli
    
    cnpm install -g @vue/cli

    安装成功后命令 vue ui,打开调试工具。

    展开全文
  • 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 丰富的组件,支持表单、文件上传、富文本.
  • h5+vue初始配置框架

    2020-07-29 15:27:21
    一个使用vue-cli配置的移动端项目,应用vant中的Rem 适配,可以重复使用。让搭建项目初始的时间大大减少。
  • Vue(js框架)项目代码.zip
  • Vue框架

    万次阅读 多人点赞 2021-10-18 19:46:20
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如...
  • SpringBoot +vue 框架项目 代码简洁优秀 注释清楚 可以拿来直接进行二次开发 欢迎程序员们一起努力进步!
  • vue.js框架简介

    千次阅读 2018-08-22 16:01:45
    vue.js 是轻量级的MVVM开发框架。 官方网站:cn.vuejs.org  
  • VUE框架 详解入门

    千次阅读 2022-03-18 23:03:48
    vue框架快速入门到实操
  • Vue.js前端框架详细介绍

    万次阅读 多人点赞 2020-04-05 17:16:55
    1、Vue.js框架简介 1.1、为什么要学习Vue.js 什么是Vue.js Vue(读音 /vju:/,发音类似于 view)是一套用于构建用户界面的渐进式的JavaScript框架。 Vue.js的优点 体积小:压缩后只有33k; 更高的运行效率:基于...
  • Vue.js 是什么?  Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API;  我们都知道单页面应用:页面切换快 ,首屏时间稍慢,SEO差 js 渲染  (多页面应用: 首屏时间快,SEO好 切换...
  • Vue简明实用教程(01)——Vue框架入门

    千次阅读 2021-11-09 21:32:08
    Vue是一个渐进式的JavaScript框架Vue主要特征如下:
  • vue框架优点和缺点

    千次阅读 2022-02-04 17:07:02
    谈论话题之前先说点废话打开一下思想:从古至今设计出来一个新的东西并且被人广泛使用的就...当然vue等底层肯定也是要操作dom的,只不过作为使用vue框架的我们来说感觉是数据驱动dom。 vue是mvvm框架:可以把一个大的
  • Element UI 完整版 源码 可用 vue+Element-UI 前端框架
  • vue介绍及vue与其它框架的优缺点

    万次阅读 2019-04-15 18:36:12
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...
  • VUE框架学习心得

    千次阅读 2020-11-11 13:41:46
    在数通畅联的DAP数据分析平台中用到了可视化展现的Echarts组件,Echarts组件用到了VUE框架的代码知识。在近期工作中,我多次学习并使用到了VUE框架的代码知识。在大数据技术蓬勃发展的时代下,将庞大的数据量进行...
  • Vue框架快速入门

    万次阅读 多人点赞 2017-10-17 02:51:07
    当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前,最好先学习一下这些知识...
  • 这些Vue框架用起来很舒服

    千次阅读 多人点赞 2021-10-26 07:27:39
    VUE3框架网站????导读????Vuestic????Ant Design Vue????Element+????Ionic????Naive UI????PrimeVUE????Wave UI最重要的事 ????导读 最近再写web项目的时候找了一些个不错的VUE3的框架,好了我们废话不多说来看看...
  • 基于ant-design和vue的中后台管理框架
  • 搭建一个Vue框架

    万次阅读 多人点赞 2019-04-17 23:56:16
    之前工作的时候,有段时间工作的项目是前后端分离的,感觉前后端分离的模式比较舒服,主要是自己对前后端分离的框架比较好奇,所以准备自己搭建一个基于Vue的前端框架,至于对应的后端的框架,等有时间也整理一个...
  • vue框架搭建步骤详解

    千次阅读 2020-11-06 17:57:02
    首先,安装node.js 各种版本的...webpack是官方推荐的标准模板名 vue init webpack 项目名称 //vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置 vue create 项目名称 按照提示回答即完成vue框架搭建
  • Vue.js框架入门之vue简介和基本语法(一) Vue.js框架入门之基本语法(二) Vue.js框架入门之条件渲染、列表渲染、事件处理 Vue.js框架入门之表单和组件基础 Vue.js框架入门之组件创建、注册、使用 现在来续写第六期...
  • Vue框架之前需要了解的知识

    千次阅读 2020-11-12 15:45:48
    Vue框架之前需要了解的知识axios HTTP 库vue-router 页面路由vuex 状态管理UI 界面组件webpack JavaScript模块打包器 axios HTTP 库 axios 中文API Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node....
  • 搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node、npm版本,确保环境正确 node --version npm --version 2.安装vue脚手架工具vue-cli 若开发工具为...
  • vue+elementUI 框架模板

    2019-05-06 17:39:28
    该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录,引用Element UI组件库,方便开发快速简洁好看的组件。...
  • IDEA 使用VUE框架

    千次阅读 2019-07-18 16:29:49
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设 计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 169,698
精华内容 67,879
关键字:

vue框架简介