vue开发注意事项
时间:2021-08-05
本文章向大家介绍vue开发注意事项,主要包括vue开发注意事项使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 因为最新的less-loader是为5.xxx版本的webpack服务的,而目前vue用的是4的最新版本,所以
npm view less-loader versions //查看less-loader的所有版本 npm i less-loader@7 //安装7里的最新版本
2. element-ui组件库的使用
- 完整引入
//引入ElementUI组件库 import ElementUI from 'element-ui'; //引入ElementUI全部样式 import 'element-ui/lib/theme-chalk/index.css'; //应用ElementUI Vue.use(ElementUI);
- 按需引入
//main.js配置 import { From, FromItem, Input, Button, Message } from 'element-ui'; //应用ElementUI //Vue.component(Select.name, Select)或写为Vue.use(Button) /* Vue. component('el-form', Form) Vue.component('el-form-item', FormItem) Vue.component('el-input', Input) Vue.component('el-button', Button) */ Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.use(Button) Vue.prototype.$message = Message //Message须挂载到Vue原型的$message上 //babel.config.js配置 module.exports = { presets: [ '@vue/cli-plugin-babel/preset', //这是原先自带的 ["@babel/preset-env", { "modules": false }], //追加的 ], plugins:[ //追加的 [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
- 一些问题
1. form表单默认是 box-sizing: content-box; 就会导致设置了宽度100%的盒子设了margin-left后会超出父盒子,此时改为 box-sizing: border-box; 就好了
3. eslint的严格校验(vscode的话安装eslint插件吧)
- 不允许拖尾空格(行末不能有空格) 'error Trailing spaces not allowed no-trailing-spaces'
- <script>标签里的缩进是两个空格 'error Expected indentation of 2 spaces but found 4 indent'
- 文件末尾须换行 'error Newline required at end of file but not found eol-last'
- 末尾不允许有多余的逗号 error Unexpected trailing comma comma-dangle
- 函数括号前要有一个空格 error Missing space before function parentheses space-before-function-paren
- 语句末尾不要写分号 error Extra semicolon semi
- js中字符串必须使用单引号 error Strings must use singlequote quotes
1. 可以在.eslintrc.js文件中进行相关配置,比如禁用'函数括号前保留一个空格'这一规则,则须在rules配置项中添加如下属性:
'space-before-function-paren': 0 // 值为0表示禁用该规则
2. 还可以新建一个.prettierrc文件,书写格式化规则,比如写上如下代码:{
"semi": false, //取消(隐藏)分号,会把js中的分号都删除
"singleQuote": true //使用单引号表示字符串,会把js中的双引号都转换成单引号
}须安装插件'Prettier - Code formatter',那么在启用该规则格式化后,就会自动按这个文件中配置的规则来格式化了
原文地址:https://www.cnblogs.com/wwqzbl/p/15099784.html
- JS魔法堂:再识instanceof
- Web开发之CSS
- Linux重启命令与如何重启网络?
- spring boot + embed tomcat + standalone jar的内存泄露问题
- 树莓派:设置与软件安装
- spring-boot 速成(11) - 单元测试
- OOAD-设计模式(四)结构型模式之适配器、装饰器、代理模式
- 2018年智能家居行业趋势 写在2017年关键词里
- 树莓派与arduino通信
- process information unavailable 的解决办法
- JS魔法堂:再识IE的内存泄露
- 给树莓派安装中文字库
- Hadoop(十七)之MapReduce作业配置与Mapper和Reducer类
- Design Pattern: Observer Pattern
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 后端服务慢成狗?试试这 7 招!
- 高性能无锁并发框架 Disruptor,太强了!
- Spring Boot 太狠了,一口气发布了 3 个版本!
- 贷款违约预测-Task2 数据分析
- Redis 最牛实践:业务层面和运维层面优化!
- 一个 randomkey 命令导致的 Redis 事故。。
- 分布式锁(数据库、Redis、ZK)拍了拍你
- 贷款违约预测-Task3 特征工程
- 用SQL代替DSL查询ElasticSearch怎样?
- 面试造飞机:面对Redis持久化连环Call,你还顶得住吗?
- 体验spring-boot-devtools热部署,流畅且不失强大,Jrebel呢?
- 贷款诈骗 x 摸版0day + 实战预警脚本
- 你不知道的 Linux 使用技巧
- 一文详解 Websocket 的前世今生
- 实例 | 教你用Python写一个电信客户流失预测模型