精华内容
下载资源
问答
  • 1.vue.js前端框架:初识Vue.js 千次阅读 多人点赞
    2021-04-13 12:05:38

    1.1 Vue.js 概述

    • Vue.js 是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是,它只关注视图层(View层),采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。它不仅容易上手,还非常容易与其他库或已有项目进行整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue .js 也完全能够为复杂的单页应用提供驱动。

    1.1.1 Vue.js 是什么

    • Vue.js 实际上是一个用于开发 Web 前端界面的库,其本身具有响应式编程和组件化的特点。所谓响应式编程,即保持状态和视图的同步。响应式编程允许将相关模型的变化自动反映到视图上,反之亦然。Vue.js 采用的是MVVM(Model-View-ViewModel)的开发模式。与传统的MVC开发模式不同,MVVM 将MVC中的 Controller 改成了ViewModel。在这种模式下,View 的变化会自动更新到 ViewModel,而 ViewModel 的变化也会自动同步到 View 上进行显示。
    • ViewModel 模式的示意图如下图所示:
      在这里插入图片描述
    • 与ReactJS一样,Vue.js同样拥有”一切都是组件“的理念。应用组件化的特点,可以将任意封装好的代码注册成标签,这样就在很大程度上减少了重复开发,提高了开发效率和代码复用性。如果配合Vue.js的周边工具vue-loader,可以将一个组件的HTML、CSS、JavaScript代码都写在一个文件中,这样可以实现模块化的开发。

    1.1.2 Vue.js的特性

    • Vue.js的主要特性如下:
    • 轻量级
      相比较AngularJS和ReactJS而言,Vue.js是一个更轻量级的前端库。不但容量非常小,而且没有其它的依赖。
    • 数据绑定
      Vue.js最主要的特点就是双向的数据绑定。在传统的Web项目中,将数据在视图层展示出来后,如果需要再次修改视图,需要通过获取DOM的方法进行修改,这样才能维持数据和视图的一致。而Vue.js是一个响应式的数据绑定系统,在建立绑定后,DOM将和Vue对象中的数据保持同步,这样就无须手动获取DOM的值再同步到 js中。
    • 应用指令
      同AngularJS一样,Vue.js也提供了指令这一概念。指令用于在表达式的值发生变化时,将某些行为应用到绑定的DOM上,通过对应表达式值的变化就可以修改对应的DOM。
    • 插件化开发
      与AngularJS类似,Vue,js也可以用来开发一个完整的单页应用。在Vue.js的核心库中并不包含路由、Ajax等功能,但是可以非常方便地加载对应插件来实现这样的功能。例如,vue-router插件提供了路由管理的功能,vue-resource插件提供了数据请求的功能。

    2.1 Vue.js的安装

    2.1.1 直接下载并使用 script 标签引入

    • Vue.js官网:https://cn.vuejs.org/v2/guide/
    • 在Vue.js的官方网站中可以直接下载vue.js文件并使用 script标签引入。
      1、下载Vue.js
      Vue.js是一个开源的库,可以从它的官方网站中下载。下面介绍具体的下载步骤:
      (1)打开Vue.js的官方网站,进入到Vue.js的下载页面,找到如下图1.2所示的内容。
      在这里插入图片描述
      (2)根据开发者的实际情况选择不同的版本进行下载。这里以下载开发版本为例,在”开发版本“按钮上单击鼠标右键,如下图1.3所示。
      在这里插入图片描述
      (3)在弹出的快捷菜单中单击“连接另存为”选项,弹出下载对话框,如下图1.4所示,单击对话框中的“保存”按钮,将Vue.js文件下载到本地计算机上。在这里插入图片描述此时下载的文件为完整不压缩的开发版本。如果在开发环境下,推荐使用该版本,因为该版本中包含所有常见错误相关的警告。如果在生产环境下,推荐使用压缩后的生产版本,因为使用生产版本可以带来比开发环境下更快的速度体验。
    • 引入Vue.js
      将Vue.js下载到本地计算机后,还需要在项目中引用Vue.js。即将下载后的vue.js文件放置到项目的指定文件夹中。通常文件放置在JS文件夹中,然后在需要应用vue.js文件的页面中使用下面的语句,将其引入到文件中。
    <script type="text/javascript" src="JS/vue.js"></script>
    

    注意:引入Vue.js的 script 标签,必须放在所有的自定义脚本文件的script 之前,否则在自定义的脚本代码中应用步到Vue.js。

    2.1.2 使用CDN方法

    • 在项目中使用Vue.js,还可以采用引用外部CDN文件的方式。在项目中直接通过 script 标签加载CDN文件,通过CDN文件引用Vue.js的代码如下:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
    

    注意:为了防止出现外部CDN文件不可用的情况,还是建议用户将Vue.js下载到本地计算机中。

    2.1.3 使用NPM方法

    • 在使用Vue.js构建大型应用时,推荐使用NPM方法进行安装,执行命令如下:
    npm install vue
    

    注意:使用NPM方法安装Vue.js需要在计算机中安装node.js。
    node;js官网:https://nodejs.org/en/,通过node.js官网下载之后,傻瓜式安装即可。

    3.1 前端框架开发工具

    • 利用Vue.js进行前端框架开发的常用工具有如下几个:WebStorm、IDEA、Vscode

    • 前端框架开发常用的工具下载:
      (1)WebStorm官网:https://www.jetbrains.com/webstorm/
      (2)IDEA官网:https://www.jetbrains.com/idea/
      (3)Vscode官网:https://vscode.en.softonic.com/

    • WebStorm和IDEA在官网上下载安装之后,试用期为30天,试用期之后有三种方式进行激活,个人建议使用注册码激活,注册码免费激活微信群在网上便可以找到。不过注册码不太稳定,可以去淘宝买一个注册码,WebStorm和IDEA都可以使用该注册码。

    备注:后期继续跟进Vue.js前端框架:Vue.js的基础特性,希望大家多多支持和关注。

    更多相关内容
  • vue实战开发.快速上手.好不容易找到电子版.非PDF版
  • Vue.js v3.0 教程,Vue3 教程,vue.js从入门到精通,vue.js3.0教程,零基础学习vue.jsVue.js是一个专注于视图模型(ViewModal)的框架,轻巧、高性能、可组件化的MVVM库
  • Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有...
  • vue.jsvue.min.js

    2018-07-17 15:10:10
    vue.jsvue.min.jsvue.jsvue.min.jsvue.jsvue.jsvue.min.jsvue.jsvue.min.jsvue.min.jsvue.jsvue.min.j s
  • Explore Vue.js to take advantage of the capabilities of modern browsers and devices using the fastest-growing framework for building dynamic JavaScript applications. You will work with the power of ...
  • Vue.js源码全方位深入解析。面试和深入学习必备。⽬前社区有很多 Vue.js 的源码解析⽂章, 但是质量层次不⻬, 不够系统和全⾯, 这本电⼦书的⽬标是 全⽅位细致深度解析 Vue.js 的实现原理, 让同学们可以彻底掌握 ...
  • 支持Vue.js 2和Vue.js 3。 主要特征: 每种元素都选择了两种剪裁方法(CSS / JavaScript) 无需指定线高 重新截取元素大小和React性数据更改 没有依赖关系(小而快速) 要获得动手经验,请尝试“ 。 安装 # ...
  • Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.jsVue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。下面这篇文章主要给大家介绍了...
  • idea插件 vue.js IDEA2017.3亲测可装 无兼容问题 Setting>plugins>install plugin from disk 选择文件安装完重启即可
  • 快速入门安装只需安装npm软件包vue-highlightjs:npm install --save vue-highlightjs使用vue-highlightjs在主JavaScript文件(例如main.js)中://导入Vuevue-highlgihtjs从“ vue”导入Vue从'vue-highlightjs'...
  • vue.js 源代码最新版

    2018-10-14 18:08:15
    Vue.js是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页面应用的Web应用框架。
  • Getting to Know Vue.js

    2018-11-19 18:25:25
    Getting to Know Vue.js Learn to Build Single Page Applications in Vue from Scratch
  • 包含Vue.js JavaScript li Vue.js PackHTML Intellisense和代码段从VS Gallery下载此扩展或获取CI构建。 包含HTML Intellisense和Vue.js JavaScript库的代码段。有关更改和路线图,请参阅更改日志。 功能.vue文件被...
  • idea vue.js插件

    2018-12-05 09:50:22
    idea vue.js插件 亲测可用 
  • 一个基于Electron,Vue.js和Tesseract.js构建的简单OCR应用程序 博客文章的原始思想:使用Electron,Vue.js和Tesseract.js创建一个简单的OCR应用程序 如今, JavaScript是最流行的编程语言之一,并通过Web在许多...
  • vue.min.js下载

    2018-01-26 13:56:02
    vue.min.js 欢迎大家来下载一起分享使用一起探讨技术数据
  • vue.js 2.0下载

    千次下载 热门讨论 2016-12-07 11:32:33
    vue.js 前端框架,2.0版本
  • vue-underscore,您知道Underscore.jsJavaScript的实用程序带库,它为常见的功能嫌疑人提供支持(每个,地图,红色vue-underscore。您知道Underscore.jsJavaScript的实用程序带库,为以下功能提供支持:目录功能...
  • RawModel.js是一个简单的框架,提供了支持验证和错误处理的强类型JavaScript对象。 它具有丰富的API,可大大简化服务器端和客户端的数据验证和操作。 因为它是一个不受限制的框架,所以可以完美地与流行的模块(例如...
  • vue-inputmask Vue.js指令可向输入中添加掩码(香草javascript)。 它是Robin Herbots https:// gi vue-inputmask Vue.js指令对inputmask库的绑定,以向输入中添加掩码(香草javascript)。 它是Robin Herbots ...
  • vue.js学习经典实例(本人总结)

    热门讨论 2015-12-08 20:43:15
    基于vue.js开发,移动前端的例子,聊天窗口,消息列表,tab切换。
  • Vuevue-gtag全局站点标签插件全局站点标签(gtag.js)是一个JavaScript标记框架和API,允许您将事件数据发送到Vuevue-gtag全局站点标签插件。Vue全局站点标签(gtag.js) )是一个JavaScript标记框架和API,可让...
  • vue.js是一款轻量级的渐进式JavaScript框架,之前我们也分享过一些基于vue.js的应用,例如这款基于Vue.js的Tooltip用户通知弹出框和基于Vue.js的超实用科学型计算器。这次给大家带来了一款基于Vue.js的有趣动画,它...
  • vue-highlightjs 使用可以轻松实现语法突出。 快速开始 安装 只需安装 : npm install --save vue-...// Tell Vue.js to use vue-highlightjs Vue . use ( VueHighlightJS ) 在您的模板中,为了突出显示javascript
  • [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. ...

    问题描述

    今天有童鞋在用 vue 项目写代码的时候,问我为啥会出现以下报错?

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
    
    (found in <Root>)
    

    在这里插入图片描述

    问这个问题的童鞋估计是没怎么看过 vue 的源码,vue 官网是没有这一部分的介绍的,得自己看源码!

    问题原因

    由于项目中引用的是 vue.runtime.esm.js,然后在代码中又用了 template 属性,导致无法解析 template 里面内容,项目报错。

    解决方案

    针对不同脚手架可以这样做:

    vue-cli 脚手架创建的项目

    创建或修改 vue.config.js 文件,修改 webpack 配置,把项目中的 vue 换成 “编译 + 运行” 版本。

    module.exports = {
       ...
        chainWebpack: config => {
         config.resolve.alias
           .set("vue$",'vue/dist/vue.esm.js');
           ...
        }
    };
    

    普通 Webpack 项目

    修改一下 webpack 配置,把项目中的 vue 换成 “编译 + 运行” 版本。

    module.exports = {
      // ...
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
        }
      }
    

    Rollup 项目

    修改Rollup 配置,把项目中的 vue 换成 “编译 + 运行” 版本。

    const alias = require('rollup-plugin-alias')
    
    rollup({
      // ...
      plugins: [
        alias({
          'vue': 'vue/dist/vue.esm.js'
        })
      ]
    })
    

    浏览器

    直接 CDN 引用 UMD 类型的 “编译 + 运行” 版本。

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    ok!下面我们结合 Demo 分析一下 vue 的各个 dist(资源包)之间的区别。

    开始

    为了更好的去分析 vue 各个资源包之间的区别,我们简单的搭建一个 vue 项目。

    首先创建一个目录叫 vue-dist-demo,然后初始化 npm

    mkdir vue-dist-demo && cd vue-dist-demo && npm init
    

    接下来我们需要安装 webpack 相关的依赖:

    安装 webpack

    webpack 核心库。

    在工程目录 vue-dist-demo 执行以下命令安装 webpack:

    npm install -D webpack --registry https://registry.npm.taobao.org
    

    安装 webpack-cli

    webpack 指令库。

    在工程目录 vue-dist-demo 执行以下命令:

    npm install -D webpack-cli --registry https://registry.npm.taobao.org
    

    安装 webpack-dev-server

    webpack 开发者服务框架。

    在工程目录 vue-dist-demo 执行以下命令:

    npm install -D webpack-dev-server --registry https://registry.npm.taobao.org
    

    安装 webpack-chain

    webpack 配置工具。

    在工程目录 vue-dist-demo 执行以下命令:

    npm install -D webpack-chain --registry https://registry.npm.taobao.org
    

    创建 webpack 配置

    在工程目录 vue-dist-demo 下创建一个 webpack.config.js 文件:

    touch webpack.config.js
    

    然后对 webpack.config.js 进行配置,用 webpack-chain 导入一个 webpack 配置:

    const config = new (require('webpack-chain'))();
    
    module.exports = config.toConfig();
    

    为了开发方便,我们在 package.json 中声明两个脚本 builddev

    {
      "name": "vue-dist-demo",
      "version": "1.0.0",
      "description": "## 问题描述",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "rimraf dist && webpack --mode=production",
        "dev": "webpack-dev-server --mode=development --progress"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
       "webpack": "^5.4.0",
        "webpack-dev-server": "^3.11.0",
        "webpack-chain": "^6.5.1",
        "webpack-cli": "^3.3.12"
      }
    }
    

    入口与出口

    我们首先在工程目录 vue-dist-demo 下创建一个 src 目录,然后在 src 目录下创建一个 main.s 文件:

    mkdir src && cd src && touch main.js && cd ..
    

    然后我们找到 webpack.config.js 文件,对 webpack 的入口和出口进行配置:

    const path = require('path');
    const config = new (require('webpack-chain'))();
    config
        .context(path.resolve(__dirname, '.')) // webpack 上下文目录为项目根目录
            .entry('app') // 入口文件名称为 app
            .add('./src/main.js') // 入口文件为 ./src/main.ts
            .end()
        .output
            .path(path.join(__dirname, './dist')) // webpack 输出的目录为根目录的 dist 目录
            .filename('[name].[hash:8].js') // 打包出来的 bundle 名称为 "[name].[hash:8].js"
            .publicPath('/') // publicpath 配置为 "/"
            .end()
    

    安装 vue

    vue 核心 API。

    npm install vue --registry https://registry.npm.taobao.org
    

    安装 vue-loader

    .vue 文件加载器。

    npm install vue-loader -D --registry https://registry.npm.taobao.org
    

    安装 vue-template-compiler

    .vue 文件模版解析器。

    npm install vue-template-compiler -D --registry https://registry.npm.taobao.org
    

    安装 html-webpack-plugin

    npm install -D html-webpack-plugin -D --registry https://registry.npm.taobao.org
    

    接下来我们在工程目录 sy_webpack-wedding 底下创建一个 public 目录,然后在 public 目录下创建一个 index.html 文件作为我们 app 的入口页面:

    mkdir public && touch public/index.html
    

    然后将以下内容写入 public/index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Title</title>
      </head>
      <body>
        <noscript>your browser should support javascript!</noscript>
        <div id="app"></div>
        <!-- html-webpack-plugin 将自动引入入口文件 -->
      </body>
    </html>
    

    webpack 配置全部内容:

    const path = require('path');
    const config = new (require('webpack-chain'))();
    config
        .context(path.resolve(__dirname, '.')) // webpack 上下文目录为项目根目录
            .entry('app') // 入口文件名称为 app
            .add('./src/main.js') // 入口文件为 ./src/main.ts
            .end()
        .output
            .path(path.join(__dirname, './dist')) // webpack 输出的目录为根目录的 dist 目录
            .filename('[name].[hash:8].js') // 打包出来的 bundle 名称为 "[name].[hash:8].js"
            .publicPath('/') // publicpath 配置为 "/"
            .end()
        .resolve
            .extensions
                .add('.js')
                .add('.vue') // 配置以 .js 等结尾的文件当模块使用的时候都可以省略后缀
                .end()
            .end()
        .module
            .rule('vue') // vue-loader 相关配置
                .test(/\.vue$/) // 匹配 .vue 文件
                .use('vue-loader')
                    .loader('vue-loader')
                    .end()
                .end()
            .end()
        .plugin('vue-loader-plugin') // vue-loader 必须要添加 vue-loader-plugin
            .use(require('vue-loader').VueLoaderPlugin, [])
            .end()
        .plugin('html') // 添加 html-webpack-plugin 插件
            .use(require('html-webpack-plugin'), [
                {
                    template: path.resolve(__dirname, './public/index.html'), // 指定模版文件
                    chunks: ['app'], // 指定需要加载的 chunk
                    inject: 'body', // 指定 script 脚本注入的位置为 body
                },
            ])
            .end()
        .devServer
            .host('0.0.0.0') // 服务器外部可访问
            .disableHostCheck(true) // 关闭白名单校验
            .contentBase(path.resolve(__dirname, './public')) // 设置一个 express 静态目录
            .historyApiFallback({
                disableDotRule: true, // 禁止在链接中使用 "." 符号
                rewrites: [
                    { from: /^\/$/, to: '/index.html' }, // 将所有的 404 响应重定向到 index.html 页面
                ],
            })
            .port(8080) // 当前端口号
            .hot(true) // 打开页面热载功能
            .sockPort('location') // 设置成平台自己的端口
            .open(true);
    module.exports = config.toConfig();
    

    测试

    我们在 src 目录下创建一个 app.vue 文件:

    touch src/app.vue
    

    然后将以下内容写入其中:

    <template>
        <div class="app">{{ msg }}</div>
    </template>
    
    <script>
    export default {
        name: "app",
        data(){
            return {
                msg: "hello"
            }
        }
    }
    </script>
    

    很简单,就是一个简单的 vue 文件。

    然后在 main.js 中引入 app.vue 文件:

    import Vue from 'vue';
    import App from './app.vue';
    new Vue({
        el: '#app',
        render: (h) => h(App),
    });
    

    ok!一切准备完毕后,我们直接在工程目录运行 npm run dev 命令:

    npm run dev
    

    运行完毕后浏览器打开:

    在这里插入图片描述

    可以看到,一个简单的 vue 项目就搭建并且运行起来了。

    其实如果对 webpack 很熟悉的话,从 0 开始搭建一个 vue 项目就很简单了,所以强烈推荐大家去看一下我上一篇 webpack 的文章,来和 webpack 谈场恋爱吧

    ok!我们看一下目前的 src/main.js 文件:

    import Vue from 'vue';
    import App from './app.vue';
    new Vue({
        el: '#app',
        render: (h) => h(App),
    });
    

    我们试着换一种方式来实现渲染:

    import Vue from 'vue';
    import App from './app.vue';
    new Vue({
        el: '#app',
        components:{
            App,
        },
        template: "<app></app>"
    });
    

    可以看到,我们注册了一个 App 组件,然后通过 vue 的 template 渲染了一个 App 组件。有点 vue 基础的童鞋,这个代码还是很容易看懂的,我就不一一解释了。

    我们运行一下 npm run dev 命令,然后打开浏览器看效果:

    npm run dev
    

    在这里插入图片描述

    可以看到,跟我们文章一开始报的错误一样了,那么我们可以怎么修改呢?前面已经给了解决方法。

    1. 修改 webpack.config.js 文件,把项目中的 vue 换成 “编译 + 运行” 版本。

      const path = require('path');
      const config = new (require('webpack-chain'))();
      config
          .context(path.resolve(__dirname, '.')) // webpack 上下文目录为项目根目录
          .entry('app') // 入口文件名称为 app
              .add('./src/main.js') // 入口文件为 ./src/main.ts
              .end()
          .output
              .path(path.join(__dirname, './dist')) // webpack 输出的目录为根目录的 dist 目录
              .filename('[name].[hash:8].js') // 打包出来的 bundle 名称为 "[name].[hash:8].js"
              .publicPath('/') // publicpath 配置为 "/"
              .end()
          .resolve
              .extensions
                  .add('.js')
                  .add('.vue') // 配置以 .js 等结尾的文件当模块使用的时候都可以省略后缀
                  .end()
              .alias
                  .set('vue$', 'vue/dist/vue.esm.js')
                  .end()
              .end()
          .module
              .rule('vue') // vue-loader 相关配置
                  .test(/\.vue$/) // 匹配 .vue 文件
                  .use('vue-loader')
                      .loader('vue-loader')
                      .end()
                  .end()
              .end()
          .plugin('vue-loader-plugin') // vue-loader 必须要添加 vue-loader-plugin
              .use(require('vue-loader').VueLoaderPlugin, [])
              .end()
          .plugin('html') // 添加 html-webpack-plugin 插件
              .use(require('html-webpack-plugin'), [
                  {
                      template: path.resolve(__dirname, './public/index.html'), // 指定模版文件
                      chunks: ['app'], // 指定需要加载的 chunk
                      inject: 'body', // 指定 script 脚本注入的位置为 body
                  },
              ])
              .end()
          .devServer
              .host('0.0.0.0') // 服务器外部可访问
              .disableHostCheck(true) // 关闭白名单校验
              .contentBase(path.resolve(__dirname, './public')) // 设置一个 express 静态目录
              .historyApiFallback({
                  disableDotRule: true, // 禁止在链接中使用 "." 符号
                  rewrites: [
                      { from: /^\/$/, to: '/index.html' }, // 将所有的 404 响应重定向到 index.html 页面
                  ],
              })
              .port(8080) // 当前端口号
              .hot(true) // 打开页面热载功能
              .sockPort('location') // 设置成平台自己的端口
              .open(true);
      module.exports = config.toConfig();
      

      可以看到,我们指定 webpack 的 alias,给 vue 源码指向了 vue/dist/vue.esm.js 文件,效果我就不演示了哈,小伙伴自己运行看效果。

    2. 引入 vue 的时候直接引入 vue/dist/vue.esm.js 文件。

      修改一下 src/main.js 文件:

      // import Vue from 'vue';
      import Vue from 'vue/dist/vue.esm';
      import App from './app.vue';
      new Vue({
          el: '#app',
          components:{
              App,
          },
          template: "<app></app>"
      });
      

      可以看到,我们引入 vue 的时候直接指定了 vue/dist/vue.esm.js 文件,小伙伴自己运行看效果。

    分析

    效果我们看到了,怎么解决报错我们也知道了,那么各个 vue 源码文件到底有什么区别呢?

    我们先看一下到底有哪些 vue 源码文件?我们找到 vue 的依赖:
    在这里插入图片描述

    可以看到,vue 的源码文件还是比较多的,那么之间的区别又是啥呢?我们平时的项目又该怎么选呢?

    其实官方已经给了一段解释,但是解释的很简单,我们可以找到 vue/dist/README.md 文件:

    UMDCommonJSES Module
    Fullvue.jsvue.common.jsvue.esm.js
    Runtime-onlyvue.runtime.jsvue.runtime.common.js> > vue.runtime.esm.js
    Full (production)vue.min.js
    Runtime-only (production)vue.runtime.min.js

    其实我们发现,虽然源码文件很多,但是区别好像就是一个加了 compiler ,一个没加 compiler,比如:vue.jsvue.runtime.js

    我们去 vue 的官网找到一份打包各个版本的脚本文件 https://github.com/vuejs/vue/blob/dev/scripts/config.js

    ...
    const builds = {
      // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
      'web-runtime-cjs-dev': {
        entry: resolve('web/entry-runtime.js'),
        dest: resolve('dist/vue.runtime.common.dev.js'),
        format: 'cjs',
        env: 'development',
        banner
      },
      'web-runtime-cjs-prod': {
        entry: resolve('web/entry-runtime.js'),
        dest: resolve('dist/vue.runtime.common.prod.js'),
        format: 'cjs',
        env: 'production',
        banner
      },
      // Runtime+compiler CommonJS build (CommonJS)
      'web-full-cjs-dev': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.common.dev.js'),
        format: 'cjs',
        env: 'development',
        alias: { he: './entity-decoder' },
        banner
      },
      'web-full-cjs-prod': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.common.prod.js'),
        format: 'cjs',
        env: 'production',
        alias: { he: './entity-decoder' },
        banner
      },
      // Runtime only ES modules build (for bundlers)
      'web-runtime-esm': {
        entry: resolve('web/entry-runtime.js'),
        dest: resolve('dist/vue.runtime.esm.js'),
        format: 'es',
        banner
      },
      // Runtime+compiler ES modules build (for bundlers)
      'web-full-esm': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.esm.js'),
        format: 'es',
        alias: { he: './entity-decoder' },
        banner
      },
      // Runtime+compiler ES modules build (for direct import in browser)
      'web-full-esm-browser-dev': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.esm.browser.js'),
        format: 'es',
        transpile: false,
        env: 'development',
        alias: { he: './entity-decoder' },
        banner
      },
      // Runtime+compiler ES modules build (for direct import in browser)
      'web-full-esm-browser-prod': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.esm.browser.min.js'),
        format: 'es',
        transpile: false,
        env: 'production',
        alias: { he: './entity-decoder' },
        banner
      },
      // runtime-only build (Browser)
      'web-runtime-dev': {
        entry: resolve('web/entry-runtime.js'),
        dest: resolve('dist/vue.runtime.js'),
        format: 'umd',
        env: 'development',
        banner
      },
      // runtime-only production build (Browser)
      'web-runtime-prod': {
        entry: resolve('web/entry-runtime.js'),
        dest: resolve('dist/vue.runtime.min.js'),
        format: 'umd',
        env: 'production',
        banner
      },
      // Runtime+compiler development build (Browser)
      'web-full-dev': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.js'),
        format: 'umd',
        env: 'development',
        alias: { he: './entity-decoder' },
        banner
      },
      // Runtime+compiler production build  (Browser)
      'web-full-prod': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.min.js'),
        format: 'umd',
        env: 'production',
        alias: { he: './entity-decoder' },
        banner
      },
      // Web compiler (CommonJS).
      'web-compiler': {
        entry: resolve('web/entry-compiler.js'),
        dest: resolve('packages/vue-template-compiler/build.js'),
        format: 'cjs',
        external: Object.keys(require('../packages/vue-template-compiler/package.json').dependencies)
      },
      // Web compiler (UMD for in-browser use).
      'web-compiler-browser': {
        entry: resolve('web/entry-compiler.js'),
        dest: resolve('packages/vue-template-compiler/browser.js'),
        format: 'umd',
        env: 'development',
        moduleName: 'VueTemplateCompiler',
        plugins: [node(), cjs()]
      },
      // Web server renderer (CommonJS).
      'web-server-renderer-dev': {
        entry: resolve('web/entry-server-renderer.js'),
        dest: resolve('packages/vue-server-renderer/build.dev.js'),
        format: 'cjs',
        env: 'development',
        external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
      },
      'web-server-renderer-prod': {
        entry: resolve('web/entry-server-renderer.js'),
        dest: resolve('packages/vue-server-renderer/build.prod.js'),
        format: 'cjs',
        env: 'production',
        external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
      },
      'web-server-renderer-basic': {
        entry: resolve('web/entry-server-basic-renderer.js'),
        dest: resolve('packages/vue-server-renderer/basic.js'),
        format: 'umd',
        env: 'development',
        moduleName: 'renderVueComponentToString',
        plugins: [node(), cjs()]
      },
      'web-server-renderer-webpack-server-plugin': {
        entry: resolve('server/webpack-plugin/server.js'),
        dest: resolve('packages/vue-server-renderer/server-plugin.js'),
        format: 'cjs',
        external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
      },
      'web-server-renderer-webpack-client-plugin': {
        entry: resolve('server/webpack-plugin/client.js'),
        dest: resolve('packages/vue-server-renderer/client-plugin.js'),
        format: 'cjs',
        external: Object.keys(require('../packages/vue-server-renderer/package.json').dependencies)
      },
      // Weex runtime factory
      'weex-factory': {
        weex: true,
        entry: resolve('weex/entry-runtime-factory.js'),
        dest: resolve('packages/weex-vue-framework/factory.js'),
        format: 'cjs',
        plugins: [weexFactoryPlugin]
      },
      // Weex runtime framework (CommonJS).
      'weex-framework': {
        weex: true,
        entry: resolve('weex/entry-framework.js'),
        dest: resolve('packages/weex-vue-framework/index.js'),
        format: 'cjs'
      },
      // Weex compiler (CommonJS). Used by Weex's Webpack loader.
      'weex-compiler': {
        weex: true,
        entry: resolve('weex/entry-compiler.js'),
        dest: resolve('packages/weex-template-compiler/build.js'),
        format: 'cjs',
        external: Object.keys(require('../packages/weex-template-compiler/package.json').dependencies)
      }
    }
    ...
    

    我们挑两个文件来分析一下,vue.jsvue.runtime.js

    vue.runtime.js

    找到 vue.runtime.js 的脚本配置:

     // runtime-only build (Browser)
     // 运行时代码
      'web-runtime-dev': {
        entry: resolve('web/entry-runtime.js'),
        dest: resolve('dist/vue.runtime.js'),
        format: 'umd',
        env: 'development',
        banner
      },
    

    找到 vue.runtime.js 的入口文件 /web/entry-runtime.js

    /* @flow */
    
    import Vue from './runtime/index'
    
    export default Vue
    
    

    很简单,就直接导出了 Vue

    vue.js

    找到 vue.js 的脚本配置:

     // Runtime+compiler development build (Browser)
    	// 运行时代码 + 编译时代码
      'web-full-dev': {
        entry: resolve('web/entry-runtime-with-compiler.js'),
        dest: resolve('dist/vue.js'),
        format: 'umd',
        env: 'development',
        alias: { he: './entity-decoder' },
        banner
      },
    

    找到 vue.js 的入口文件 web/entry-runtime-with-compiler.js

    /* @flow */
    
    import config from 'core/config'
    import { warn, cached } from 'core/util/index'
    import { mark, measure } from 'core/util/perf'
    
    import Vue from './runtime/index'
    import { query } from './util/index'
    import { compileToFunctions } from './compiler/index'
    import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'
    
    const idToTemplate = cached(id => {
      const el = query(id)
      return el && el.innerHTML
    })
    
    const mount = Vue.prototype.$mount
    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      el = el && query(el)
    
      /* istanbul ignore if */
      if (el === document.body || el === document.documentElement) {
        process.env.NODE_ENV !== 'production' && warn(
          `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
        )
        return this
      }
    
      const options = this.$options
      // resolve template/el and convert to render function
      if (!options.render) {
        let template = options.template
        if (template) {
          if (typeof template === 'string') {
            if (template.charAt(0) === '#') {
              template = idToTemplate(template)
              /* istanbul ignore if */
              if (process.env.NODE_ENV !== 'production' && !template) {
                warn(
                  `Template element not found or is empty: ${options.template}`,
                  this
                )
              }
            }
          } else if (template.nodeType) {
            template = template.innerHTML
          } else {
            if (process.env.NODE_ENV !== 'production') {
              warn('invalid template option:' + template, this)
            }
            return this
          }
        } else if (el) {
          template = getOuterHTML(el)
        }
        if (template) {
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
            mark('compile')
          }
    
          const { render, staticRenderFns } = compileToFunctions(template, {
            outputSourceRange: process.env.NODE_ENV !== 'production',
            shouldDecodeNewlines,
            shouldDecodeNewlinesForHref,
            delimiters: options.delimiters,
            comments: options.comments
          }, this)
          options.render = render
          options.staticRenderFns = staticRenderFns
    
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
            mark('compile end')
            measure(`vue ${this._name} compile`, 'compile', 'compile end')
          }
        }
      }
      return mount.call(this, el, hydrating)
    }
    
    /**
     * Get outerHTML of elements, taking care
     * of SVG elements in IE as well.
     */
    function getOuterHTML (el: Element): string {
      if (el.outerHTML) {
        return el.outerHTML
      } else {
        const container = document.createElement('div')
        container.appendChild(el.cloneNode(true))
        return container.innerHTML
      }
    }
    
    Vue.compile = compileToFunctions
    
    export default Vue
    

    可以看到,相比 entry-runtime.jsentry-runtime-with-compiler.js 重写了 Vue 的$mount 方法,在 $mount 方法里面利用了 compileToFunctions 方法把 template 编译成了 render 函数,更多 Vue 源码的解析可以参考我之前的几篇 Vue 源码的文章:

    其它几个源码文件大家可以按照一样的方式去分析,我就不一一解析了。

    总结

    如果你需要用到 vue 的 compiler 功能,你就需要用带 compiler 功能的 vue 源码,如果你不需要的话,只需要导入 runtime 版本的 vue 源码即可,因为带 compiler 功能的 vue 源码比runtime 版本的 vue 源码多了模版编译的功能,会使项目的 size 更大一些。

    展开全文
  • Vue.js API

    2019-04-19 16:53:35
    一套构建用户界面的渐进式框架vue的帮组文档以及vue.js/vue.min.js的相关文件
  • vue.js 2.0离线手册.chm
  • vue.js从入门到应用.zip

    2022-05-16 12:53:08
    vue.js从入门到应用 vue.js从入门到应用 vue.js从入门到应用 vue.js从入门到应用 vue.js从入门到应用 vue.js从入门到应用 vue.js从入门到应用 ...
  • 当我们安装谷歌浏览器vue插件时,会出现没有检测到情况...3、文件中引入的 vue 文件 ,文件名必须为 ‘ vue.js ’ , 不能为其他 4、引入的 vue 文件必须是开发版本的文件,不能是生产版本 , 这是官网下载地址:安...

    当我们安装谷歌浏览器vue插件时,会出现没有检测到情况,右上角图标显示灰色

    我们点击右上角 扩展程序,点击下图所示图标

    出现

     

    点击详情,将允许访问文件网址打开按钮就行。

    请注意以下几点:

    1、检查你的开发者工具选项是否已经打开

     

    2、是否打开了插件的开关

     

    3、文件中引入的  vue  文件 ,文件名 必须 为   ‘  vue.js  ’ , 不能为其他

    4、引入的 vue 文件 必须 是开发版本的文件,不能是生产版本 , 这是官网下载地址:  安装 — Vue.js 中文文档

     

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,079,740
精华内容 431,896
关键字:

Vue.js