精华内容
下载资源
问答
  • 解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题

    解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题

    参考文章:

    (1)解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题

    (2)https://www.cnblogs.com/zale-blogs/p/9709772.html

    (3)https://www.javazxz.com/thread-4171-1-1.html


    备忘一下。


    展开全文
  • 通过阅读本书,读者能够掌握Vue.js框架主要API的使用方法、自定义指令、组件开发、单文件组件、Render函数、使用webpack开发可复用的单页面富应用等。 本书示例丰富、侧重实战,适用于刚接触或即将接触Vue.js的...
  • .vue文件书写规范 - 简书 template 模块 1. <template> 标签上不要写多余的属性(默认就是以 html 来解析) <!-- Not recommended --> <template lang="html"></template> <...

    .vue文件书写规范 - 简书

    template 模块

    1. <template> 标签上不要写多余的属性(默认就是以 html 来解析)

    <!-- Not recommended -->
    <template lang="html"></template>
    

    <!-- Recommended -->
    <template></template>
    

    2. template 里 html 标签上的属性书写规则

    2.1 超过一个属性时,属性换行对齐;

    2.2 v-xx指令放最前,自有属性放最后;

    <!-- Not recommended -->
    <input type="text" class="hf-input" placeholder="请输入验证码" v-model="form.imageCode" />
    

    <!-- Recommended -->
    <input
      v-model="form.imageCode"
      type="text"
      class="hf-input"
      placeholder="请输入验证码"
    />
    

    2.3 v-xx指令排序规则,控制显示 -> 控制循环 -> v-bind属性 -> v-on事件绑定;

    v-if / v-show -> v-for -> v-bind:text... -> v-on:click...

    如:

    <!-- Recommended -->
    <ul v-if="todos.length > 0">
        <li
          is="todo-item"
          v-for="(todo, index) in todos"
          v-bind:key="todo.id"
          v-bind:title="todo.title"
          v-on:remove="todos.splice(index, 1)"
        ></li>
      </ul>
    

    2.4 当v-ifv-for在同一个标签上时,记得v-if的权重高于v-for,会在每个标签上做判断,确定这是你真正的意图?

    2.5 v-for时,记得为每项提供一个唯一 key 属性;

    2.6 非不得已,请不要写html标签上直接写style内联样式!

    3. 在大结构块时,加入合适的注释标签,并保持良好的层级缩进;

    <div>
      <!-- “导入”组件 -->
      <div>
        xxx
      </div>
      <!-- “导入”组件/ -->
      <!-- 搜索框 -->
      <div>
         xxx
      </div>
      <!-- 搜索框/ -->
    </div>
    

    script 模块

    1. import 放在最顶部,并省略掉 .js.json.vue 后缀(已在webpack的resolve.extensions中做了配置)

    <!-- Not recommended -->
    import mockData from '@/mockdata/userMock.js'
    

    <!-- Recommended -->
    import mockData from '@/mockdata/userMock'
    

    2. export 对象中属性定义顺序

    name 当前模块名字
    components 便于查找引用了哪些组件(单个换行,以,结尾

    <!-- Recommended -->
    components: {
      norecord,
      TimePicker,
    },
    

    props 可接受的从父组件传递过来的参数列表

    1. props 值必须为对象;
    2. 如果是必传项,要设置 required:true
    3. 如果有默认值(最好都有默认值),要设置 default 的值;
    4. props 的每个字段添加注释,方便后期维护

    <!-- Recommended -->
    props: {
      // 学生数量
      stuCount: Number,
      // 是否正在加载(带有默认值)
      isLoading: {
        type: Boolean,
        default: false,
      },
      // 是否正在创建(如果是必传项)
      isCreating: {
        type: Boolean,
        required: true,
        default: false,
      },
    },
    

    data 记得是一个 function,保证每个实例可以维护一份被返回对象的独立的拷贝
    computed 计算属性
    watch 监听器
    filters 过滤器
    directives 指令
    mixins 混入
    methods 方法

    1. 方法按页面结构从上至下开始定义;
    2. 属于某一个功能项的尽量放在一起,并加上此功能项的起止注释;
    3. 页面初始化方法写在最后;
    4. 公用方法写在页面初始化方法前,页面其他功能项方法后;

    <!-- Recommended -->
    methods: {
        // 添加课程
        addClass() {
    
        },
        // 删除课程
        delClass() {
    
        },
    
        /** 上传模块的功能 start */
        // 上传成功
        uploadSuc() {
    
        },
        // 上传失败
        uploadFail() {
            
        }, 
        /** 上传模块的功能 end */
    
        /** 共用方法 start */
        // 转换成树结构
        convertToTree() {
    
        },
        // 表单校验
        checkForm() {
    
        },
        /** 共用方法 end */
    
        // 初始化一些信息
        init() {
    
        },
    },
    

    created/mounted/updated 等各类生命周期函数

    <!-- Recommended -->
    methods: {
        
    },
    /** 生命周期勾子函数 start */
    beforeCreated() {
    
    },
    created() {
    
    },
    mounted() {
    
    },
    /** 生命周期勾子函数 end */
    


     

    style 模块

    1. @import 写在最前;
    2. 样式书写顺序与页面结构一致;
    3. 嵌套层级最多请不要超过3层;
    4. 慎重考虑是否添加 scoped 属性。



    作者:水流云间
    链接:https://www.jianshu.com/p/afa0228e8630
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 在ts文件中.vue后缀画红色波浪处理方法 1,在根目录或者src目录下创建 xxx.d.ts 文件 我这里叫min.d.ts 命名可以随便起 2,在该文件里写入以下代码 declare module '*.vue' { } declare module '*.js' declare module...

    在ts文件中.vue后缀画红色波浪处理方法

    1,在根目录或者src目录下创建 xxx.d.ts 文件

    我这里叫min.d.ts 命名可以随便起
    在这里插入图片描述
    2,在该文件里写入以下代码

    declare module '*.vue' { }
    declare module '*.js'
    declare module '*.json';
    declare module '*.svg'
    declare module '*.png'
    declare module '*.jpg'
    declare module '*.jpeg'
    declare module '*.gif'
    declare module '*.bmp'
    declare module '*.tiff'
    

    即可解决问题

    展开全文
  • vscode 识别vue文件

    万次阅读 2019-01-04 14:35:06
    "files.associations": { "*.vue": "vue", "*.wpy": "vue"...setting 的 json 里面配置, 意思是以这两个文件后缀结尾的都定义成vue 文件  
    "files.associations": {
            "*.vue": "vue",
            "*.wpy": "vue"
        },
    
    setting 的 json 里面配置, 意思是以这两个文件后缀结尾的都定义成vue 文件

     

    展开全文
  • 一、idea支持.vue文件 二、idea设置vue语法提示 三、效果展示 一、idea支持.vue文件 这一步其实就是安装vue.js插件,具体路径为:File ----> Settings ----> Plugins ----> 输入vue,点击搜索结果里的...
  • 一、最近想做一个文件上传管理系统。展示文件仿照百度云那样有图标,有文件名,做文件列表显示。记录下代码。 <div class="item_list"> <div v-for="item in list" class="file_item"> <div...
  • 1、在HTML文件头部引入 这可以让内核较低的浏览器支持ES6语法 2、正常情况下的vue声明需要做出调整 data(){ } 需要改成: data:function(){ return{ } } 普通的  created(){ }...
  • 简述需求 哈哈哈,这应该是比较简单的一个小需求,但是刚开始碰到我还不知道...首先,要将你所需要的文件图标名称改为 文件后缀名.png 之类的(zip.png/txt.png/world/png…)。写一个函数,传入后台返回的文件名,然...
  • 不管是在react或者是在vue项目中,往往需要在一个文件中引入另外一个文件,不管是以.js或者是以.vue为后缀的文件都可以省略这些后缀名。直接在webpack.config.js配置...vue中引入组件一般是vue后缀,在上面数组中加...
  • vue导出文件插件

    2021-08-20 14:33:47
    file-save 安装命令 npm install file-saver --save 页面引入 import { saveAs } from 'file-saver' 使用方法 saveAs(url,'导出文件名字')
  • // download 属性定义了文件名称,并且是必填,不然会页面会自动识别为跳转路径,而不是文件下载地址 link.setAttribute("download", item.name); document.body.appendChild(link); link.click(); // 销毁添加的a...
  • 把.vue后缀文件更改为.jsx文件 就可以执行 App.jsx // 1. Vite在启动时会做依赖的预构建 // 2. 预构建,运行时默认都只会对jsx与tsx做语法转换。不会对js做jsx的语法转换。 // 目前vite不支持.vue单文件的jsx编译 ...
  • vue项目中,在获得文件名信息,需要根据文件名的后缀来区分文件类型的方法如下:其中,文件后缀可自由拓展。 // 根据文件名后缀区分 文件类型 /* * @param: fileName - 文件名称 * @param: 数据返回 1) 无后缀...
  • 如何运行单个.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
  • 获取文件后缀名,获取文件类型

    千次阅读 2018-12-17 15:28:06
    file.name.substring(file.name.indexOf('.')+1).toLowerCase() 再补充一点,如果不要后缀名只要文件名: file.name.substring(0, file.name.indexOf('.')) //这样即可
  • .vue文件就是一个(或局部)组件,又或者说是一个对象在导出时。 在Vue.createApp({ app}) app是一个.vue文件,里面包括三个部分template 和 js css,。然后再对比下面图片,是不是很像,下面一个注册一个组件需要...
  • 问题描述 关于elementUI文件上传校验功能实现 代码 <el-upload accept="image/jpeg,image/gif,image/png" class="upload-demo upload-tip" :action="upload...
  • 首先下载vue-pdf npm install vue-pdf -D 然后直接看代码吧 完整代码如下 <template> <div> <el-button class="grid-button" type="success" plain size="small" @click="exportdata" >...
  • tsconfig.json "paths": { "@/*": ["src/*"] }, err:报错找不到路径 解决方案:vscode开启工作区,将文件保存进工作区即可
  • 单独下载FileSaver.js地址:... ... 安装: npm install file-saver --save 或者(需下载FileSaver.js文件) <script src="path/FileSaver.js"/> 引用: import FileS...
  • IDEA 创建.vue格式的文件

    千次阅读 2019-09-12 15:40:28
    1、File——>Settings——>...填写【Vue File】 2、在第一步的基础上点击创建的【Vue file】 下图中模板代码如下: <template> <div> {{msg}}</div> </template> &l...
  • 4. 导入md文件 5. 注册为组件 6. 在页面中使用 最终效果 1. 安装依赖包 npm i vue-markdown-loader -D npm i vue-loader vue-template-compiler -D npm i github-markdown-css -D npm i highlight.js -D 若...
  • 文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制下面代码内容并保存 { "Print to console": { "prefix": "Vue模板", "body": [ "<template>", "\t<div>\n", "\...
  • 使用vite引入TS后mian.ts引入的vue文件会报错 原因是引入时typescript 只能理解 .ts 文件,无法理解 .vue文件 解决方法 在src文件夹内添加.ts文件,并输入以下内容 declare module '*.vue' { import { Component...
  • vue 使用require引入某个文件,判断本地是否有某个文件 在本地电脑有host.json文件,在项目中引入这个文件 1.使用require.context判断某个文件是否存在 require.context(引入某个文件的路径, 是否遍历该路径下的...
  • vue-上传文件校验文件类型处理函数
  • 上传文件代码 vue代码() <el-upload class="upload-demo" action='/rest/admin/uploading' :headers="header" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove=...
  • [vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? 也可以写为js,jsx,ts,tsx这种 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,704
精华内容 5,881
关键字:

vue后缀文件

vue 订阅