Vue项目 风格校验、前端工程化

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

VueCLI

• 功能：基于vue.js进行快速开发的完整系统，称为脚手架
• 作用
  • 统一项目的架构风格
  • 初始化配置项目依赖
  • 提供单文件组件
• 操作方式：命令行工具
• 🤩操作步骤：vue create 项目名

复习 "前端工程化"

• 自定义构建：源代码在解决完这些问题后，才可以成为上线代码

为什么要构建？

• 一些代码需要编译(css,js)，保证浏览器的兼容性
  • 将Less或Sass转换成css -> 使用less插件
  • 将ES6+的新语法转换成ES5 -> 转换插件babel(单个文件和整个目录都可以)

• 有些代码需要压缩(css,js,html,图片等)
  • 压缩之后的代码体积更小，加载更快，节省带宽 -> 使用minify插件
• 有些代码需要格式化校验，统一代码风格

自动化构建

• 把所有可能的任务，按照一定的逻辑，排列组合在一起，最终通过一条命令运行完所有任务
• npm srcipts任务的执行方式
  • 并行parallel &
  • 串行series &&
  • 由于&并行执行在windows下不起作用，使用npm-run-all插件解决 -> run-p、run-s

• npm允许在package.json文件中，使用scripts字段定义脚本命令
  • 声明命令(package.json)

  // package.json文件
  "scripts": {
    "foo":"node bar.jss"
  }
  

  • 执行命令(命令行)

  // 命令行
  npm run foo
  

补充复习

• 初始化项目(npm init --yes)
• Babel(编译转换)
  • 安装Babel( npm install -g babel-core babel-cli )
  • 安装转码规则( npm install -D babel-preset-env )
  • 配置转换规则( .babelrc文件 )
  • 在npm scripts中添加转换命令( babel src -d dist )
  • 执行转换命令
• ESLint(js代码格式校验)，不同类型的代码需要不同的工具去检查
  • 安装ESLint(npm i eslint -g)
  • 初始化配置文件(eslint --init)
  • 检查js代码格式
• StyleLint：对CSS代码格式校验
  • 安装styleLint(npm install --global stylelint)
  • 安装检测标准(npm i --global stylelint-config-standard)
  • 创建配置文件(.stylelintrc.json)
  • 检查CSS代码风格
    • 单个文件(stylelint path/filename.css)
    • 整个项目(stylelint** / *.css)

什么是CSS预处理器？

• CSS预处理器用一种专门的编程语言，为CSS增加了一些编程的特性，然后再编译成正常的CSS文件，以供项目使用
• 目前比较流行的:LESS\ SASS
• LESS是一种动态样式语言，给CSS赋予了动态语言的特性，如变量、继承、运算、函数。

为什么要使用？

• 结构清晰，便于扩展
• 可以方便的屏蔽浏览器私有语法差异
• 可以轻松实现多重继承
• 完全兼容css代码。LESS只是在CSS语法上做了拓展，所以老的CSS代码也可以与LESS代码一起编译。

安装完毕

• 🤩操作步骤
  • 进入项目目录cd 项目名
  • 启动预览服务器npm run serve

项目加入Git版本管理

• gitgnore文件内部包含不往git推送的文件名
• 检查是否存在git仓库git status
• 创建git仓库git init

将本地仓库推送到远程仓库

• 🤩git remote add origin 推送的地址
• 🤩git push -u origin master
  • -u表示默认，保存要推送的地址

目录结构

• node_modules:第三方包存储目录，npm下载的包也包含其中
• public：静态资源目录，内部的静态资源都会被简单的复制，而不会经过webpack
  • index.html
• src: 资源目录
  • assets: 存储项目中使用的图片等资源
  • components: 组件目录
  • router: 路由模块目录
  • store: 容器模块目录
  • services: 存放接口功能模块
  • styles: 存放全局样式
  • utils: 存放工具模块
  • views: 路由页面组件目录
  • App.vue: 根组件，最终被渲染到index.html中的#app
  • main.js: 入口文件，挂载app
• .browerslistrc: 指定项目的目标浏览器范围，会被**@babel/preset-env和Autoprefixer用来确定要转移的js特性和css前缀**
• .editorconfig: 编辑器配置文件，用来维护编辑器(或IDE)的统一代码风格
• .eslintrc.js: ESLint配置文件
• .gitignore: Git的忽略配置文件
• README.md：说明文档
• babel.config.js: Babel配置文件
• package.json: 第三方包的说明文件，记录包的依赖信息等内容
• package-lock.json: 记录包安装的版本号

代码规范与风格指南

• 规范的代码具有更好的阅读性、更好的可维护性，更利于多人协作开发
• 常见的代码标准：standard

自定义校验规则

• .eslintrc.js
  • extends:加载哪些规则做校验
  • rules：自定义的规则设置
• 更改配置文件，服务器需要重启