Vue-项目开发1

各个文件夹的作用

mock文件夹使是一个虚拟的服务端，可向其中请求数据

assets文件夹放的是图片和样式文件

business文件夹是用来通信的，主文件request.ts中是对于axios通信的封装，其余文件分别是根据需求写入的向服务端请求数据的代码

components文件夹中放的是 所有的子路由文件

custom文件夹放入的是自定义指令的文件

interface文件夹放入的是接口文件

router文件夹放入的是路由文件，index.ts是主路由页面，其余是子路由页面和动态生成路由文件

stores文件夹中放入的是 pinia仓库，用来共享一个全局状态，用来存储一些服务端返回的数据

views文件中放入的是主路由页面

App.vue 是最外层的路由页面

main.ts 用来引入下载的插件和一些自定义的指令，并使用它们

项目流程

`什么是环境`
● 对前端来说不同的环境，代表不同的接口地址，切换环境就是切换不同的接口地址
● 生产环境 用户真实使用的环境
● 预发环境或者说uat环境 客户演示，数据比较真实，会定期同步生产环境的数据
● 测试环境 测试环境往往会有多个，用户测试代码功能

开发环境   			前端 ip    服务端ip
测试环境             前端ip     服务端ip
线上环境（正式环境）  前端ip     服务端ip

`项目线上出现问题的解决流程	(面试必问)`
● 从master（生产分支）切出一条 hot_fix (分支名字一定要说对) 分支，拉倒本地，修复完成后，提交到hot_fix分支，然后合并到uat分支（合并到uat分支就是发布到uat环境），然后找个时间发布到生产环境。一般来说我们修复完，提交到hot_fix分支，剩下的事情组长负责

`项目如何解决跨域`
● 本地开发如何解决
  ○ 项目的脚手架里面配置代理 vite 和 webpack 的配置方式 几乎一致
● 项目部署上线如何解决
  ○ 使用nginx做代理，在nginx里面配置proxy_pass 代理跨域

项目搭建

1.新建项目
用创建vue的第二种方法
npm create vue
	1)输入项目名称
	2)输入包名
     3)根据要求选择需要项
     (目前选择顺序是：是 否 是 是 否 不需要 否 否)

2.进入到新建项目的文件夹中 npm i 下载一下

3.删除一些内容，改一些文件的名字  
	修改HomeView.vue  为MainStore.vue
	在router下重新导入
	然后 npm run dev 开启服务
// 以上搭建好了根项目路径

4.安装 Element Plus
	1)下载 npm i element-plus

	2)下载 Element Plus 做全局引入的两个插件
npm i -D unplugin-vue-components unplugin-auto-import

	3)在vite.config.ts 文件下写入下面内容
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   然后在plugins 内放入以下内容
        AutoImport({
          resolvers: [ElementPlusResolver()],
          imports: ['vue', 'vue-router'],
          dts: 'auto-imports.d.ts'
        }),
        Components({
          dirs: ['src/components', "src/views"],
          extensions: ['vue', 'tsx'],
          dts: 'components.d.ts',
          resolvers: [ElementPlusResolver()],
        })
	  4)在main.js 中写入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
 // 加入之后 若是终端报错 重启以下服务

5.安装 Element Plus 图标库
	1) 下载 npm i @element-plus/icons-vue

	2) 在src下新建一个文件夹 icons--> 新建一个文件 ElementIcons.ts
			ElementIcons.ts 中写入以下内容
// { } 写入使用的图标的名字
import { } from '@element-plus/icons-vue'
export default{ }
	3)在main.js 中写入
import ElementIcons from "@/icons/ElementIcons.ts"  
for (const [key, component] of Object.entries(ElementIcons)) {
  app.component(key, component)
}


6.在vite.config.ts 文件下的 defineConfig中 添加以下内容
// 更改服务端口，并设置代理
server: {
    port: 5000,
    proxy: {
      "/a": {
        // 这里是要访问的实际网站host和port
        target: "http://localhost:4000/",
        changeOrigin: true,
        // 需要将当前/a从地址中去掉
        rewrite: path => path.replace(/^\/a/, "")
      }
    }
  }
// 更改之后重启服务器


7.设置pinia的持久化
	1) 下载 npm i pinia-plugin-persistedstate
	
	2) 在main.js 中写入
import Persistedstate from "pinia-plugin-persistedstate"
	并把 app.use(createPinia()) 改为以下内容
    	const pinia = createPinia();
        pinia.use(Persistedstate)
        app.use(pinia)
	
	3) 把stores文件夹中文件改名 为 MainStore
    	然后创建一个 UserStore.ts 文件  根据文件名字 修改文件中内容的名字
        
     4)  在每个文件中的defineStore中添加以下内容
            {
              persist: {
                key: "user", // 根据需求改名字
                storage: localStorage
              }
            }
// 以上 整个框架基本上搭建完成

Mock的使用 假数据

作用: 生成随机数据，拦截 Ajax 请求

1.下载 npm i mockjs

2. 配置接口文档
在最外层新建一个 mock 文件夹
在文件夹下 创建四个文件 以后使用
auth.ts	
film.ts	
role.ts	
user.ts
在四个文件内分别放入老师给的mock数据
	// 数据的路径
https://www.yuque.com/xietian-mdagn/rthyzt/bgq0n6t0mlhy1lt8#sDlll

3.搭建 mock服务
	下载	npm i vite-plugin-mock

4.在vite.config.ts 文件下写入
import {viteMockServe} from "vite-plugin-mock"
在Components 后执行viteMockServe()

5.下载 npm i axios

6.在src下新建文件夹 business -->新建一个文件 request.ts
	在 request.ts 中配置 axios
    import axios from "axios";
    const instance = axios.create({
      timeout: 4000,
      baseURL: import.meta.env.VITE_APP_URL
    })

    // 拦截器
    instance.interceptors.request.use(request => {
      return request
    }, error => {
      return Promise.inject(error)
    })

    instance.interceptors.response.use(response => {
      return response
    }, error => {
      return Promise.reject(error);
    })
    export default instance

6.在package.json 文件下
devDependencies 中 添加 "cross-env":"^7.0.3"
scripts 中 添加 "dev": "vite --mode development",
    		   "start": "vite --mode production",
然后 npm i 下载

7.配置 env 文件
	在根文件下 创建文件 .env.develpoment 写入以下内容
    	VITE_ENV = 'develpoment'
         VITE_APP_MODE = 'develpoment'
         VITE_APP_URL = ''

	在根文件下 创建文件 .env.production 写入以下内容
		VITE_ENV = 'production'
         VITE_APP_MODE = 'production'
         VITE_APP_URL = 'http://localhost:5000/a'

// 以上就可以使用 mock

配置国际化

`简单国际化`
// App.vue
<template>
  <el-config-provider :locale="store.lang">
    <div>
      English<el-switch v-model="store.langBool"/>中文
    </div>
    <RouterView />
  </el-config-provider>
</template>

import { useMainStore } from "@/stores/MainStore.ts"
const store=useMainStore();

// MainView.vue
<template>
  <div class="m-4">
    <p>Child options expand when clicked (default)</p>
    <el-cascader v-model="value" :options="options" @change="handleChange" />
  </div>
</template>

// MainStore.ts中
	引入
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
	defineStore 内写入
const langBool=ref(false);
  const lang=computed(()=>{
    return langBool.value ? zhCn : en
  })
  return {
    langBool,
    lang
  }