Vue3 探索之路

入行3-4年，从没发布过文章，偶尔在有道云笔记记录一下；今天突然想写了（可能是马上放假，下午还有半天时间，wubug, 可以摸一会鱼），人嘛，总希望发点光，散点热，尽管如今还是一根劈柴；但一下子没啥思路；前几天发现一本书还不错，还没来得及实践，于是就跟着书本指引走一走吧。

VS Code 插件推荐

Vue 相关

Vue 3 Snippets
Vue VSCode Snippets
Vue Peek

编码相关

Prettier – Code formatter
ESLint
StyleLint
Bracket Pair Colorizer 2
Auto Close Tag
Auto Rename Tag
Auto Import

Git 相关

GitLens
Git History

VS Code 配置同步

Settings Sync

Javascript 扩展

JavaScript (ES6) code snippets

markdown

markdownlint

其他

Remote – WSL
Remote – SSH
Docker
Live Server

项目搭建

PostCSS

postcss-extend-reduceamountofCSScode
postcss-mixins-enableuseofSasslikemixins
postcss-nested-enableuseofSasslikenesting
postcss-preset-env-enablemodernCSSfeature
postcss-reporter-styleerrorreporting
precss-enableSasslikesyntaxandfeatures
stylelint-lintstyles

快捷安装

npm install -D stylelint postcss-extend postcss-mixins postcss-nested postcss-preset-env postcss-reporter precss
复制代码

postcss.config.js 配置

module.exports={
  plugins:[
      require('stylelint')({
      configFile:'stylelint.config.js',
  }),
  require('postcss-extend'),
  require('precss'),
  require('postcss-preset-env'),
  //uncommentifyou'reusingTailwind
  //require('tailwindcss')('tailwind.config.js'),
  require('postcss-nested'),
  require('autoprefixer')(),
  require('postcss-reporter'),
  ],
  }
复制代码

增强 Stylelint 功能插件

stylelint-config-css-modules -enable css module specific syntax
stylelint-config-prettier – disable rules conflicting with Prettier
stylelint-config-recess-order -sort CSS properties inspecific order
stylelint-config-standard – Turns on additional rules to enforce common

stylisticconventions

stylelint-scss – A collection of SCSS specific rules. Install only if you’re using SCSS.
快速安装

npm install -D stylelint-config-css-modules stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-scss
复制代码

stylelint.config.js 配置

module.exports = {
 extends: [
   "stylelint-config-standard",
   "stylelint-config-recess-order",
   "stylelint-config-css-modules",
   "stylelint-config-prettier",
 ],
 plugins: ["stylelint-scss"],
 ignoreFiles: ["./node_modules/**/*.css"],
 rules: {
   "at-rule-no-unknown": [
     true,
     {
       ignoreAtRules: [
         //--------
         //Tailwind
         //--------
         "tailwind",
         "apply",
         "variants",
         "responsive",
         "screen",
       ],
     },
   ],
   "no-duplicate-selectors": null,
   "no-empty-source": null,
   "selector-pseudo-element-no-unknown": null,
   "declaration-block-trailing-semicolon": null,
   "no-descending-specificity": null,
   "string-no-newline": null,
   //Limitthenumberofuniversalselectorsinaselector,
   //toavoidveryslowselectors
   "selector-max-universal": 1,
   //--------
   //SCSSrules
   //--------
   "scss/dollar-variable-colon-space-before": "never",
   "scss/dollar-variable-colon-space-after": "always",
   "scss/dollar-variable-no-missing-interpolation": true,
   "scss/dollar-variable-pattern": /^[a-z-]+$/,
   "scss/double-slash-comment-whitespace-inside": "always",
   "scss/operator-no-newline-before": true,
   "scss/operator-no-unspaced": true,
   "scss/selector-no-redundant-nesting-selector": true,
   //AllowSCSSandCSSmodulekeywordsbeginningwith`@`
   "scss/at-rule-no-unknown": null,
 },
}

复制代码

IhavealsoincludedrulesforTailwindandSCSS,butyoucanremoveormodify
themasneeded.Besidesaddingtheconfigfile,wealsoneedtoupdateVSCode
settingstoensurethatVSCodeandVeturdonotvalidateourstyles,asStylelint
takescareofthat.
(大意：怕和vscode配置冲突，修改一下vscode配置)

settings.json

{
    "css.validate":false,
    "less.validate":false,
    "scss.validate":false,
    "vetur.validation.style":false
}
复制代码

使用 prettier (prettier.config.js)

module.exports={
endOfLine:"lf",
jsxBracketSameLine:false,
jsxSingleQuote:true,
printWidth:80,
proseWrap:"never",
quoteProps:"as-needed",
semi:false,
singleQuote:true,
tabWidth:2,
trailingComma:"es5",
useTabs:false,
vueIndentScriptAndStyle:false,
};
复制代码

再次更新 vscode settings.json

{
//..otherrules
"editor.formatOnSave":true,
"editor.formatOnPaste":false,
"editor.formatOnType":false,
"editor.defaultFormatter":"esbenp.prettier-vscode",
}
复制代码

Automatic import of styles and variables (自动导入样式和变量)

安装依赖 npm install -D style-resources-loader

创建 vue.config.js 并配置

constpath=require('path')
module.exports={
    chainWebpack:config=>{
        consttypes=['vue-modules','vue','normal-modules','normal']
        types.forEach(type=>addStyleResource(config.module.rule('scss').oneOf(type)))
    },
}
functionaddStyleResource(rule){
    rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
        patterns:[
            //Hereyoucanaddmorefilesyouwanttomakeavailabletocomponents
            path.resolve(__dirname,'./src/styles/variables.scss'),
        ],
    })
}
复制代码

开发环境搭建

现有开发环境环境依赖项目太重，不敢瞎搞；于是就在 VMware 重新搭建环境

安装 Ubuntu 和 Budgie 桌面

安装 vmware-tools，全屏开启

vmware 一般会提示安装 vmware-tools，先把文件 down 下来
解压：tar -zxvf VMwareTools-10.3.10-13959562.tar.gz -C ~/Documents — 解压到 Documents 下
找到文件安装：sudo ./vmware-install.pl
reboot — 安装重启一起呵成
完美解决