vue从0到1的整个过程

前端项目开发从0到1配置流程

(Vuecli3 + vue2)

一、vue-cli2和vue-cli3的区别

• vue-cli3 是基于webpack4的, vue-cli2是基于webpack3

• vue-cli3的设计原则是"0配置", 移除了配置文件根目录下build和config等目录

• vue-cli3 提供了vue ui命令, 进行可视化配置, 操作更方便

• 替换了static文件夹为public文件夹, 并且index.html移动到public文件夹中

二、使用vue-cli3脚手架搭建项目

2.1 安装环境

• 全局安装node环境,检查node版本

  • npm

  • 源: 外网源 淘宝镜像源

• 全局安装vue-cli脚手架

• 在git远程仓库创建新的项目

1. 创建项目

vue create efficient                             // efficient 项目名称

Vue CLI v5.0.8                                   // # vue-cli脚手架的版本
? Please pick a preset: (Use arrow keys)         // 请选择一个配置
❯ Default ([Vue 3] babel, eslint)            // 默认配置,vue的版本是3.0, 默认安装了es6转es5,eslint代码格式化工具
  Default ([Vue 2] babel, eslint) // 默认配置,vue的版本是2.0, 默认安装了es6转es5,eslint代码格式化工具
  Manually select features   // 手动选择,我们需要指定哪些插件安装,哪些不安装, 就可以选择手动
​

这里由于默认模板没有啥展示的必要所以我们便选择手动配置。

1. 选择手动配置后,进行项目选项配置

Vue CLI v5.0.8
? Please pick a preset: Manually select features  //请选择项目配置
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) // 选择你需要的配置放在项目里面,可以选择一个,也可以选择全部,按enter键结束
❯◉ Babel                              // 转换工具,将es6转换成es5
 ◯ TypeScript  // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
 ◯ Progressive Web App (PWA) Support   // 渐进式Web应用程序
 ◯ Router                                // vue-router（vue路由）
 ◯ Vuex                                                              // vuex（vue的状态管理模式）
 ◯ CSS Pre-processors                    // CSS 预处理器（如：less、sass/scss）
 ◉ Linter / Formatter                  // 代码风格检查和格式化（如：ESlint）
 ◯ Unit Testing                        // 单元测试（unit tests
 ◯ E2E Testing                         // e2e（end to end） 测试

(1) 对于pwa的解释

Web前端开发工程师

一是给项目添加一些webapp支持，比如在手机端支持发送到桌面图标，根据不同平台和浏览器尝试去掉浏览器自带的地址栏、底栏实现全屏体验，这个主要是视觉上和体验上的，没有什么实际功能。
实现方式就是勾选pwa支持后项目会生成manifest.json,在里面配置即可
二是增加可离线支持。其实可离线也不一定非要用pwa，有不少其他手段。可离线就是比如你的项目不是一定要全程联网才能实现功能，只要用户访问过一次你的网站，下一次进入时哪怕没有网络，你的项目也不会白屏，而是照常运行或者开放部分功能，或者给个断网提示等等。对于那些功能性网站挺有用的，举例来说什么在线计算器，在线算税小工具等。
通过配置项目生成的registerServiceWorker.js来注册serviceworker实现，具体操作还是很复杂的，详情百度.
​
​
Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。PWA 的主要特点包括下面三点：可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现体验 - 快速响应，并且有平滑的动画响应用户的操作粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。
​
​
搜索链接: https://juejin.cn/post/6844904033522548743
​

(2) 对于单元测试的理解

那些需要写单元测试,那些不需要写,取决于代码对数据的处理,当数据处理的复杂性较高的时候,需要用到单元测试,只有页面展示,并不需要单元测试

如何做前端单元测试 - 掘金

(3)E2E单元测试

E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用_e2e测试_皮蛋很白的博客-CSDN博客

(4).scss预处理【转】前端的css preprocessor - 简书 scss less stylus

1. 选择vue的版本

   ? Choose a version of Vue.js that you want to start the project with
     3.x
   ❯ 2.x
                   // 选择一个vue的版本

2. 使用hash还是hitory路由

   Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)N
   // 选择hash路由

3. 选择css预处理的方式

   ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) // css预处理器  这里选择第一个Sass/SCSS (with dart-sass)
   ❯ Sass/SCSS (with dart-sass)
     Less
     Stylus
   ​

4. 语法检测工具

   ? Pick a linter / formatter config: (Use arrow keys) // 语法检测工具
   ❯ ESLint with error prevention only // 仅错误预防
     ESLint + Airbnb config  // config Airbnb配置
     ESLint + Standard config // config 标准配置
     ESLint + Prettier // 该配置应该比较完善

5. 语法检测方式

   ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed
   ❯◉ Lint and fix on commit  // 代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候，通过 githook，在 pre-commit 阶段执行 lint 和 fix 操作，自动帮我们把有语法错误的地方修改为符合规范。
    ◯ Lint on save  // 代码文件中有代码不符合 lint 规则时，会在 compile 阶段提示 warning。如果出现了语法错误，会直接在页面上显示 error
    

6. Where do you prefer placing config for Babel, ESLint, etc.?配置文件放在那里呢?

   Where do you prefer placing config for Babel, ESLint, etc.?配置文件放在那里呢?
   In dedicated config files     //:独立文件
   In package.json               //: 放到package.json中
   通常我们都选择独立的配置文件, 方便管理

7. Save this as a preset for future projects? (y/N) 是否将刚刚的配置保存到项目中?

   Save this as a preset for future projects? (y/N) N

   如果选择是: 下次在配置选项的时候, 除了default,manually,还会多一个我们保存的项目配置.

   • Y: 如果以后搭建项目都希望是这个配置就选择y

   • N: 不希望保存配置 下次在创建项目的时候, 我们就可以自动选择之前保存的项目特征

     

   如果我们设置了很多自定义配置,如何取消呢?

   在/Users/用户名/.vuerc, 修改这个文件

   {
     "useTaobaoRegistry": false,
     "presets": {
       "mySet": {
         "useConfigFiles": true,
         "plugins": {
           "@vue/cli-plugin-babel": {}
         },
         "vueVersion": "2"
       }
     }
   }

   里面有个选项是presets. 下面就是我们保存的设置.设置名称是mySet.这个配置只安装一个插件:@vue/cli-plugin-babel,

   当我们不想有这个配置的时候,可以改成以下配置,就可以删除不小心新增的饿配置

   {
     "useTaobaoRegistry": false,
     "presets": {
      
     }
   }

三、下面我们来看一下vue-cli3项目中各个文件的含义

3.1 目录简介

1. node_modules: npm构建的组件都在这个文件夹里面

2. public: 里面存放公共资源. 目前有index.html和公共图标,也可以存放公共的样式等

3. src 放置组件

   • Assets -- 放置图片.img,css,js

   • components -- 放置其他组件所需要的公共组件

   • router -- 配置路由表,(动态路由,静态路由,权限路由)

   • store -- 存放vuex的仓库

   • Views -- 放置页面的地方

     • Home

     • ......

     • App.vue 入口的总文件

     • main.js 实例化vue挂载

   • utils -- 所有封装axios,封装token,封装公共方法-----工具类文件

     • httpRequest.js --- 封装axios文件

   • api

     • api.js --- 封装接口的地方

4. .browserslitstrc: 浏览器适配配置

> 1%
last 2 versions
not dead

适配市场份额大于1%的最后两个版本, 不适配已经过期的版本

1. .gitignore: 忽略文件

node_modules
/dist

重点看这个, 忽略node_modules文件和/dist构建后的文件. 通过运行npm run serve就可以生成这两个文件了

1. babel.config.js: babel插件设置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

通常, 不修改这个文件的内容

1. package.json: npm配置文件

{
  "name": "03-vuecli3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
}

这个比vue-cli2的devDependencies配置文件少了很多. 而多了一个下面这个配置:

"@vue/cli-service": "~4.5.0",

这个配置的作用是: 管理dev环境的依赖. vue-cli3使用这个配置以后, 简化了配置文件.

dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

• 对应版本可以有各种限定

  指定版本：，安装时只安装指定版本。比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定。

  ~ 指定版本：不改变大版本号和次要版本号。比如~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x。

  ^ 指定版本：不改变大版本号。比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。

  latest：安装最新版本。

1. package-lock.json

   • 约束每个node-modules版本下的其他依赖的固定版本

   • package.json可以手动编写，也可以使用npm init 自动生成。其中只有name和version是必填的，其他配置都是选填

2. vue.config.js ----- 配置webpack文件(包括配置跨域,请求接口,第三插件配置,rule配置)

   • 和webpack的五大核心想关联,配置代理

四、代码规范的校验

4.1 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

VSCode需要安装一个插件：EditorConfig for VS Code

新建.editorconfig文件

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = tab # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
 
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

4. 2 使用prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

1. 安装prettier

   npm install prettier -D

2. 配置.prettierrc文件：

   useTabs：使用tab缩进还是空格缩进，选择false； tabWidth：tab是空格的情况下，是几个空格，选择2个； printWidth：当行字符的长度，推荐80，也有人喜欢100或者120； singleQuote：使用单引号还是双引号，选择true，使用单引号； trailingComma：在多行输入的尾逗号是否添加，设置为 none； semi：语句末尾是否要加分号，默认值true，选择false表示不加；

   {
     "useTabs": false,
     "tabWidth": 2,
     "printWidth": 120,
     "singleQuote": false,
     "trailingComma": "none",
     "semi": false
   }
   

3. 创建.prettierignore忽略文件

   /dist/*
   .local
   .output.js
   /node_modules/**
   
   **/*.svg
   **/*.sh
   
   /public/*

4. VSCode需要安装prettier的插件

1. 测试prettier是否生效

   • 测试一：在代码中保存代码；

   • 测试二：配置一次性修改的命令；

   在package.json中配置一个scripts：

   "prettier": "prettier --write ."

然后命令行执行，可以将所有文件都格式化

   npm run prettier

4.3、eslint

1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。

2.VSCode需要安装ESLint插件：

3.解决eslint和prettier冲突的问题：

安装插件：vue在创建项目时，如果选择prettier，那么这两个插件会自动安装

npm i eslint-plugin-prettier eslint-config-prettier -D

在.eslintrc.js文件中，添加prettier插件'plugin:prettier/recommended'，表示eslint也使用prettier里配置的规范

 
 ## v3
 extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],
##v2 
 extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],

当配置完毕后,报以下错误,或者js文件开头有红色波浪线,添加requireConfigFile: false 这行配置即可

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

4.4、git Husky和eslint

虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：

也就是我们希望保证代码仓库中的代码都是符合eslint规范的；

那么我们需要在组员执行 git commit 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；

那么如何做到这一点呢？可以通过Husky工具：

husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

如何使用husky呢？

这里我们可以使用自动配置命令：

linux系统

npx husky-init && npm install

widnow系统

npm install husky
npx husky-init
联合命令
npm install husky;
npx husky-init

这里会做三件事：

1.安装husky相关的依赖：

2.在项目目录下创建 .husky 文件夹：

npx huksy install

3.在package.json中添加一个脚本：

"perpare": "husky install"