Vue3 探索之路

从没发布过文章，人嘛，总希望发点光，散点热；前几天发现一本书还不错，还没来得及实践，于是就跟着书本指引走一走吧。

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 -- 安装重启一起呵成
完美解决