vue开发注意事项

1. 因为最新的less-loader是为5.xxx版本的webpack服务的,而目前vue用的是4的最新版本,所以安装的less-loader版本不能太高,建议安装7版本的

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',那么在启用该规则格式化后,就会自动按这个文件中配置的规则来格式化了

 

上一篇:elementUI的树形tree组件的使用


下一篇:elementUI+Upload 上传图片 先进行压缩