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