一、搭建项目前的基本准备
- nodejs:当下前端工程化开发必不可少的环境,,使用 nodejs的
npm
功能来管理依赖包
$ node -v
$ npm -v
- git:目前最为流行的分布式版本管理工具,代码的
提交, 检出, 日志
, 都需要通过 git 完成
$ git --v
- npm 淘宝镜像:npm 的服务器位于国外,所以一般将 npm 设置成国内的淘宝镜像
$ npm config set registry https://registry.npm.taobao.org/
$ npm config get registry
- vscode 编辑器:目前前端开发的编码利器, 有丰富的插件系统(
vetur
+ eslint
),非常适合开发前端项目
{
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
二、Vue 项目模板启动和目录介绍
(一)项目模板启动
$ git clone https://github.com/xxx.git project
$ npm install
$ npm run dev
(二)项目目录介绍
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 项目介绍
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 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
- 注意: 克隆文件需要
删除原 .git 文件夹
,避免与原提交记录冲突
五、API模块和请求封装模块介绍
(一)Axios的拦截器
- 定义:axios 作为网络请求的第三方工具, 可以进行请求和响应的拦截
- 通过 create 创建 axios 实例
const service = axios.create({
baseURL: process.env.url,
timeout: 5000
})
service.interceptors.request.use(
config => {
},
error => {
}
)
service.interceptors.response.use(
response => {
},
error => {
}
(二)api模块的单独封装
- 将所有
网络请求
放置在 api 目录下统一管理,按模块进行划分