【Vue项目】Vue项目基础环境搭建
Vue 项目基础环境搭建,从 node/git/npm/vscode 到 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 目录下统一管理,按模块进行划分
更多推荐
已为社区贡献2条内容
所有评论(0)