第一章前端架构设计搭建前端环境 node 环境首先需要确保安装了node 文档地址：http://nodejs.cn

搭建前端环境

node 环境

首先需要确保安装了node

文档地址：nodejs.cn/

Vue CLI 脚手架

文档地址：cli.vuejs.org/zh/

安装方式：

npm install -g @vue/cli
# or
yarn global add @vue/cli

创建项目：

vue create manager-web

安装项目所需插件

# 安装项目生产依赖
npm install vue-router vuex element-plus axios -S

# 安装项目开发依赖
npm install sass sass-loader -D

PS:

为什么使用了element-plus而没有使用element-ui,element-plus是基于Vue 3.x的升级版本。
npm安装时-S -D作用及区别 (为了控制一下篇幅，抽成了单独的博客) 👉点击查看

制定目录结构

封装路由

Vue CLI 项目中

可以以项目插件的形式添加 Vue Router；

CLI 会覆盖你的 App.vue，因此请确保在项目中运行以下命令之前备份这个文件;

vue add router

手动封装

参考：next.router.vuejs.org/zh/guide/#j…

环境配置

文档地址：cli.vuejs.org/zh/guide/mo…

根目录下新建 .env.dev 和 .env.production 文件，作为开发环境和生产环境的配置文件

变量以 VUE_APP_ 开头，示例：

# .env.dev

VUE_APP_BASE_API='/'
VUE_APP_MOCK_API='https://www.fastmock.site/mock/dbef3a612bad60772d0d2a08d56d93b8/api'
VUE_APP_TITLE='测试环境标题'

package.json文件中，指定模式

读取配置变量

process.env.VUE_APP_TITLE

axios 二次封装

文档地址：www.npmjs.com/package/axi…

request 封装

这里的篇幅有点长，抽成了单独的博客， 👉点击查看

Storage 二次封装

这里的 Storage 指的主要是浏览器上 Local Storage 和 Session Storage

以Local Storage为例，存储的格式是 key=val，但是这个val只能是 String类型，如果存储Object类型的数据，是读不出来的。

为了防止项目大的时候，变量覆盖，引入命名空间。

实现思路：

因为引入了命名空间，所以赋值的时候，首先读一下，并转成对象格式，添加新数据后，转成字符串，存储到Storage中。

新建 /src/utils/storage.js 文件，实现存储、读取、清除等方法，然后挂载到全局；

主页结构布局

reset.css

引入/src/assets/style/reset.css文件，在App.vue中引入

<style lang="sass">
@import './assets/style/reset.css'
</style>

但是遇到了报错，报错信息如下

Syntax Error: TypeError: this.getOptions is not a function

解决方案

# 是因为sass-loader版本太高引起的，卸载，安装一下低版本就好了

npm uninstall --save sass-loader // 卸载 
npm i -D sass-loader@8.x // 安装

第一章 前端架构设计