[Vue project] Vue project basic environment construction

1. Basic preparation before building the project

• nodejs: An indispensable environment for current front-end engineering development, use nodejs's npm function to manage dependent packages

$ node -v #查看node版本
$ npm  -v #查看npm版本

• git: Currently the most popular distributed version management tool, code 提交, 检出, 日志 needs to be completed through git

$ git --v #查看git安装版本

• npm Taobao mirror: npm’s server is located abroad, so npm is generally set to the domestic Taobao mirror.

$ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址
$ npm config get registry  #查看镜像地址

• vscode editor: The current coding tool for front-end development, with a rich plug-in system ( vetur+ eslint), very suitable for developing front-end projects
  • eslint parameter configuration in vscode

{
    
     
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
    
    
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
    
    
        "source.fixAll.eslint": true
    }
}

2. Vue project template startup and directory introduction

(1) Project template startup

• git pulls the basic project template

$ git clone  https://github.com/xxx.git project #拉取基础模板到hrsaas目录

• Install project dependencies (locate to the project directory)

$ npm install  #安装依赖

• Startup project

$ npm run dev #启动开发模式的服务

(2) Introduction to project directory

• Vue2-cli

Project
├── build                     构建脚本目录
│ ├── build.js                生产环境构建（编译打包）脚本
│ ├── check-version.js        检查node、npm等版本
│ ├── dev-client.js           开发服务器热重载脚本，主要用来实现开发阶段页面自动刷新
│ ├── dev-server.js           运行本地开发服务器
│ ├── utils.js                构建相关工具方法，主要用来处理css类文件的loader
│ ├── vue-loader.conf.js      处理vue中的样式
│ ├── vebpack.base.conf.js    webpack基本配置
│ ├── vebpack.dev.conf.js     webpack开发环境配置
│ └── vebpack.prod.conf.js    webpack生产环境配置
│
├── config                    项目配置
│ ├── dev.env.js              开发环境变量
│ ├── index.js                项目配置文件
│ └── prod.env.js             生产环境变量
│
├── dist                      使用生产环境配置构建项目，构建好的目录放到该目录
│ ├── dev.env.js              开发环境变量
│ ├── index.js                项目配置文件
│ ├── prod.env.js             生产环境变量
│ └── test.env.js             测试环境变量
│
├── node_modules              node的依赖包
│
├── src                       项目源码目录
│ ├── api
│ │  └── api.js               接口文件
│ ├── assets                  资源目录，这里的资源会被webpack构建
│ │  ├── css                  第三方css文件，全局css文件
│ │  ├── fonts                字体
│ │  ├── less                 全局less
│ │  ├── sass                 全局sass
│ │  └── images               图片
│ ├── components              组件目录
│ ├── directive               自定义指令
│ ├── http
│ │  └── http.js              接口请求封装
│ ├── libs                    工具箱
│ │  └── util.js              常用工具类
│ ├── locale                  语言配置
│ ├── mock                    mock数据目录
│ ├── views                   页面目录
│ ├── router                  前端路由
│ │ └── index.js
│ ├── vuex                    vuex状态管理
│ │  └── store.js
│ ├── App.vue                 根组件
│ └── main.js                 入口js文件
│
├── static                    纯静态资源，不会被webpack构建
│
├── index.html                入口页面
│
├── .babelrc                  ES6语法编译配置
│
├── .editorconfig             定义代码格式
│
├── .gitignore                git 上传需要忽略的文件
│
├── .postcssrc.js             指定使用的 css 预编译器，默认配置了 autoprefixer
│
├── package.json              项目基本信息
│
└── README.md                 项目介绍

• Vue3-cli

Project
├── public                    纯静态资源，不会被webpack构建
│ └── index.html              页面入口文件
│
├── dist                      打包后的目录
│
├── node_modules              项目依赖包
│
├── src                       项目源码目录
│ ├── api
│ │  └── api.js               接口文件
│ ├── assets                  资源目录，这里的资源会被webpack构建
│ │  ├── css                  第三方css文件，全局css文件
│ │  ├── fonts                字体
│ │  ├── less                 全局less
│ │  ├── sass                 全局sass
│ │  └── images               图片
│ ├── components              组件目录
│ ├── directives              自定义指令
│ ├── http
│ │  └── http.js              接口请求封装
│ ├── libs                    工具箱
│ │  └── util.js              常用工具类
│ ├── locale                  语言配置
│ ├── mock                    mock数据目录
│ ├── views                   页面目录
│ ├── router                  前端路由
│ │ └── index.js
│ ├── vuex                    vuex状态管理
│ │  └── store.js
│ ├── App.vue                 根组件
│ └── main.js                 入口js文件
│
├── .browserslistrc           配置兼容浏览器
│
├── .eslintrc.js              ESlint配置文件
│
├── .editorconfig             定义代码格式
│
├── .babelrc                  ES6语法编译配置
│
├── .gitignore                git 上传需要忽略的文件
│
├── .postcssrc.js             指定使用的 css 预编译器，默认配置了 autoprefixer
│
├── babel.config.js           babel配置文件
│
├── jsconfig.json             js项目
│
│── package-lock.json         项目版本锁定配置
│
├── package.json              项目基本信息
│
├── README.md                 项目介绍
│
└── vue.config.js             项目可选配置文件

3. Project operation mechanism and code comments

(1) main.js

(2) App.vue

(3) permission.js

• Under src, in addition to main.js and App.vue, there are two files, permission.js and settings.js
• permission.js: file that controls page login permissions
• settings.js: Configuration of some project information
  • title(project name)
  • fixedHeader(fixed head)
  • sidebarLogo(Show left menu logo)

(4) Vuex structure

• Vuex uses modules to manage shared state. The architecture is as follows
  

(5) SCSS

• Definition: Both sass and scss are css preprocessing languages. scss is a new syntax introduced by sass3, and its suffixes are .sass and .scss respectively. The writing specifications of scss are basically the same as css. Sass has strict indentation specifications and does not have {} and ;
• Plugin:easy sass
• Nested syntax: usage is the same as less
• &Parent selector: To set for a specific child element, you need to use & to eliminate spaces
• Variables: scss uses $ symbols to identify variables, while less uses @ to identify variables.
  • Scope: The variable is defined within the scss rule block, then the variable can only be used within this rule block
• src alias: The src alias defined in vue is @, which must be preceded by when used in scss~
  

(6) icons

4. Establish a remote Git repository and complete the initial submission

(1) Establish a remote warehouse

• Just create a new warehouse

(2) Submission of local projects

• Steps

$ git init  // 本地初始化 git 项目
$ git add . // 将文件从工作区添加到暂存区
$ git commit -m '人资项目初始化'  // 将暂存提到本地仓库
$ git log   // 查看版本日志
$ git status -s // 查看文件状态
$ git remote add origin <远程仓库地址>  // 本地仓库与远程仓库关联
$ git remote -v  // 查看本地仓库的远程仓库地址映射
$ git branch -M main // 远程仓库添加主分支
$ git push -u origin main // 将 main 分支推送到 origin 所代表的远程仓库地址

• Note: Cloning the file is required删除原 .git 文件夹 to avoid conflict with the original submission record

5. Introduction to API module and request encapsulation module

(1) Axios interceptor

• Definition: axios is a third-party tool for network requests that can intercept requests and responses.
• Create an axios instance via create

// 创建了一个新的axios实例
const service = axios.create({
    
    
  baseURL: process.env.url, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 超时时间
})

• Request interceptor: handling token统一注入问题

service.interceptors.request.use(
	config => {
    
    },
	error => {
    
    }
)

• Response interceptor: handle the returned 数据异常 and 数据结构

service.interceptors.response.use(
	response => {
    
    },
	error => {
    
    }  

(2) Separate packaging of api modules

• Place all网络请求 in the api directory for unified management and divide them by modules