# servent

**Repository Path**: shao-mu/servent

## Basic Information

- **Project Name**: servent
- **Description**: 巩固 Vue 基础中所学的知识
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-05
- **Last Updated**: 2023-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# server

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


###  ESLint
ESLint是一个代码检查工具 用来检查你的代码是否符合指定的规范
ESLint插件可以自动修复部分代码错误

### 安装element-ui
由于npm i element-ui -S 存在版本问题 因此借助yarn
  # 安装yarn
   npm install -g yarn
  # 安装element-ui   
  yarn add element-ui
  # 运行项目
  yarn serve


### 项目托管到git

# 1.初始化本地仓库  
  git init
# 2.暂存当前目录下所有变化的文件 到内存
  git add .
# 3.本地提交
  git commit -m '提交说明'
# 4.新建本地仓库
# 5.运行命令（已有本地仓库最后两行命令）
  git remote add origin 远程仓库地址(自己去网页看)
  git push -u origin master
# 6.上传成功

# 新旧项目-以后提交和推送
先本地提交保存（暂不保存到远程仓库上）
  git add .
  git commit -m '提交说明,一定要写清楚,方便以后回滚'
要推送到远成的话 执行这句
  git push

# 项目克隆或拉取
本地没有git仓库和代码 需要克隆
注意: http/https开头的地址, 需要账号密码才能克隆/推送
注意: git@开头的地址, 需要ssh秘钥文件配置好, 才能免账号密码克隆/推送
  git clon 远程git仓库地址
多人协同开发一个项目 别人推送了 以后直接拉取更新即可
前提：你本地有变化必须暂存提交后 才能拉取
  git pull



### 路由懒加载
{
    path: 'reg',
    // webpack提供import函数来路由懒加载导入组件
    // 路由懒加载 就是页面路由路径切换到/reg 才去加载对应组件代码
    // 好处：让首页加载文件体积更小 打开更快
    component: () => import('@/views/register')
  }



### 自定义校验规则
validator

 

### axios传参params,data
params的对象参数名和值，axios源码会把参数和值，拼接在url？后面给后台（query查询字符串）
data的对象参数名和值，axios源码会把参数和值，拼接在请求体里（body参数）


### 登录实现核心流程
点击登录按钮，实现登录逻辑
核心思想：通过表单校验，收集用户输入内容，调用接口带给后台验证，返回响应结果，前端给用户提示结果


### vuex
# vuex默认是存储到内存中的 刷新页面数据会丢失（不会持久化）
vuex的插件包叫做vuex-persistedstate@3.2.1版本(配合vue2使用, 默认最新版是配合vue3使用)  可以使vuex持久化存储
# 安装    yarn add vuex-persistedstate@3.2.1
页面刷新之后 token还在


### 在组件标签上绑定的所有事件（包括原生事件的名字click，input等等） 都是自定义事件 都需要组件内$emit触发执行
### 万一组件内不支持这个原生事件名字 解决： @事件名.native="methods里方法名"    .native给组件内跟标签，绑定这个原生的事件


### 保存之后解决自动加逗号 分号 双引号的问题
# 根目录下创建文件 .prettierrc.json
# 输入 
{
    "singleQuote": true, // 双引号变单引号
    "semi": false, // 去除分号
    "trailingComma": "none" // 去除都号
}



### 目标: 选择的图片文件 要给到img标签上做纯前端的浏览
# img标签的src值
1. 只能是图片的"连接地址"(外链http://开头,图片文件相对路径)
2. 图片的base64字符串(而且字符串还必须是data:image/png;base64, 图片转base64字符串)
# 解决1:
  文件 => 内存临时地址(这个地址只能在js内存中 不能发给后台)
  语法: URL.createObjectURL(文件)
  返回值: 内存临时地址
# 解决2:
  文件 -> base64字符串(此字段是可以发给后台的)


  ### 如果用同一个按钮，想要做状态区分
  1. 定义一个标记变量isEdit(true编辑，false新增),还要定义本次要编辑的数据唯一id值
  2. 当点击修改的时候，isEdit改为true，editId保存要修改的数据id
  3. 当点击新增的时候，isEdit改为false，editId置空
  4. 再点击保存按钮时，就可以用isEdit变量做区分了


  ### await async
  # 1.await只能用在async修饰的函数内
  async修饰: 就是在当前函数名左边加async关键字,如果没有函数名,在形参的左边加async
  原因: async修饰的函数就是异步函数,如果此函数被调用,总是返回一个promise对象,而且本次函数调用因为是异步函数,所以外边的同步代码继续执行,而awair暂停代码只能async函数内的,等待await后边异步结果
  # 2. await只能拿到成功的结果并放行往下走,如果失败内不会向浏览器控制台抛出错误并不会让await往下走代码
  # 3. await后面的promise的对象的拒绝状态(错误)如何捕获呢
  方法1: try{} catch(err){}
  方法2: 用promise的链式调用,而且在catch里return的非promise拒绝状态的对象值,都会当做成功的结果返回给原地新的promise对象结果 ----.catch((err) => err)


  ### scoped
  属性作用:让style里的选择器,只能选中当前组件标签(保证样式的独立性)
  原理: 多加了一个data-v属性选择器
  注意: scoped只会1给当前组件所有原生标签添加data-v-hash值属性,还会给组件标签内跟标签添加,组件内的标签不会添加


  ### 图片路径
  # webpack会把图片变为一个base64字符串/在打包后的图片临时地址
  标签和样式中,引入图片直接写"静态路径"(把路径放在js的vue变量里再赋予是不行的)
  原因: webpack分析标签的时候,如果src的值是一个相对路径,他会帮我们找到那个路径的文件一起打包,打包的时候分析文件的大小,小图会转成base64字符串再赋予给src,大图换个途径给img的src显示
  # 解决: "JS里引入图片,就用import引入",让webpack把它当作模块数据,是转换成打包后的图片路径还是base64字符串


 ### 富文本
 带内容和样式的标签字符串, 一般用于自带排版布局的内容的, 例如文章详情, 商品详情
 安装:  yarn add vue-quill-editor

 // 入口文件导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 全局注册富文本编辑器
Vue.use(VueQuillEditor)


### 格式化时间
安装   yarn add dayjs

// 入口文件导入dayjs方法
import dayjs from 'dayjs'

// 定义时间格式化函数
Vue.prototype.$formatDate = (dateObj) => {
  return dayjs(dateObj).format('YYYY-MM-DD HH:mm:ss')
}



### .sync修饰符

简单介绍:
一个组件需要提供多个双向绑定的属性时使用，只能选用一个属性来提供 v-model 功能，但如果有其他属性也要提供双向绑定，就需要.sync
详见:
https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6


### 为何后端返回图片链接地址的半截的
原因: 因为服务器的域名随时可能来回变化,所以数据库里的地址只有相对路径
要求: 前端请求此图片的时候 后端告诉图片文件真身所在的服务器域名,前端自己拼接前缀


### 打包相关问题
问题:打包完成后出现404问题
原因: 
默认打包,index.html引入其他打包的文件使用的是绝对地址
地址是以/开头(要找到当前index.html打开时所在服务器的跟地址(文件夹)),
解决: 1.确保打包完的文件的跟地址就是dist  (不现实)
      2. webpack的配置项publicPath(控制index.html引入其他资源前缀地址),
      publicPath (vue.config.js):
      默认值 '/' 确保开发环境下 是这个值 因为开发服务器会把所有打包在内存里边的而且作为服务器的根目录文件夹,绝对地址
      生产环境准备上线 就得用相对地址 publicPath: './'
代码: 
// 可以影响打包时index.html引入其他资源的相对路径
// publicPath: './'
// ./可以让开发环境和生产环境都正常使用 为了严谨一些 开发环境: '/' 生产环境: './'
// 可以让脚手架环境 自己来决定用哪个值(根据敲击命令判断)
publicPath: process.env.NODE_ENV === 'development' ? '/' : './',



### 打包发布-减少包体积
例如:让 webpack 不打包 vue element 等等

先找到 vue.config.js， 添加 externals 项，具体如下

此选项作用, 告诉webpack排除掉这些包, 不进行打包

==一定要去修改掉引入Element用的变量名(改为ELEMENT), 这里要匹配去替换==

==因为cdn里的源代码配置在ELEMENT这个变量上==


 configureWebpack: {
  // provide the app's title in webpack's name field, so that
  // it can be accessed in index.html to inject the correct title.
   <!-- name: name, -->
  externals: {
    // 基本格式：
    // '包名' : '在项目中引入的名字'
    'echarts': 'echarts',
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'dayjs': 'dayjs',
    'element-ui': 'ELEMENT',
    'vue-quill-editor': 'VueQuillEditor',
    'vuex-persistedstate': 'createPersistedState'
  },
  <!-- resolve: {
    alias: {
      '@': resolve('src')
    }
  } -->
}

打包运行 项目报错 
因为webpack不会再打包这些第三方代码了, 所以运行时缺少他们, 我们用cdn链接的方式引入到html里参与运行


### 打包发布---了解 CDN
CDN全称叫做“Content Delivery Network”，中文叫内容分发网络。我们用它来提高访问速度。
1. 官网: https://unpkg.com/

2. 网址输入 unpkg.com/:package@:version 
例如:   https://unpkg.com/vue@2.6.14/dist/vue.js   这个就是要引入的外部连接
3. 在原工程的html文件中引入 
4. 在头部引入样式

此时可以正常运行

但是

这样的话 在开发环境运行 也有第三方的cdn地址 导致第一次的请求速度有点慢   所以开发环境下 还是要让wepback引入本地的node_modules那些第三方包

解决:
1. 在**vue.config.js**文件中 判断是生产环境 还是开发环境
代码:
// 需要排除的包对象
let externals = {}
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如何是生产环境，需要执行以下逻辑
if (isProduction) {
  externals = {
    /**
      * externals 对象属性解析：
      * '包名': '在项目中引入的名字'
      * 以 element-ui 举例 我再 main.js 里是以
      * import ELEMENT from 'element-ui'
      * Vue.use(ELEMENT)
      * 这样引入的，所以我的 externals 的属性值应该是 ELEMENT
      * 一定要去main.js设置
    */
    'echarts': 'echarts',
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'dayjs': 'dayjs',
    'element-ui': 'ELEMENT',
    'vue-quill-editor': 'VueQuillEditor',
    'vuex-persistedstate': 'createPersistedState'
  }
}

2. 在**vue.config.js**文件中
// 需要配置的CDN链接
let CDN = { css: [], js: [] }

3. 在**vue.config.js**文件中
CDN = {
    css: [  //原html的css样式连接
      'https://unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.core.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.snow.css',
      'https://unpkg.com/quill@1.3.7/dist/quill.bubble.css'
    ],
    js: [   //原html的js样式连接
      'https://unpkg.com/echarts@5.3.2/dist/echarts.min.js',
      'https://unpkg.com/vue@2.6.14/dist/vue.js',
      'https://unpkg.com/vue-router@3.5.1/dist/vue-router.js',
      'https://unpkg.com/vuex@3.6.2/dist/vuex.js',
      'https://unpkg.com/axios@0.27.2/dist/axios.min.js',
      'https://unpkg.com/dayjs@1.11.3/dayjs.min.js',
      'https://unpkg.com/element-ui@2.15.8/lib/index.js',
      'https://unpkg.com/quill@1.3.7/dist/quill.js',
      'https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js',
      'https://unpkg.com/vuex-persistedstate@3.2.1/dist/vuex-persistedstate.umd.js',
    ]
  }

4. 在**vue.config.js**文件中
chainWebpack (config) {
    // 注入cdn变量(打包时执行)
    config.plugin('html').tap(args => {
      args[0].cdn = CDN // 配置cdn给插件
      return args
    })
  }

5. 在html中
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>">
  <% } %>

  <!-- 引入js -->
  <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
    <% } %>



### 打包总结
# 1. publicPath: 影响的是打包
  情况1: 开发环境 值: '/'
  情况2: 生产环境 值: './'  (才能确保dist/index.html相对路径下访问)
# 2. dist瘦身: 影响dist的体积
  情况1: 开发环境
  (1): externals无值(不排除第三方包)
  (2): index.html里不引入cdn地址(用本地包)
  情况2: 生产环境
  (1): externals有值(排除第三方包)
  (2): index.html里引入cdn地址(动态引入第三方包)