1. 程式人生 > 其它 >vue開發注意事項

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',那麼在啟用該規則格式化後,就會自動按這個檔案中配置的規則來格式化了