Vue初学入门

• 文档与教程

1. Vue中文官网

1. Vite中文文档

1. Vue CLI 中文文档

1. Vue Router中文文档

1. VueX中文文档

1. Vant组件库

1. Sass中文网

1. Animate.css 动画库

1. BootCDN

1. W3school

1. 菜鸟教程

1. ES6入门教程

1. 前端入门教程

• Vue3项目初始化

1. 使用vite创建项目

npm init vite@latest

选择构建vue3+ts的项目

1. 目录结构说明

正常情况下我们都是基于src目录开发
- assets 静态资源文件夹
- components 组件文件夹
- composables 组合式文件夹
- plugins 插件文件夹
- api  接口文件夹
- hooks  钩子文件夹
- router  路由文件夹
- store 状态管理文件夹
- styles 样式文件夹
- utils 工具类文件夹
- views 视图文件夹

• eslint 基础配置

1. eslint安装

npm  i  eslint  --save-dev
npx eslint --init
//选择检查语法并找到问题，并运用一种代码规范 
To check syntax, find problems, and enforce code style
//选择代码规则 es modules
JavaScript modules (import/export)
//选择规范
vue
//是否选择ts规范
yes
//选择运行环境
Browser
//选择代码规范
//选择一个常用的代码规范
Use a popular style guide 
//个人推荐使用Standard 是个团队规范
Standard: https://github.com/standard/standard 
//选择js配置文件
JavaScript

1. eslint配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
    'vue/setup-compiler-macros': true // 处理setup语法中不需要引入的全局编译宏
  },
  extends: [
    'plugin:vue/vue3-strongly-recommended',
    'plugin:react/jsx-runtime',
    'standard'
  ], // 采用vue3的eslint插件，默认采用standard代码规范
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off', // 关闭组件名必须大写驼峰命名验证
    'no-undef': 'off',
    'react/display-name': 'off',
    'vue/comment-directive': 'off'
  }
}

1. 在npm配置中添加脚本

//package.json中配置
"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview",
  "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix"
},

1. eslint与编辑器集成

- 安装vscode 的eslint插件
- 启动eslint插件

1. 代码提交规范

//配置git commit hook
npx  mrm@ lint-staged
//配置钩子提交时执行run lint package.json中配置
"lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
},
"gitHooks": {
  "pre-commit": "lint-staged"
}
//推荐使用 angelar 规范
feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
//1.验证提交日志 https://github.com/conventional-changelog/commitlint
npm install --save-dev @commitlint/config-conventional @commitlint/cli
//2.新建commitlint.config.js 文件
module.exports = { extends: ['@commitlint/config-conventional'] }
//3.在husky 文件夹中新建 commit-msg文件写入内容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- commitlint --edit $1

1. 安装指定NPM版本

输入以下命令，其中@后面改为自己想要安装版本
npm install npm@8.5.0 -g

输入以下命令，查看npm版本是否降低成功
npm -v