vue2 项目

杂项

1.目录分析
	1.放在 public 文件夹下的 文件 js 或者css 不会被打包
	2.src
		1.asset
2.配置
	1.在执行serve命令时候 自动打开浏览器 --open
		  "scripts": {
			"serve": "vue-cli-service serve --open",
		  }
	2.为了不每次用 . .. 可以配置 /src发别名 在 jsconfig.json
				{
				  "compilerOptions": {
					"target": "es5",
					"module": "esnext",
					"baseUrl": "./",
					"moduleResolution": "node",
					"paths": {
					  "@/*": [
						"src/*"
					  ]
					},
					"lib": [
					  "esnext",
					  "dom",
					  "dom.iterable",
					  "scripthost"
					]
				  }
				}
		2.在js种 @ 打头表示 src
		3.如果想在css中也用 @  需要加 ~@
3.event.target.dataset 可以获取 标签 自定义属性 对象
		<a data-wang="hello" id="adata">test data set</a>
		var o = document.getElementById("adata") //{wang: 'hello'}
		console.log(o.dataset)
4.项目的发布
	1.以腾讯云为例
		1.打包 不要map
		2.购买云服务器 修改安全组
		3.用Xshell 操作 linux 服务器
		4.安装并配置 nignx
			1.xshell 进入 etc 进行安装配置
				1.如果没有安装过 只有四五个文件
				2.安装 yum install nginx
				3.安装后 编辑配置 nignx.conf 解决以下问题
					1.输入ip后能访问到 网页
						location /{
						  root /root/zhangsan/www/abc.com/dist;
						  index index.html;
						  try_files $uri $uri/ /index.html;
						}
					2.访问外网地址
						location /api{
						  proxy_pass http://111.11.111.111;
						}
					3.错误
						error_page 404 /404.html;
						location = /404.html{}
						error_page 500 502 503 504 /50x.html;
						location = /50x.html{}
				4.nignx 启动服务
					1.service nignx start
5.axios 专题 结果是 promise
	1.get 请求带参数
		export function getData(data) {
			return request({
				url: '/abc',
				method: 'get',
				params: { ...data, action: "get_knowledge" }
			})
		}
	2.post 请求
		export function getData(data) {
			return request({
				url: '/abc',
				method: 'get',
				data: { ...data, action: "get_knowledge" }
			})
		}
	3.关于

路由

路由传参

1.传参的几种形式
	1.页面可以通过 this.$route.params.keyworws 和 this.$route.query.keyworws 获取
		1.params 传参 路由配置
			1.path:/search/:nokeywords [占位]
			2.如何指定 params 可传可不传 加? path:/search/:nokeywords?
		2.params 传参 如果 传过来 的字符串是 空的 会导致 匹配不到 路径错误 所以需要处理
			1.在传参后面 || undefined 传了 undefined 路径是正常的
	params:{
			  keywords:this.keywords || undefined,
			}
	2.模板字符串形式 同时给 params 和 query 传参
		1.this.$router.push(`/search/${this.keywords}?k=${this.keywords.toUpperCase()}`)
	3.对象传参
		  this.$router.push({
			name:"search",
			params:{
			  keywords:this.keywords,
			},
			query:{
			  k:this.keywords.toUpperCase()
			}
		  })
		2.通过对象传参 不能用path路径 只能用 name 否则程序 崩溃

后台管理模板

1.https://github.com/PanJiaChen/vue-admin-template.git 简洁模板
	1.需要配合 node 16 版本 比较高的版本没法运行
	2.文件分析
		1.SideBar 里面有多少个导航 是 路由个数决定的
			1.在SideBar 下面 index.vue 里面
				<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
				2.这一句把路由里面配置的项目 都循环渲染到 侧边导航
		2.NavBar
			1.在LayOut 下面 Navbar.vue 里面 有 这里面右侧的 logout 菜单 删除每必要的
		3.在 router 文件夹 下 index.js 里面 配置的各种路由 [含左侧导航]
			1.路由配置好后 必须二级路由才能在 AppMain 中显示 一级 路由不行
				  {
					path: '/kp',
					name: 'Kp',
					component: Layout,
					meta: { title: 'Knowledge Payment', icon: 'el-icon-s-cooperation' },
					children: [{
					  path: 'list',
					  name: 'List',
					  component: () => import('@/views/knowledge-payment/list'),
					  meta: { title: 'List', icon: 'el-icon-s-fold' }
					}, {
					  path: 'add',
					  name: 'Add',
					  component: () => import('@/views/knowledge-payment/add'),
					  meta: { title: 'Add', icon: 'el-icon-circle-plus-outline' }
					}]
				  },
		4.src/settings.js 里面 配置着 后台管理 是否有 logo 和 表头 是否固定等等
			1.在 src\store\modules\settings.js 里面 导入了 上面的设置 并作为 设置的 仓库 挂入到 store 里面
	3.在 Element UI 中 有时候 想修改 他的显示样子 除了css 想添加结构 怎么才能拿到他的 数据呢 E UI 用了作用域插槽的方式
		1.这里的 scope1 包含哪些东西呢 
			  <el-table-column prop="price" label="价格">
				<template slot-scope="{row,column,$index}">
				  <span> {{ row }}</span>
				</template>
			  </el-table-column>
			1.row 为 内容对象
			2.column 为表所有的 meta 数据 包含所有的自定义属性 就是在 用这个标签时候 传递的属性
			3.$index 当前序号
	4.this.$message("delete successful") Element UI 绑定的一个 信息框函数
		1.消息提示 分很多种
			this.$message({
			  message: '恭喜你，这是一条成功消息',
			  type: 'success'/'warning'
			});
				this.$message.error('错了哦，这是一条错误消息');
		2. 三个点省略号 显示
			  <el-table-column label="问题" prop="question" show-overflow-tooltip>
			  </el-table-column>
	5.this.$confirm 实例
			openConfirmDialog() {
			  this.$confirm(
				//消息正文
				"检测到未保存的内容，是否在离开页面前保存修改？",
				//左上角标题
				"确认信息",
				{
				  distinguishCancelAndClose: true,
				  confirmButtonText: "保存",
				  cancelButtonText: "放弃修改",
				}
			  )
				.then(() => {
				  this.$message({
					type: "info",
					message: "保存修改",
				  });
				})
				.catch((action) => {
				  this.$message({
					type: "info",
					message:
					  action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
				  });
				});
			},
	6.E UI 的 卡片 标签
		<el-card class="box-card">
		  <div v-for="o in 4" :key="o" class="text item">
			{{'列表内容 ' + o }}
		  </div>
		</el-card>
	7.el-tag 标记
		<el-tag
		  v-for="tag in tags"
		  :key="tag.name"
		  closable
		  :type="tag.type">
		  {{tag.name}}
		</el-tag>
	8.el-tooltip 带小箭头提示
			<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
			  <el-button>上左</el-button>
			</el-tooltip>

后台管理系统 端口和ip的配置

1.端口默认在 vue.config.js
	// port = 9528 npm run dev OR npm run dev --port = 9528
	const port = process.env.port || process.env.npm_config_port || 9528 // dev port




2.https://github.com/PanJiaChen/vue-element-admin.git 加强版