README.md · huangxiaolun/vue3.0+ts后台管理

# vue3.0+ts后台管理

## 项目初始准备流程

![流程图](./noteImg/image-20201214140420971.png)

建议：自己建立一个文件夹 --工作区 ，所有跟工作有关的都放在里面，文档写好

> 文档

Vue3.0 文档（中文） ：https://v3.cn.vuejs.org/api/application-config.html 
Vue3.0 文档（英文） ：https://v3.vuejs.org/api/
底层的介绍 ： https://v3.vuejs.org/guide/introduction.html 
And-design-vue： https://www.antdv.com/docs/vue/introduce-cn/

#### 软件架构

软件架构说明

#### 构建项目

全局安装脚手架
npm install -g @vue/cli

官方介绍：https://cli.vuejs.org/zh/guide/installation.html

cnpm安装 ：npm install -g cnpm --registry=https://registry.npm.taobao.org

vue/cli用于构建项目以及管理项目和依赖包的东西
Vue ui 可视化

Vue.js

版本号：vue -V

vue create xx

> 以下是没有加ts的

![image-20201214144545294](noteImg/image-20201214144545294.png)

![image-20201214145627105](noteImg/image-20201214145627105.png)

Check the features needed for your project: 
(*) Choose Vue version                                    // 视图版本
(*) Babel                                                          // ES6代码转为ES5代码。
( ) TypeScript                                                   // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）
( ) Progressive Web App (PWA) Support        // 渐进式Web应用程序
(*) Router                                                       // vue-router路由
(*) Vuex                                                          // vuex状态管理模式）
(*) CSS Pre-processors                                  // CSS 预处理器
(*) Linter / Formatter                                     // 代码风格检查和格式化
( ) Unit Testing                                              // 单元测试（程序员的角度测试）
( ) E2E Testing                                               // 测试（站在用户用度）

![image-20201214145700200](noteImg/image-20201214145700200.png)

Choose a version of Vue.js that you want to start the project with (Use arrow keys)   // 选择的版本Vue.js版开始项目时使用的
2.X                    // Vue.js 2.x
3.x (Preview)     // Vue.js 3.x

![image-20201214145711439](noteImg/image-20201214145711439.png)

路由器使用历史模式？（项目中可以配置）

![image-20201214145720903](noteImg/%E3%80%81)

选择一个CSS预处理器（选择类型）

![image-20201214145733326](noteImg/image-20201214145733326.png)

选择Eslint代码验证规则

![image-20201214145747878](noteImg/image-20201214145747878.png)

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)    // 选择什么时候进行代码规则检测
(*) Lint on save                           // 保存就检测
( ) Lint and fix on commit          // // fix和commit时候检查

![image-20201214145757645](noteImg/image-20201214145757645.png)

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  // 选择如何存放配置
> In dedicated config files  // 独立文件放置---会生成下面三个文件
  In package.json                // 放package.json里

![image-20201214145810655](noteImg/image-20201214145810655.png)

![image-20201214145820471](noteImg/image-20201214145820471.png)

是否存储当前配置：y 是，n 否

![image-20201214145829741](noteImg/image-20201214145829741.png)

名称

![image-20201214145841733](noteImg/image-20201214145841733.png)

![image-20201214145848845](noteImg/image-20201214145848845.png)

项目已创建完成

>加上ts的

![image-20201214151939581](noteImg/image-20201214151939581.png)

多了上面两个选项：第一个选项官方建议不使用 (2.0使用哪个component时使用的---2.0使用3.0语法)

#### 建立项目仓库（Github 或 Coding 或 Gitlab

1、Github
Github：http://www.github.com/（免费）
Coding：https://coding.net/（免费）
Gitlab：gitlab.com（免费30天）

2、GIT基础命令（粘贴 shift + insert）
拷备项目：git clone <仓库地址>
创建分支：git branch <name>
创建并进入分支：git checkout –b <name>
切换分支：git checkout <name>
查看状态：git status
添加所有文件：git add .
提交：git commit –m ‘这里是当前提交的描述’
拉取：git pull（拉取远程仓库代码至本地开发环境）
推送：git push（推送本地代码至远程仓库 github）
查看分支：git branch --list
查看分支（包含远程分支）：git branch –a
合并其他分支到当前分支：git merge --no-ff ‘描述’ <name>

1、项目原型评审 – 完成
2、项目第一学期开发需求 – 完成
3、项目的构建 – 完成
4、git代码版本管理 – 完成
5、项目开发

# Router路由

> 官网：https://next.router.vuejs.org/

一共有三种：一般只用前面两种

createWebHistory：创建历史记录模式的路由

![image-20201214160939959](noteImg/image-20201214160939959.png)

createWebHashHistory：创建“哈希值”历史记录模式的路由

![image-20201214160951348](noteImg/image-20201214160951348.png)

在开发环境中访问路由，两种模式都可以正常访问

在生产环境中 ,“哈希”模式可以正常访问，非“哈希”模式后端协助配置转发（白屏、404等）。

路由的方法：
addRoute 
addRoute 
afterEach 
back 
beforeEach 
beforeResolve 
forward 
getRoutes 
go 
hasRoute 
isReady 
onError 
push 
removeRoute 
replace 
resolve

##### dependencies和devDependencies的区别

生产环境：dependencies（已发布上线的环境）
开发环境：devDependencies  （develop）

--save 等价于 -S 
-S, --save 将包依赖至 dependencies（生产环境的依赖）

npm install ant-design-vue -S

--save-dev 等价于 -D
-D, --save-dev将包依赖至 devDependencies（开发环境的依赖）

npm install ant-design-vue -D

删除模块
npm uninstall <name> 删除模块，但不删除模块留在package.json中的信息
npm uninstall <name> --save 删除模块，同时删除模块 dependencies 信息
npm uninstall <name> --save-dev 删除模块，同时删除模块 devDependencies 信息

npm安装指定版本的依赖
npm install --save  react-router@2.8.1   // 2.8.1是指定的版本号

最新的稳定版

npm install ant-design-vue --save

npm install –save ant-design-vue@xx.x

npm install ant-design-vue –save-dev

Vue.config.js 配置
https://cli.vuejs.org/zh/config/

<<<<<<< HEAD
#### TypeScript

https://ts.xcatliu.com/basics/primitive-data-types.html

vue3.0中使用

**ref**：定义响应的基础数据类型,
获取值是通过 .value 获取，
const count = ref<string>("10");  // 强类型
console.log(count.value)

toRefs：将**响应式对象转换为‘ 普通对象 ’**

可以用过  对象.属性.value拿到

reactive：定义响应的对象类型
=======
##### antdv 
[](https://2x.antdv.com/components/dropdown-cn/)

#### 多语言 
https://vue-i18n-next.intlify.dev/ 
需要自己配置一些东西

#### 局部组件 svg图标

> npm install svg-sprite-loader -D

**配置**

```bash
module.exports = {
...
  chainWebpack: config => {
    // 一个规则里的 基础Loader
    // svg是个基础loader
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    // 添加要替换的 loader
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    }
...
}
```

```bash
自动化解析指定目录文件 ---写在组件里面
	export default {
		setup(){
			//获取当前svg目录所有为svg结尾的文件 
			const req = require.context('/svg',false,/\.svg$/);
			//解析获取的.svg文件的文件名称，并返回 
			const requireAll =(requireContext)=>{
			    return requireContextkeys().map(requireContext);
			};
			requireAll(req);
		}
	}

```

**拿路由拿store--都有两种方式 如下**

![image-20201228134941356](noteImg/image-20201228134941356.png)

![image-20201228135036402](noteImg/image-20201228135036402.png)

![image-20201228135050810](noteImg/image-20201228135050810.png)

![image-20201228135116979](noteImg/image-20201228135116979.png)

![image-20201228135124673](noteImg/image-20201228135124673.png)

#### getCurrentInstance  注意 （相当于this）

```vue
const {ctx，proxy = getCurrentInstance()
ctx对象仅在开发环境（属性和方法）可用，生产环境（属性可访问到，方法访问不到--->可在proxy->[[target]]可以拿到)

建议：直接使用proxy

```

# axios封装

![image-20210105140921587](noteImg/image-20210105140921587.png)

见request.js文件

# 配置域名 -解决跨域

> 同域

> 第一步

![image-20210119151446157](E:\lianxi\vue3.0+ts+后台管理\noteImg\image-20210119151446157.png)

坑：必须以`VUE_APP_名字开头`

> 第二步

```webpack
devServer: {
	  open: false, // 编译完成是否打开网页
	  host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
	  port: 8080, // 访问端口
	  https: false, // 编译失败时刷新页面
	  hot: true, // 开启热加载
	  hotOnly: false,
	  proxy: { //注意格式
	    [process.env.VUE_APP_API]: {
	        target: process.env.VUE_APP_TARGET, //API服务器的地址
	         ws:false,    //websockt
	        changeOrigin: true,
	        pathRewrite: {
				[`^${process.env.VUE_APP_API}`]: '', //查找开头为/devApi字符替换成空字符串
	        }
	    }
	  }
	}
```

> 第三步

![image-20210119151658837](E:\lianxi\vue3.0+ts+后台管理\noteImg\image-20210119151658837.png)

> 补充

![image-20210119153004095](E:\lianxi\vue3.0+ts+后台管理\noteImg\image-20210119153004095.png)

huangxiaolun/vue3.0+ts后台管理

简介

发行版

贡献者

近期动态

huangxiaolun/vue3.0+ts后台管理 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

huangxiaolun/vue3.0+ts后台管理