vue开发注意事项

2021-08-05 10:31:24 阅读：135 来源： 互联网

标签：use vue ElementUI 注意事项 component js Vue 开发 error

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

标签：use,vue,ElementUI,注意事项,component,js,Vue,开发,error
来源： https://www.cnblogs.com/wwqzbl/p/15099784.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue开发注意事项