精华内容
下载资源
问答
  • .vue文件
    千次阅读
    2021-09-20 13:12:26

    .vue文件就是一个(或局部)组件,又或者说是一个对象在导出时。 在Vue.createApp({ app }) app是一个.vue文件,里面包括 三个部分template 和 js css,。然后再对比下面图片,是不是很像,下面一个注册一个组件需要 template js,所以说,.vue文件就是一个组件,或者一个对象。

     这里引用一个 vue官方的全局组件实例来说明。    

    // 创建一个Vue 应用
    const app = Vue.createApp({})
    
    // 定义一个名为 button-counter 的新全局组件
    app.component('button-counter', {
      data() {
        return {
          count: 0
        }
      },
      template: `
        <button @click="count++">
          You clicked me {{ count }} times.
        </button>`
    })
    更多相关内容
  • .vue文件的编译

    千次阅读 2022-02-09 22:11:17
    本文章我们来分析一下在vue2当中是如何编译.vue文件 (本文仅简单的框架的分析具体深入原理可查看参考文献) 探究 我们先尝试引入.vue文件,然后输出看看输出的内容 代码如下: main.js文件 import App from './App....

    前言

    本文章我们来分析一下在vue2当中是如何编译.vue文件
    (本文仅简单的框架的分析具体深入原理可查看参考文献)

    探究

    我们先尝试引入.vue文件,然后输出看看输出的内容

    代码如下:
    main.js文件

    import App from './App.vue'
    console.log(App)
    

    输出的结果为
    在这里插入图片描述
    App.vue文件

    <template>
      <div id="app1">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      },
      created() {
        console.log('App组件的create')
      },
    }
    </script>
     
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    你会发现.vue只是暴露的name、components、created属性,但是控制台输出却多出了beforeDestroy、beforeCreate、render、staticRenderFns、__file、_compiled等属性

    探其究竟,原来是vue-loader的在作怪。
    Vue-loader 是一个 webpack 的 loader,他的作用就是在编译阶段对.vue文件进行解析。

    一般地vue-loader都是vue-template-compiler这个loader搭配使用的,这是一个模板编译的loader。

    下面我们来看看vue-loader的配置是如何的

    // webpack.config.js
    const { VueLoaderPlugin } = require('vue-loader')
    
    module.exports = {
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          // 它会应用到普通的 `.js` 文件
          // 以及 `.vue` 文件中的 `<script>` 块
          {
            test: /\.js$/,
            loader: 'babel-loader'
          },
          // 它会应用到普通的 `.css` 文件
          // 以及 `.vue` 文件中的 `<style>` 块
          {
            test: /\.css$/,
            use: [
              'vue-style-loader',
              'css-loader'
            ]
          },
          // 普通的 `.scss` 文件和 `*.vue` 文件中的
          // `<style lang="scss">` 块都应用它
          {
            test: /\.scss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ]
          }
        ]
      },
      plugins: [
        // 请确保引入这个插件来施展魔法
        new VueLoaderPlugin()
      ]
    }
    

    当我们在运行的时候,VueLoaderPlugin插件首先会对webpack中的rules进行重新配置拓展(原本的配置不会改变只是多了另外的一些loader)
    所以经过插件拓展后的rules可以如下(注意这并不是上方rules拓展后的结果我只是举个例子):

    module.exports = {
      module: {
        rules: [
          {
            loader: "/node_modules/vue-loader/lib/loaders/pitcher.js",
            resourceQuery: () => {},
            options: {},
          },
          {
            resource: () => {},
            resourceQuery: () => {},
            use: [
              {
                loader: "/node_modules/mini-css-extract-plugin/dist/loader.js",
              },
              { loader: "css-loader" },
            ],
          },
          {
            resource: () => {},
            resourceQuery: () => {},
            exclude: /node_modules/,
            use: [
              {
                loader: "babel-loader",
                options: {
                  presets: [["@babel/preset-env", { targets: "defaults" }]],
                },
                ident: "clonedRuleSet-2[0].rules[0].use",
              },
            ],
          },
          {
            test: /.vue$/i,
            use: [
              { loader: "vue-loader", options: {}, ident: "vue-loader-options" },
            ],
          },
          {
            test: /.css$/i,
            use: [
              {
                loader: "/node_modules/mini-css-extract-plugin/dist/loader.js",
              },
              { loader: "css-loader" },
            ],
          },
          {
            test: /.vue$/i,
            exclude: /node_modules/,
            use: [
              {
                loader: "babel-loader",
                options: {
                  presets: [["@babel/preset-env", { targets: "defaults" }]],
                },
                ident: "clonedRuleSet-2[0].rules[0].use",
              },
            ],
          },
        ],
      },
    };
    

    在转换拓展之后此时webpack正式开始打包,一旦遇到.vue后缀的文件就会命中webpack中的/.vue$/i规则,此时利用vue-loader对.vue文件进行解析,解析的过程就是对.vue文件的代码进行重新‘书写’,解析的过程是一个复杂的过程,我们只需知道这是一个重写的操作
    例如

    <template>
      <div class="root">hello world</div>
    </template>
    
    <script>
    export default {
      data() {},
      mounted() {
        console.log("hello world");
      },
    };
    </script>
    
    <style scoped>
    .root {
      font-size: 12px;
    }
    </style>
    

    利用vue-loader解析以后的其中一个中间结果为(因为可能还会进一步解析)

    import { render, staticRenderFns } from "./index.vue?vue&type=template&id=2964abc9&scoped=true&"
    import script from "./index.vue?vue&type=script&lang=js&"
    export * from "./index.vue?vue&type=script&lang=js&"
    import style0 from "./index.vue?vue&type=style&index=0&id=2964abc9&scoped=true&lang=css&"
    
    
    /* normalize component */
    import normalizer from "!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
    var component = normalizer(
      script,
      render,
      staticRenderFns,
      false,
      null,
      "2964abc9",
      null
      
    )
    
    ...
    export default component.exports
    

    可以看到在重写以后最终我们在main.js引入的.vue文件暴露的并不是简单的name、components、created这三个属性。

    ...
    <script>
    ...
    export default {
      name: 'App',
      components: {
        HelloWorld
      },
      created() {
        console.log('App组件的create')
      },
    }
    </script>
    ...
    

    而对于添加的几个引入,其实是引用自己,当webpack进入该文件以后发现又有引用,那么webpack就会沿着这些引用继续打包解析(值得注意的是这些引用匹配到的webpack规则就是上面我们的VueLoaderPlugin插件拓展出来的新rule以及原本久的rules,所以VueLoaderPlugin插件拓展rules的作用就是这里)。

    故这些引用的作用是进一步重写,重写以后引用也是会发生变化的

    import { render, staticRenderFns } from "./index.vue?vue&type=template&id=2964abc9&scoped=true&"
    import script from "./index.vue?vue&type=script&lang=js&"
    export * from "./index.vue?vue&type=script&lang=js&"
    import style0 from "./index.vue?vue&type=style&index=0&id=2964abc9&scoped=true&lang=css&"
    
    

    在重写阶段实际上每一个对自己的引用都是一个模块的解析过程
    例如

    Script:"./index.vue?vue&type=script&lang=js&"
    Template: "./index.vue?vue&type=template&id=2964abc9&scoped=true&"
    Style: "./index.vue?vue&type=style&index=0&id=2964abc9&scoped=true&lang=css&"
    

    每当webpack遇到特定的引用路径的时候,就会知道此时需要打包的模块是哪个,如果是<template>...</template>模块那么就在文件中提取出来打包在利用对应的loader解析(例如<style>模块的代码可用css-loader解析),<script>...</script><style lang="scss">...</style>同样是这个道理。

    值得注意的是最终template 中的内容会通过 vue compiler 转换为 render 函数后合并到 script “模块”中。
    scoped style 会经过 vue-loader/style-post-loader 的处理,成为只匹配特定元素的私有样式。

    所以经过一系列的重写解析.vue文件里面的<template>...</template><style lang="scss">...</style>模块会被统一整合成render函数,最后暴露,其他属性也是差不多原理,感兴趣的可以继续深入了解其他文章。

    总结

    总的来说就是:
    vue-loader 会把.vue文件中的内容拆分为 template,script,style 三个“虚拟模块”,然后分别匹配 webpack 配置中对应的 rules,比如 script 模块会匹配所有跟处理 JavaScript 或 TypeScript 相关的 loader。

    所以这里其实就是利用了webpack中如下的特性:

    1. 可以在插件中动态修改webpack的配置信息
    2. Loader 并不一定都要实实在在的处理文件的内容,也可以是返回一些更具体,更有指向性的新路径,以复用webpack的其他模块

    通过上面的特性,vue自定义的对.vue文件进行解析,达到了组件化的开发模式(css和js和html同时写在一个文件上)

    参考文献

    参考文献1
    https://vue-loader.vuejs.org/zh/#vue-loader-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F
    参考文献2
    https://vue-loader-v14.vuejs.org/zh-cn/
    参考文献3
    https://zhuanlan.zhihu.com/p/355401219
    参考文献4
    https://q.shanyue.tech/fe/vue/92.html
    参考文献5
    https://blog.csdn.net/qq_36380426/article/details/104438390

    展开全文
  • .vue文件引入.html文件

    千次阅读 2021-05-13 22:50:04
    html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问...

    html页面引入vue组件需要在页面引入http-vue-loader.js

    注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html‘

    1.创建my-component.vue

    <template>
        <div class="hello">Hello {{who}}</div>
    </template>
     
    <script>
    module.exports = {
        data: function() {
            return {
                who: 'world'
            }
        }
    }
    </script>
     
    <style>
    .hello {
        background-color: #ffe;
    }
    </style>

    2.创建index.html

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 先引入 Vue -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- 引入 http-vue-loader -->
        <script src="https://unpkg.com/http-vue-loader"></script>
    </head>
    
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
    </body>
    
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        // 使用httpVueLoader
        Vue.use(httpVueLoader);
        new Vue({
            el: '#app',
            data: function () {
                return { visible: false }
            },
            components: {
                // 将组建加入组建库
                'my-component': 'url:./component/my-component.vue'
            }
        })
    </script>
    
    </html>

    注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html

    展开全文
  • 如何运行单个.vue文件

    千次阅读 2021-11-24 20:45:42
    1、全局安装vue cnpm install -g @vue/...4、在 .vue 文件所在的目录下运行 vue serve About.vue 发现报错,提示错误信息如下: 5、使用全局命令安装@vue/compiler-sfc cnpm install -g @vue/compiler-sfc 接着运行v

    1、全局安装vue

    cnpm install -g @vue/cli
    

    2、查看vue版本

    vue -V       //version--4.5.15
    

    3、全局安装下面的扩展

    cnpm install -g @vue/cli-service-global
    

    4、在 .vue 文件所在的目录下运行

    vue serve About.vue
    

    发现报错,提示错误信息如下:
    在这里插入图片描述
    5、使用全局命令安装@vue/compiler-sfc

    cnpm install -g @vue/compiler-sfc
    

    接着运行vue serve …vue ,发现仍然报错,错误信息如下:
    在这里插入图片描述
    6、执行命令cnpm install --save vue,安装依赖,再次运行vue serve …vue,终于成功
    在这里插入图片描述

    展开全文
  • Vue.js教程-Vue项目的目录结构和.vue文件的构成

    千次阅读 多人点赞 2020-07-28 00:59:54
    Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...
  • html文件引用.vue 文件的方式

    千次阅读 2021-12-17 14:56:01
    1.html文件 先引入vue.js 再引入httpVueLoader.js 注册httpVueLoader。 在script中Vue.use(httpVueLoader); 在components中注册组件,httpVueLoader的注册方式有好几种,具体引用方式看个人习惯,更多的可以去...
  • Vue中的.vue文件的使用

    千次阅读 2020-02-13 13:54:37
    需要安装vue-loader npm i vue-loader vue-template-complier -D 然后在配置文件中新增匹配规则 ...1. 定义.vue文件 <template> <!--这里定义html模板--> </template> <script> //这里定义...
  • 初识 Vue.js 中的 *.Vue文件

    万次阅读 多人点赞 2018-05-23 00:23:49
    什么是Vue.js?vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计。(自底向上设计方法是根据系统功能要求,从具体的器件、逻辑...另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,V...
  • 1 在vue文件中 queryTage为vue文件中的函数方法 通过挂载在window上实现 mounted() { window.queryTage=this.queryTage; }, 2 在js文件如何调用 window.queryTage()
  • .vue 文件中的注释

    千次阅读 2020-11-03 09:18:50
    文件最顶部注释的时候用HTML的注释语法:<!— 在这里写注释的内容 --> 。 一、<template> 标签中的注释 <!-- 注释,单行或多行 --> 二、 <style> 标签中的注释 /* 多行注释 */ ...
  • vue(3)调整 App.vue 文件和router路由

    万次阅读 2018-03-04 21:11:29
    调整 App.vue 文件我们先把默认项目里面没用的东西先删除掉,把代码调整为下面的样子。&lt;template&gt; &lt;div id="app"&gt; &lt;router-view&gt;&lt;/router-view&...
  • IDEA无法识别.vue文件

    千次阅读 2021-07-21 17:57:59
    记录一下使用IDEA导入springboot项目后,无法识别.vue文件。所有.vue文件都是灰色……在网上找到了很多资料,且试了多种方式,最终搞定了。请看下面内容: 解决方法: 先下载vue插件,然后打开IDEA–>setting–&...
  • **** VS code 写VUE时遇到.js,.vue文件部分代码变白的解决方案**** 本来注册csdn就只是为了学习,没打算发表任何文章,毕竟我也是个渣渣,但是我今天遇到了一些问题,查阅了好多都没有找到如何解决,最后终于解决了...
  • 我的IDEA安装Vue插件后,按道理来说,新建一个.vue文件,文件前面应该会有一个"V"一样的图标,然而事实并不是。 百度了一圈,大部分人都是说这样的: 试了一下,并没用。于是乎,我找到了正确答案来帮刚入门Vue...
  • vscode中.vue文件代码是白色的?

    万次阅读 多人点赞 2019-12-17 13:14:18
    点击vscode编辑器中的“方框样式图标”安装vetur插件,就可完美解决
  • vscode里突然.vue文件代码没有高亮

    千次阅读 2021-09-07 10:33:10
    以为是按错键,原来是vue插件被我禁用了。 误区:以为安装了Prettier-Standard - JavaScript formatter就不用启用vue插件了。...两个插件都启用后编辑器就可以识别到.vue文件了。代码不高亮也就解决了。 ...
  • Vscode创建.vue文件快捷生成代码块

    千次阅读 2020-03-09 14:24:40
    打开VsCode,找到扩展插件搜索框,搜索Vetur 和 ... 使用快捷键Ctrl+Shift+P或者File-Preferences-User Snippets搜索vue.json 将vue.json替换为以下内容 { "vue": { "prefix": "vue", "body": [ "...
  • Vue3.0之.vue文件出现红色波浪线

    千次阅读 2021-08-25 16:11:44
    在我们使用Vue3.0构建项目之后我们会发现.vue文件中出现了红色波浪线的检测提示问题。 这里是因为我们用的Vetur插件的template模板检测没有对Vue3.0做兼容,所以需要我们手动去关掉template模板检测。 找到VSCode...
  • 在html文件中引用vue.js和直接创建.vue文件有什么差别??
  • 第一步:先安装vue插件: ...紧接着左上方输入“vue”,点击搜索结果里的vue.js,右边会有绿色install按钮,安装成功后重启idea,这样idea就能识别.vue文件了。 第二步:设置vue新建文件模板。 file-...
  • vue文件中index.vue的使用方法

    千次阅读 2021-05-17 11:51:19
    page> <edit-page v-if="pageName === 'editPage'"></edit-page> </div> </template> <script> //引入页面文件 import homePage from './home' import addPage from './add' import infoPage from './info' import ...
  • 在ts文件中引入后缀为vue文件,给出下列报错提示,看着属实很烦, 之前在官方文档中是需要把下面这行代码写到shims-vue.d.ts文件中,但是目前在本项目中还是会出现上述的报错提示。 解决办法: shims-vue.d.ts中...
  • 11.解析.vue文件

    万次阅读 2018-02-06 01:09:01
    还记得前9章我们说过,可以把template写在外面的那一部分知识么?...但解析这种.vue结尾的文件也不是一份轻松的工作,你需要安装以下这些插件到你的项目中,它们分别是 : (把es6语法转换成es5,
  • vscode中.vue文件自动补全

    千次阅读 2020-09-20 20:20:30
    1、在拓展商店中搜索:HTML Snippets,安装 2、在设置中增加如下配置: "files.associations": { "*.art": "html",//可以根据需要自行添加 ... } 3、打开一个.vue文件试一试 如下图,看到代码的自动提示 ...
  • vscode打开.vue文件出现红色波浪线

    千次阅读 2019-05-12 22:54:07
    具体报错如图: 解决方法: 1,首先检查html片段没有语法错误的话,就是一个检查... 2,解决方法是:vscode -> 首选项 ->... 搜索 (vetur),将vetur.validation.template 设置为 false 就可以解决问题了。......
  • .vue文件如何跳转页面?

    千次阅读 2021-06-11 14:46:31
    .vue文件如何跳转页面?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vue在使用的过程中, .vue文件之间的跳转,常常通过 实现。 组件用于设置一个导航链接,切换...
  • 背景:在.vue后缀名的文件,和.js后缀名的文件里,使用全局变量的语法是不一样的。 .vue模板文件可以直接访问挂载在Vue实例上的全局对象,而普通的.js文件访问不到。 1、 定义全局变量 const ssoServer = ...
  • .vue文件使用script引入外部js文件

    千次阅读 2020-01-08 15:27:13
    created() { let arr = ['//y.gtimg.cn/music/h5/player/player.js?max_age=2592000', '//static9.pplive.cn/cloud_platform/ppKit/release/js/player/v5/v_20180426102601/player.min.js', '//g.a...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 393,934
精华内容 157,573
关键字:

.vue文件

友情链接: Activiti用户指南.zip