【Vue项目】Vue项目基础环境搭建

一、搭建项目前的基本准备

• nodejs：当下前端工程化开发必不可少的环境,，使用 nodejs的 npm 功能来管理依赖包

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

• git：目前最为流行的分布式版本管理工具，代码的 提交, 检出, 日志 ， 都需要通过 git 完成

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

• npm 淘宝镜像：npm 的服务器位于国外，所以一般将 npm 设置成国内的淘宝镜像

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

• vscode 编辑器：目前前端开发的编码利器， 有丰富的插件系统（ vetur+ eslint），非常适合开发前端项目
  • eslint 在 vscode 中的参数配置

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

二、Vue 项目模板启动和目录介绍

（一）项目模板启动

• git 拉取基础项目模板

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

• 安装项目依赖（定位到项目目录下）

$ npm install  #安装依赖

• 启动项目

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

（二）项目目录介绍

• 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             项目可选配置文件

三、项目运行机制和代码注释

（一）main.js

（二）App.vue

（三）permission.js

• src下，除了 main.js 和 App.vue 还有两个文件，permission.js 和 settings.js
• permission.js：控制页面登录权限的文件
• settings.js：对于一些项目信息的配置
  • title(项目名称)
  • fixedHeader（固定头部）
  • sidebarLogo（显示左侧菜单logo）

（四）Vuex 结构

• Vuex 采用模块形式进行管理共享状态，架构如下
  

（五）SCSS

• 定义：sass 和 scss 均为 css 预处理语言，scss 是 sass3 引入新的语法，其后缀名是分别为 .sass 和 .scss 两种。scss 的编写规范基本和 css 一致，sass 有严格的缩进规范并且没有 {} 和 ;
• 插件：easy sass
• 嵌套语法：用法同 less
• &父选择器：针对某个特定子元素进行设置，需要用 &消除空格
• 变量：scss 使用 $ 符号标识变量，而 less 采用 @ 标识变量
  • 作用域：变量定义在 scss 规则块内，那么该变量只能在此规则块内使用
• src 别名：vue 中定义 src 别名为 @，scss 中使用时前面必须加 ~
  

（六）icons

四、建立远程 Git 仓库并完成初始提交

（一）建立远程仓库

• 新建仓库即可

（二）本地项目提交

• 操作步骤

$ 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 所代表的远程仓库地址

• 注意: 克隆文件需要删除原 .git 文件夹，避免与原提交记录冲突

五、API模块和请求封装模块介绍

（一）Axios的拦截器

• 定义：axios 作为网络请求的第三方工具, 可以进行请求和响应的拦截
• 通过 create 创建 axios 实例

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

• 请求拦截器：处理 token的统一注入问题

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

• 响应拦截器：处理返回的数据异常和数据结构

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

（二）api模块的单独封装

• 将所有网络请求放置在 api 目录下统一管理，按模块进行划分