Vue.js

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.js项目实战,vue.js项目实战pdf下载,JavaScript
2021-09-10 15:08:48

vue实战开发.快速上手.好不容易找到电子版.非PDF版

收起
Vue.js v3.0 教程（Vue3 教程-vue.js从入门到精通）.pdf
2020-11-20 16:37:43

Vue.js v3.0 教程，Vue3 教程,vue.js从入门到精通，vue.js3.0教程，零基础学习vue.js，Vue.js是一个专注于视图模型(ViewModal)的框架,轻巧、高性能、可组件化的MVVM库

收起
vue.js 2.0中文离线手册（CHM版）
2022-04-21 15:19:29

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有...

收起
vue.js和vue.min.js
2018-07-17 15:10:10

vue.js和vue.min.jsvue.js和vue.min.jsvue.js和vue.js和vue.min.jsvue.js和vue.min.js和vue.min.jsvue.js和vue.min.j s

收起
Pro Vue.js 2(pdf英文原版-2018版)
2018-09-13 09:06:17

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源码全方位深入解析
2019-01-28 23:18:10

Vue.js源码全方位深入解析。面试和深入学习必备。⽬前社区有很多 Vue.js 的源码解析⽂章，但是质量层次不⻬，不够系统和全⾯，这本电⼦书的⽬标是全⽅位细致深度解析 Vue.js 的实现原理，让同学们可以彻底掌握 ...

收起
vue-snip:Vue.js指令，如果文本元素的内容超过指定的行数，则将其内容夹紧
2021-05-01 10:55:27

支持Vue.js 2和Vue.js 3。主要特征：每种元素都选择了两种剪裁方法（CSS / JavaScript）无需指定线高重新截取元素大小和React性数据更改没有依赖关系（小而快速）要获得动手经验，请尝试“ 。安装 # ...

收起
超全面的vue.js使用总结
2020-10-20 11:18:09

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面这篇文章主要给大家介绍了...

收起
idea插件 vue.js IDEA2017.3亲测可装无兼容问题
2018-05-10 12:29:20

idea插件 vue.js IDEA2017.3亲测可装无兼容问题 Setting>plugins>install plugin from disk 选择文件安装完重启即可

收起
Vue.js 2.x的Highlight.js语法高亮显示-JavaScript开发
2021-05-26 01:16:25

快速入门安装只需安装npm软件包vue-highlightjs：npm install --save vue-highlightjs使用vue-highlightjs在主JavaScript文件（例如main.js）中：//导入Vue和vue-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

收起
VuePack-包含HTML Intellisense和Vue.js JavaScript库的代码段。-Vue.js开发
2021-05-27 22:25:29

包含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插件　亲测可用　

收起

idea 插件
ocr-electron-vue：基于Electron，Vue.js和Tesseract.js构建的简单OCR应用程序
2021-02-04 05:06:31

一个基于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-实现下划线的简单vue插件-Vue.js开发
2021-05-27 23:05:24

vue-underscore，您知道Underscore.js是JavaScript的实用程序带库，它为常见的功能嫌疑人提供支持（每个，地图，红色vue-underscore。您知道Underscore.js是JavaScript的实用程序带库，为以下功能提供支持：目录功能...

收起
vue-rawmodel-Vue.js v2的RawModel.js插件。表单验证从未如此简单。-Vue.js开发
2021-05-27 22:20:18

RawModel.js是一个简单的框架，提供了支持验证和错误处理的强类型JavaScript对象。它具有丰富的API，可大大简化服务器端和客户端的数据验证和操作。因为它是一个不受限制的框架，所以可以完美地与流行的模块（例如...

收起
vue-inputmask-Vue.js指令，将Robin Herbots的inputmask库添加到您的输入中（香草javascript）。-Vue.js...
2021-05-27 22:10:11

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切换。

收起
vue-gtag-Vue的全球站点标签插件-Vue.js开发
2021-05-27 21:28:56

Vue的vue-gtag全局站点标签插件全局站点标签（gtag.js）是一个JavaScript标记框架和API，允许您将事件数据发送到Vue的vue-gtag全局站点标签插件。Vue全局站点标签（gtag.js））是一个JavaScript标记框架和API，可让...

收起
基于Vue.js的冒泡排序模拟动画
2019-08-23 17:16:39

vue.js是一款轻量级的渐进式JavaScript框架，之前我们也分享过一些基于vue.js的应用，例如这款基于Vue.js的Tooltip用户通知弹出框和基于Vue.js的超实用科学型计算器。这次给大家带来了一款基于Vue.js的有趣动画，它...

收起

jQuery相册插件
vue-highlightjs:Vue.js 2.x的Highlight.js语法高亮显示
2021-05-03 10:36:24

vue-highlightjs 使用可以轻松实现语法突出。快速开始安装只需安装： npm install --save vue-...// Tell Vue.js to use vue-highlightjs Vue . use ( VueHighlightJS ) 在您的模板中，为了突出显示javascript代

收起

Vue 各个资源包之间的区别（vue.common.dev.js、vue.runtime.esm.js 等等）

千次阅读 2020-11-09 21:22:36

[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 中声明两个脚本 build 跟 dev：

{
  "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

在这里插入图片描述

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

修改 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 文件，效果我就不演示了哈，小伙伴自己运行看效果。

引入 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 文件：

UMD CommonJS ES Module
Full vue.js vue.common.js vue.esm.js
Runtime-only vue.runtime.js vue.runtime.common.js > > vue.runtime.esm.js
Full (production) vue.min.js
Runtime-only (production) vue.runtime.min.js

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	> > vue.runtime.esm.js
Full (production)	vue.min.js
Runtime-only (production)	vue.runtime.min.js

其实我们发现，虽然源码文件很多，但是区别好像就是一个加了 compiler ，一个没加 compiler，比如：vue.js 跟 vue.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.js 跟 vue.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 的脚本配置：

 // 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.js，entry-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（已过时，新版请访问官网查看）
热门讨论 2016-11-16 17:03:32

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从入门到应用 ...

收起
Chrome浏览器安装Vue.js插件是显示Vue.js is not detected怎么解决
千次阅读 2022-02-06 21:24:51

当我们安装谷歌浏览器vue插件时，会出现没有检测到情况...3、文件中引入的 vue 文件，文件名必须为 ‘ vue.js ’ ，不能为其他 4、引入的 vue 文件必须是开发版本的文件，不能是生产版本，这是官网下载地址：安...

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

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

出现

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

请注意以下几点：

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

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

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

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

收起

展开全文

chrome

1.1 Vue.js 概述

1.1.1 Vue.js 是什么

1.1.2 Vue.js的特性

2.1 Vue.js的安装

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

2.1.2 使用CDN方法

2.1.3 使用NPM方法

3.1 前端框架开发工具

vue.js项目实战,vue.js项目实战pdf下载,JavaScript

Vue.js v3.0 教程（Vue3 教程-vue.js从入门到精通）.pdf

vue.js 2.0中文离线手册（CHM版）

vue.js和vue.min.js

Pro Vue.js 2(pdf英文原版-2018版)

Vue.js源码全方位深入解析

vue-snip:Vue.js指令，如果文本元素的内容超过指定的行数，则将其内容夹紧

超全面的vue.js使用总结

idea插件 vue.js IDEA2017.3亲测可装 无兼容问题

Vue.js 2.x的Highlight.js语法高亮显示-JavaScript开发

vue.js 源代码最新版

Getting to Know Vue.js

VuePack-包含HTML Intellisense和Vue.js JavaScript库的代码段。-Vue.js开发

idea vue.js插件

ocr-electron-vue：基于Electron，Vue.js和Tesseract.js构建的简单OCR应用程序

vue.min.js下载

vue.js 2.0下载

vue-underscore-实现下划线的简单vue插件-Vue.js开发

vue-rawmodel-Vue.js v2的RawModel.js插件。 表单验证从未如此简单。-Vue.js开发

vue-inputmask-Vue.js指令，将Robin Herbots的inputmask库添加到您的输入中（香草javascript）。-Vue.js...

vue.js学习经典实例（本人总结）

vue-gtag-Vue的全球站点标签插件-Vue.js开发

基于Vue.js的冒泡排序模拟动画

vue-highlightjs:Vue.js 2.x的Highlight.js语法高亮显示

Vue 各个资源包之间的区别（vue.common.dev.js、vue.runtime.esm.js 等等）

问题描述

问题原因

解决方案

vue-cli 脚手架创建的项目

普通 Webpack 项目

Rollup 项目

浏览器

开始

安装 webpack

安装 webpack-cli

安装 webpack-dev-server

安装 webpack-chain

创建 webpack 配置

入口与出口

安装 vue

安装 vue-loader

安装 vue-template-compiler

安装 html-webpack-plugin

测试

分析

vue.runtime.js

vue.js

总结

Vue.js API

vue.js 2.0离线手册.chm（已过时，新版请访问官网查看）

vue.js从入门到应用.zip

Chrome浏览器安装Vue.js插件是显示Vue.js is not detected怎么解决

Vue.js

idea插件 vue.js IDEA2017.3亲测可装无兼容问题

vue-rawmodel-Vue.js v2的RawModel.js插件。表单验证从未如此简单。-Vue.js开发