跳转与打包上线

介绍

        新手程序员一枚，渴望成为大神，来点关注来点赞，给我介绍几个大神也行，球球了。

---

        主要记录自己的学习过程，将之前的笔记进行整理并分享一下，有错误请指出，谢谢各位大佬爷们的观看。

        下面开始分享我的笔记

---

路由（Vue Riuter）

介绍

• 前端路由：URL中hash(#号)与组件之间的对应关系。

• #之后称作为hash

• 官方包 Vue Router

安装

• 创建项目时可以选择

• 自己安装

npm install vue-router@3.5.1

 定义

//路径
router/index.js

 

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  //此处配置
  {
    path: '/ele',
    name: 'elementView',
    component: ElementView
  },
  {
    path: '/emp',
    name: 'EmpView',
    component: () => import(/* webpackChunkName: "about" */ '../views/tlias/EmpView.vue')
  },
]

• 注意重定向

{
    // path: '/',
    // name: 'home',
    // component: HomeView
    path:'/',
    redirect: '/emp'

  },

//特定位置跳转
<router-link to="/ele">跳转</router-link>

 //在需要跳转位置添加
 <router-view></router-view>

 效果

 

打包

• 方式一

//命令行
npm run build

• 方式二

• 效果

        打包后，结果位于dist目录中，直接部署dist目录即可

上线

服务器

介绍（Nginx）

• 轻量级Web服务器

• 反向代理服务器

• 电子邮件服务器

• 特点

  • 占用内存小

  • 并发强

下载安装

• 网址：https://nginx.org/

• 目录介绍

conf~配置文件目录
html~静态资源文件目录
log~日志文件目录
temp~临时文件目录

将文件上传到html文件下

• 默认占用端口号80

解决端口号占用问题

//查找端口
netstat -ano | findStr 80

• 切换默认端口

  • 在conf中找nginx.conf

  • 下面位置配置

  效果

//本地打开 http://localhost:80/#/

---

以上是学习的第四弹笔记。 后面会慢慢更新笔记。

项目位置！！！！！

https://gitee.com/zsjnew/admin_web_project.git