精华内容
下载资源
问答
  • 在线编译vue文件
    千次阅读
    2022-02-09 22:11:17

    前言

    本文章我们来分析一下在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文件编译成.js文件的工具
  • 本文通过三种方式给大家介绍了vue 查看dist文件里的结构,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 当一个较复杂的vue项目打包后,文件会非常大,而且访问时资源加载速度很慢,本文介绍了几种措施来优化。
  • 该工具将在变换每个块.vue文件,以他们的标准conterparts像sass - > css使您的用户不必安装额外的库进行编译。安装yarn global add vue-compile# ornpm i -g vue-compile用法# normalize a .vue filevue-compile ...
  • 用于编译Vue单个文件组件的高级实用程序 该软件包包含高级实用程序,如果您正在为将Vue单个文件组件编译为JavaScript的捆绑器或模块系统编写插件/转换,则可以使用这些实用程序。 在版本3及更高版本中使用。 API的...
  • 下面小编就为大家分享一篇vue编译打包本地查看index文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一个用于编译和捆绑Vue文件组件的构建工具-Brendan McCabe vno的徽标设计第一个在Deno运行时环境中用于打包和捆绑Vue组件的构建工具特点Parser编译器Bundler Adapter Server Side Renderer(即将推出)概述Vue是一...
  • 主要介绍了vue.js编译时给生成的文件增加版本号,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 引子:vue的.vue文件是怎么跑起来的?  答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1、vue-loader做了什么? vue-loader是一个webpack加载器,这是vue组件的格式: ... [removed] ... ...
  • 由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译vue-cli 2.0的作法是在static文件下创建js。vue-cli 3.0 的写法则是直接在public文件夹下创建js、 具体操作如下: 1...
  • Jenkins编译Vue前端项目

    2021-11-19 16:01:03
    Jenkins编译Vue前端项目 1.安装NodeJs插件 在可选插件中搜索NodeJs,点击立即安装 点击工具管理 配置NodeJs工具 新建一个任务 配置git仓库 构建环境的配置 构建时选择Execute shell,接下来保存好了就可以...

    Jenkins编译Vue前端项目

    1.安装NodeJs插件
    在这里插入图片描述
    在可选插件中搜索NodeJs,点击立即安装
    在这里插入图片描述
    点击工具管理
    在这里插入图片描述
    配置NodeJs工具
    在这里插入图片描述
    新建一个任务
    在这里插入图片描述
    配置git仓库
    在这里插入图片描述
    构建环境的配置
    在这里插入图片描述
    构建时选择Execute shell,接下来保存好了就可以构建了
    在这里插入图片描述

    展开全文
  • Vue 反编译问题 ,如何将Vue打包好的.js.map 文件反编译成 .Vue文件
  • vue在线组件交互/vue3在线代码编译

    千次阅读 2022-03-10 10:35:04
    vue在线组件交互/vue3在线代码编译

    最近在研究如何在浏览器上实现代码在线编译(就类似于地图那种,左边写代码,右边实时运行),然后就发现官方也在用@vue/repl的依赖,于是我也去研究了下,目前是大概搞出了一部分,我就分享出来,咱不遮遮掩掩,全部分享!

    1、repl 是啥?

    这其实你百度都可以知道,分别是 读取-求值-输出-循环Read-Eval-Print-Loop),实现在线代码编译。

    2、vue中官方的repl是如何做的?

    vue2中有现成的在线代码编译,我没具体去用过,有用vue2的可以去试试:vue-code-view

    我着重讲一下vue3的在线代码编译,vue3就是将 他内核中浏览器编译模块的源码拿过来用,你可以看到不管是vue官方的repl库还是其他的,都要引用 vue的vue.esm-browser.js的cdn,其实就是实现内核编译的主要模块,下面我展示repl的代码和例图

    2.1、官方repl源码demo

    你直接在你自己项目里引用@vue/repl 依赖其实也是可以的, 我在官方基础上稍微改了下,代码如下,h 就是jsx语法,这我就不细讲了,不了解jsx其实也没关系,你常规写法也行,ReplStore类实际就是总的编译预览组件的类, 里面的defaultVueRuntimeURL其实就是调用浏览器编译内核cdn的属性,sfcOptions就是相关编译规则配置,包括script,style, template,这是不是和我们vue模板三个一模一样。

    import { createApp, h, version } from 'vue'
    import { Repl, ReplStore } from '@vue/repl'
    
    const App = {
      setup() {
        const store = new ReplStore({
          defaultVueRuntimeURL: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
        })
    
        const sfcOptions = {
          script: {
            reactivityTransform: true
          }
        }
        return () =>
           {
            const file = `<script setup>
            import { ref } from 'vue'
            
            const msg = ref('hello world!')
            </script>
            
            <template>
              <h1>{{ msg }}</h1>
              <input v-model="msg">
            </template>`
            store.setFiles({
              'App.vue': file
            })
    
            return h(Repl, {
              store:store,
              showCompileOutput:true,
              autoResize:true,
              sfcOptions:sfcOptions,
              clearConsole:false
            })
          }
      }
    }
    
    createApp(App).mount('#app')
    

    2.2、ReplStore类方法源码解析

    其实这类由尤大大写的,但是你自己去看看源码,就会觉得其实没有想象中的那么优美,我这里就不说缺点了,我来解析几个常用方法:

    ①、addFile

    单个添加文件到编译模块中,最上面例图左边编辑区,不是有个加号吗,就类似这种常规添加,然后就是参数判断,是文件名还是说直接是文件,但是最后都会添加到this.state对象中,这个state就类似于vue2的data,vue3中的setup中return的数据,一般情况下都是直接将你添加的文件作为当前文件

    addFile(fileOrFilename: string | File): void {
        const file =
          typeof fileOrFilename === 'string'
            ? new File(fileOrFilename)
            : fileOrFilename
        this.state.files[file.filename] = file
        if (!file.hidden) this.setActive(file.filename)
      }

    ②、deleteFile

    单个文件删除的,最上面例图左边编辑区,移到文件名那里,不是有个叉吗,就是这种删除,要是当前删除文件正好是你所看到的的文件,那么会将默认未见切换到目前你所看到的地方,默认文件是展示 Hello World!,所以你看到当前你编辑区代码变成Hello World!了,那要么是你ctrl+z一直回退到默认代码了(ps:ctrl + y 为前进快捷键),要么就是你删除完了文件。

    deleteFile(filename: string) {
        if (confirm(`Are you sure you want to delete ${filename}?`)) {
          if (this.state.activeFile.filename === filename) {
            this.state.activeFile = this.state.files[this.state.mainFile]
          }
          delete this.state.files[filename]
        }
      }

    ③、getFiles

    这跟字面意思一样,就是获取你添加在this.state,files下所有的文件

     因为目前我没有setFiles文件,所以为默认的代码,返回包括俩部分,分别是文件名和import-map.json,前者就是内置的默认代码(Hello World),后者是上面说的 defaultVueRuntimeURL参数,不过都是字符格式化过后的了。

    getFiles() {
        const exported: Record<string, string> = {}
        for (const filename in this.state.files) {
          exported[filename] = this.state.files[filename].code
        }
        return exported
      }

    ④、setFiles

    这就是我常用的方法,设置文件,因为我最近做地图文档,只需要添加一个文件就可以了,不需要addFile来连续添加,setFiles就类似于直接覆盖this.state.files的意思, mainFile就是文件名的意思,defaultMainFile是默认文件名App.vue,newFiles就是你所添加的文件,这里我没研究透,目前我就用的代码字符串形式来添加的。

    async setFiles(newFiles: Record<string, string>, mainFile = defaultMainFile) {
        const files: Record<string, File> = {}
        if (mainFile === defaultMainFile && !newFiles[mainFile]) {
          files[mainFile] = new File(mainFile, welcomeCode)
        }
        for (const filename in newFiles) {
          files[filename] = new File(filename, newFiles[filename])
        }
        for (const file in files) {
          await compileFile(this, files[file])
        }
        this.state.mainFile = mainFile
        this.state.files = files
        this.initImportMap()
        this.setActive(mainFile)
      }

    那如何添加呢?就类似于下面,当然文件名你可以任意用自己想要的,不一定用默认的App.vue,

    但是你要是想改成自定义的文件名, 就要像我下面截图这种,保持那俩参数一致(文件名为中英文都可以)。

    const file = `<script setup>
            import { ref } from 'vue'
            
            const msg = ref('你好 林大大哟!')
            </script>
            
            <template>
              <h1>{{ msg }}</h1>
              <input v-model="msg">
            </template>`
            // 官方默认文件名
            store.setFiles({
              'App.vue': file
            })
            // 自定义文件名
            store.setFiles({
              '林大大哟.vue': file
            }, '林大大哟.vue')

    ⑤、setVueVersion

    设置vue内核版本的方法,我们不是调用了vue浏览器在线编译的cdn吗,这个方法就是用来设置我们调用哪个版本内核的。

    async setVueVersion(version: string) {
        const compilerUrl = `https://unpkg.com/@vue/compiler-sfc@${version}/dist/compiler-sfc.esm-browser.js`
        const runtimeUrl = `https://unpkg.com/@vue/runtime-dom@${version}/dist/runtime-dom.esm-browser.js`
        this.pendingCompiler = import(/* @vite-ignore */ compilerUrl)
        this.compiler = await this.pendingCompiler
        this.pendingCompiler = null
        this.state.vueRuntimeURL = runtimeUrl
        const importMap = this.getImportMap()
        ;(importMap.imports || (importMap.imports = {})).vue = runtimeUrl
        this.setImportMap(importMap)
        console.info(`[@vue/repl] Now using Vue version: ${version}`)
      }

    ⑥、resetVueVersion

    使用默认的vue内核版本方法,这默认就是我们在初始化ReplStore类时候传的参数

    resetVueVersion() {
        this.compiler = defaultCompiler
        this.state.vueRuntimeURL = this.defaultVueRuntimeURL
      }

    我上面吧官方主要用的几个方法源码分析了,那我就来说说官方repl源码的缺陷吧!

    2.3、官方repl源码缺陷

    为啥会说是缺陷呢,因为在每次更换文件,都会触发 compileFile 编译文件操作,然后在加密文件名时候(ps:我也不知道为啥要对文件名进行加密),会调用一个 hashId 函数:

    async function hashId(filename: string) {
      const msgUint8 = new TextEncoder().encode(filename) // encode as (utf-8) Uint8Array
      const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8) // hash the message
      const hashArray = Array.from(new Uint8Array(hashBuffer)) // convert buffer to byte array
      const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('') // convert bytes to hex string
      return hashHex.slice(0, 8)
    }
    

    然后重点来了,会使用crypto加密,要是不知道crypto的,也不需要咋了解,他就是种加密方法,然后官方用的是web 标准的 crypto,但这种加密方法,有致命缺点,就是只能运行在安全环境下(localhost、127.0.0.1或者https等),在非安全环境下,crypto的subtle属性就会不存在,这就奠定了官方repl例子只能本机运行,关于这问题,我也在vue官方repl库提出了issue,不过目前还没有得到反馈。

    但是我们大部分个人开发者,想部署到线上,怎么会去使用https呢(ps:有点贵还不值得),所以我对repl进行了部分修改,然后就可以随便部署到http线上环境啦。

    3、部分重写的repl模块

    上面说了,官方不管,但是我们要用啊,所以我做法先是将官方repl源码拿下来,毕竟大部分就是要用官方的呀!然后主要步骤就是重写 transform 文件里的 hashId 函数:

    async function hashId(filename: string) {
        return encodeURIComponent(string).replace(/[!'()*]/g, function(c) {
        return '%' + c.charCodeAt(0).toString(16).toUpperCase();
      });
    }

    其实就是将crypto加密改成普通的加密了,然后这一步拦截就过了,这是最简单的部分修改,当然还有其他修改,我后面有时间再发出来(最近我正在做地图代码在线编辑,类似于高德地图,但相比肯定差远了哈,手动狗头~)

    其他的一些参数添加:

    // main.ts
    window.VUE_DEVTOOLS_CONFIG = {
      defaultSelectedAppId: 'id:repl'
    }

     全局主体颜色配置

    // index.html
    
    window.process = { env: {} }
          const saved = localStorage.getItem('vue-sfc-playground-prefer-dark')
          if (
            saved !== 'false' ||
            window.matchMedia('(prefers-color-scheme: dark)').matches
          ) {
            document.documentElement.classList.add('dark')
          }

    其实目前来看是差不多了,核心就是重写下hashId方法,希望大家都能去实现哦,还是蛮有趣的@vue/repl源码,有不懂的可以在下面评论哦,欢迎交流

    展开全文
  • 安装Vue脚手架,编译.vue文件----教程

    千次阅读 2020-05-04 21:42:40
    安装Vue脚手架----教程前言安装Vue脚手架初识.vue文件编译.vue文件 前言 在之前我们都是通过在.html文件中编写vue的代码,在实际开发中并不会这么做。 正常项目开发中,如果要写样式,就可能不会用css了,你可能会用...

    前言

    在之前我们都是通过在.html文件中编写vue的代码,在实际开发中并不会这么做。

    正常项目开发中,如果要写样式,就可能不会用css了,你可能会用Less、Sass、Stylus(它们三者都是css的预处理技术)中的某一种。

    那几种样式文件写出来浏览器是不认识的,我们需要对其进行编译。这就需要用到前端自动化构建工具,比如说webpack。

    其次,我们在写css3的时候,css3的很多样式都有一个前缀,我们不可能记住每一个样式都加什么样的一个前缀,因此我们就需要依赖于这样的一个工具。

    还有就是javascript,js的代码肯定是要压缩的吧,代码要上线的时候,我们就要把js文件给压缩一下,这个压缩的过程也是需要使用工具的。

    还有就是es6,es6的语法浏览器都认识,谷歌对于es6的支持还是比较好的,但是有个别的es6的语法在浏览器中是不支持的,那这个时候我们就要使用工具了,用工具把它编译,编译成es5,那我们的浏览器不就认识了吗。

    所以说,我们想要写一个真正的项目需要依赖于很多东西。这些工具很多都集成在了webpack。我们使用webpack来搭建项目会省很多麻烦。

    但是在Vue里面,就需要自己去进行配置。

    因为Vue的官方给我们提供了一个脚手架。

    这个脚手架是内置了webpack,它都帮我们配置好了,我们可以拿过来直接用,使用它里面的配置就足够大部分的开发了,如果不够还可以自己手动配置。

    这个脚手架用起来肯定是比用webpack从0到1配置简单方便多了。

    安装Vue脚手架

    首先下载Node.js

    https://nodejs.org/en/

    查看node版本:

    node -v
    

    node-cli要求node版本要大于8.9

    如果之前安装过旧版本脚手架(非3.x),需要先卸载旧版本:

    npm uninstall vue-cli -g
    

    安装脚手架,用于生成项目:

    npm install -g @vue/cli
    

    携带参数-g代表全局安装,否则就是本地安装。

    安装中如果遇到问题,报错信息类似于:

    npm ERR! fetch failed https://registry.npmjs.org/xxx的问题

    我个人的报错信息是:npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/download-git-repo (over 30000ms)
    在这里插入图片描述

    解决办法:(使用淘宝源)

    通过config命令:

    npm config set registry https://registry.npm.taobao.org 
    
    npm info underscore (如果上面配置正确这个命令会有字符串response)
    

    在这里插入图片描述

    参考博客:使用NPM命令安装库时,遇到 npm ERR! fetch failed https://registry.npmjs.org/xxx的问题

    下载得很快,很稳定,真香。

    非常感谢这位博主!

    如果我们仅仅只想用到Vue的一个组件,又不想构建太多东西去生成一个项目,那我们就只使用如下命令,来进行快速原型开发,编译一个.vue文件,这个是比较快的。所以这个我们也安装一下。

    用于快速原型开发,编译.vue文件:

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

    然后我们需要确定自己安装成功了,

    查看vue-cli版本:

    vue --version
    

    我所使用的vue/cli版本是4.3.1

    如果仍然需要使用旧版本的vue init 功能,可以全局安装一个桥接工具:

    npm install -g @vue/cli-init
    

    使用VSCode的话,本身它是不支持.vue文件的。(没有语法高亮提示)
    所以我们需要安装这么一个插件:
    插件名字:Vetur

    在这里插入图片描述


    初识.vue文件

    我们先来熟悉一下 .vue文件
    新建一个.vue文件:
    在这里插入图片描述
    每个.vue文件它代表一个组件。
    并且首字母大写,这是命名规范。

    .vue文件里都有什么呢?
    它有一个东西叫做 template ,英文单词意思是模板。
    它用来写组件的html文档结构,其实就是简化了我们在书写vue组件中的模板的过程。
    我们以前是这么写的:

    Vue.component('name',{
        template: `
          <div> I am a cmp </div>
        `,
    })
    

    现在就可以这样写了:

    <template>
        <div> I am a cmp </div>
    </template>
    

    除了template以外,还可以有script标签用来书写逻辑。
    script 书写时候自动生成了:

    <script>
    export default {
        
    }
    </script>
    

    默认导出一个对象。
    这个对象就是

    Vue.component('name',{
        template: `
          <div> I am a cmp </div>
        `,
    })
    

    的大括号中除了template之外的东西。
    例如:

    <script>
    export default {
        data(){
            return {
                msg: 'hello world',
            }
        }
    }
    </script>
    

    然后,还有一个标签:style,它用来书写css代码:

    <style>
    div {
        background-color: #008c8c;
    }
    </style>
    

    编译.vue文件

    利用windows命令行来执行编译命令,先进入到.vue文件所在路径。

    在这里插入图片描述
    在这里插入图片描述
    编译命令:

    vue serve xxx.vue
    

    注意你的.vue文件的名字是App,vue,那App,vue可以省略,直接写成:vue serve即可编译。
    如果你的.vue文件名字不是App.vue,就需要指定.vue文件的名称。
    在这里插入图片描述
    现在我们在地址栏输入:http://localhost:8080/
    在这里插入图片描述
    即可展示出我们刚刚写的组件。

    展开全文
  • vue-brunch, 为预编译单个文件Vue组件添加对早Brunch的支持 Vue Brunch为预编译单个文件Vue组件添加对早Brunch的支持。安装对于 2.x 支持,请使用主分支。npm install vue-brunch --save-dev对于 1.x 支持,请使用 1...
  • vue编译过程

    千次阅读 2022-02-15 10:17:26
    vue首先传router,store,render:h=>h(App),进行vue实例化,会将参数与构造函数的options进行合并赋值给vue.option,然后初使化生命周期,初使化initState,beforeCreate,create(都没有发现这些方法),然后进行挂载...
  • vue项目反编译

    千次阅读 2021-09-28 09:34:49
    1、npm install --global reverse-sourcemap 2、reverse-sourcemap --output-dir 导出路径 app.1111111.js.map
  • 用于将单个文件组件(.vue编译为独立JS文件以在浏览器中使用的构建设置的模板 该模板对于将VueJS单个文件组件(SFC)编译为独立的JS文件以在浏览器中使用非常有用。 这对于希望创建一个可以在网站上使用而无需...
  • Vue组件 用于渲染和编译JSCAD设计的VUE组件 阿尔法阿尔法 阿尔法阿尔法 目录 用法 请参阅有关如何组装组件的各种教程。...教程5-在线编辑JSCAD设计,然后进行编译和查看 教程6-更改JSCAD设计的参数,
  • 虚电子 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 1、确保node在v12版本以上 node -v 1.1升级Node版本 卸载 sudo npm uninstall npm -g yum remove nodejs npm -y 看看是否有残留 ...进入 /usr/local/bin 删除 node 的可执行文件 安装 wget https://cdn.np
  • 怎样可以vue编译

    千次阅读 2021-06-28 14:07:06
    但是我是需要vue的代码去学习这款app的前端是怎样写的,这些html和js的代码不是我想要的,百度了一下,好像这些都是打包编译过的代码,所以我想问一下各位大神这个可以还原到原来的vue代码吗...
  • *.vue文件经过编译使其满足AMD/CMD的模式
  • Vue在线编译器

    千次阅读 2020-07-10 08:00:00
    接下来我们看running.vue: 运行结果 ❝ 稍作分析: 该组件props接受一个value,string类型的,就是我们在线编辑的.vue文件代码; data里面定义了 code: this.value ,另外定义了被分割好之后的代码片段js html css;...
  • 编译后看到了之前编写的页面文件,但是没有其他内容,,做法是重新创建项目,替换新建项目中的src文件夹,,App.vue和实际项目中用到的vue.config.js需要格外再配置一下,,根据需求变动 CSDN
  • 最近使用vue-cli创建项目的时候,遇到es6无法转换成es5的情况,项目在ios9下无法正常运行,在webpack.base.conf.js里面修改babel的配置项,添加src...补充知识:vue cli2、cli3编译(打包)后的chunk-vendors.js文件
  • 静态配置文件中的参数还需要在其他的.vue文件中使用配置文件中的参数。 我一开始的想法就是:要在src同级目录下,添加几个.env.xxx的配置文件,然后在文件中配置NODE_ENV``NODE_BASE_URL等参数,然后在其他页面就...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,362
精华内容 26,544
关键字:

在线编译vue文件