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中的双引号都转换成单引号

　　"printWidth": 200 //一行最多有200个字符，超过这个长度自动换行
}

须安装插件'Prettier - Code formatter'，那么在启用该规则格式化后，就会自动按这个文件中配置的规则来格式化了