vue前端
前言
需要编写一个展示前景图的网站，需要具有全景图展示、上传全景图并渲染结果的功能，因此选定使用vue快速构建前端界面，使用three.js搭建全景图引擎。
页面构成如下：
页面上部是logo区和github仓库链接，页面左边是导航栏，分别对应首页、场景（包含星空、拉萨、海滩日落四个子界面）、上传预览、关于四个主要功能区。
使用vue-cli初始化项目
vue-cli是vue官方提供的脚手架，具有比较成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新。它提供一套本地测试服务器，实现了项目代码修改的热更新。集成了一套打包方案，能够快速部署生成生产环境。
初始化项目
在D:\desk\test文件夹下建立工程。
cd D:\desk\test
vue init webpack csspano
命令行会要求填写相关信息，按照提示填写即可。
启动项目
npm run dev
就可以在浏览器中打开预览了，是vue默认的初始界面。
工程结构
工程结构如图：
node_modules文件夹
vue项目的文件依赖存放在这个文件夹。
public文件夹
存放页面图标和内部资源
package.json文件
存放项目的依赖配置（比如引入vuex，element-UI）
vue.config.js文件
vue 的配置文件
yarn.lock
用来构建依赖关系树
.gitignore
git 忽略文件
src文件夹
存放 vue 项目的源代码。其文件夹下的各个文件（文件夹）分别为：
1. assets：资源文件，比如存放 css，图片等资源。
2. component：组件文件夹，用来存放 vue 的公共组件（注册于全局，在整个项目中通过关键词便可直接输出）。
3. router:用来存放 index.js，这个 js 用来配置路由
4. views：用来放主体页面，虽然和组件文件夹都是 vue 文件，但 views 下的 vue 文件是可以用来充当路由 view 的。
5. main.js:是项目的入口文件，作用是初始化 vue 实例，并引入所需要的插件。
6. app.vue:是项目的主组件，所有页面都是在该组件下进行切换的。
编写入口组件
入口组件用于放全局显示的组件，包含导航栏等公共组件。
在这个组件中编写页面的导航栏样式、LOGO样式和相关链接。
<!--app.vue-->
<template>
<div class="main" id="app" oncontextmenu="return false" style="background-color: #ffffff8a; min-height: 1100px">
<template>
<el-backtop></el-backtop>
</template>
<div class="dsr" style="width: 110%; overflow: hidden">
<a href="https://github.com/inannan423/csspano" target="_blank">
<div class="toptip">
❤ 如果你喜欢这个项目，请在Github上给我们一个STAR吧 ★
</div>
</a>
<router-link class="a" to="/"><img src="../src/assets/mylogo.png" class="mylogo" alt="" />
</router-link>
<!-- <a href="https://inannan423.github.io"><img src="../src/assets/jet.png" class="git1" target="_blank"
alt="Jetzihan" /></a> -->
<a href="https://github.com/inannan423/csspano" target="_blank"><img src="../src/assets/github.png" class="git"
alt="github" /></a>
</div>
<div style="margin-top: 107px; background-color: #ffffff; padding: 0">
<el-row :gutter="10">
<el-col :xs="4" :sm="4" :md="4" :lg="4" style="width: 210px; border-right: 0">
<el-scrollbar style="position:fixed;left: -10px; height:100%;width:230px">
<el-menu default-active="1" unique-opened="true" class="el-menu-vertical-demo" style=" min-height: 700px;">
<!-- <el-menu unique-opened="true" class="el-menu-vertical-demo" style="min-height: 1000px;"> -->
<router-link class="a" to="/">
<el-menu-item index="1"><img class="myicon" src="../src/assets/home.png" alt="" />Home
</el-menu-item>
</router-link>
<el-submenu index="2" style="color: black;">
<template slot="title">
<img class="myicon" src="../src/assets/logo.png" alt="" />
<span>场景</span>
</template>
<router-link class="a" to="/jisuang">
<el-menu-item index="2-1"> 极光星空 </el-menu-item>
</router-link>
<router-link class="a" to="/lasa">
<el-menu-item index="2-2"> 拉萨 </el-menu-item>
</router-link>
<router-link class="a" to="/haitan">
<el-menu-item index="2-3"> 海滩 </el-menu-item>
</router-link>
<router-link class="a" to="/riluo">
<el-menu-item index="2-4"> 日落 </el-menu-item>
</router-link>
</el-submenu>
<router-link class="a" to="/upload">
<el-menu-item index="3"><img class="myicon" src="../src/assets/media.png" alt="" />上传图片
</el-menu-item>
</router-link>
<router-link class="a" to="/engine">
<el-menu-item index="4"><img class="myicon" src="../src/assets/about.png" alt="" />关于
</el-menu-item>
</router-link>
</el-menu>
<a href="https://jetzihan.netlify.app" target="_blank">
<img src="./assets/jet.png" class="jets" alt="jet"></a>
</el-scrollbar>
</el-col>
<el-col class="elcol" :xs="20" :sm="20" :md="20" :lg="20" style="margin-top: 50px; margin-left: 320px">
<!-- 组件化显示内容 -->
<router-view></router-view>
<!-- 模板 -->
<!-- <a
href="https://console.cloud.tencent.com/tcb/hosting/index?envId=nannan-8gceb5nt124c014d&rid=4&moduleName=&tabId=file"><img
src="./assets/rt.png" class="rt" alt="Power."></a> -->
</el-col>
</el-row>
</div>
</div>
</template>
实现效果如下：
编写路由函数
路由函数负责分配页面的跳转逻辑。通过引入view文件夹中的页面来分配页面的路径。
import Vue from 'vue'
import engine from '../view/engine'
import jiguang from '../view/jiguang'
import haitan from '../view/haitan'
import lasa from '../view/lasa'
import riluo from '../view/riluo'
import upload from '../view/upload'
import about from '../view/about'
import Main from '../view/Main'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Main',
component: Main
},
{
path: '/engine',
name: 'engine',
component: engine
},
{
path: '/jiguang',
name: 'jiguang',
component: jiguang
},
{
path: '/lasa',
name: 'lasa',
component: lasa
},
{
path: '/haitan',
name: 'haitan',
component: haitan
},
{
path: '/riluo',
name: 'riluo',
component: riluo
},
{
path: '/upload',
name: 'upload',
component: upload
}
]
})
到这里，主要的项目配置就完成了。