杂项
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 加强版
