用python+vue+node开发单页面网站

最新推荐文章于 2024-08-30 19:49:25 发布

Feng-sir

最新推荐文章于 2024-08-30 19:49:25 发布

阅读量1.7k

点赞数

文章标签：单页面web

本文链接：https://blog.csdn.net/weixin_31449201/article/details/89351678

版权

一.开发前准备

1.安装node：为了运行npm命令,该命令会开启网站服务器以及完成相关配置

详情见：https://blog.csdn.net/mrwangweijin/article/details/78106955

安装成功后运行：node -v(成功会显示版本号)

2.vue开发生态区提供了用node.js开发的自动化开发工具包，这个工具包可以帮我们编译单文件组件。

// 全局安装 vue-cli
npm install --global vue-cli

3.使用vue自动化工具可以快速搭建单页应用项目目录。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

// 生成一个基于 webpack 模板的新项目
$ vue init webpack my-project

// 启动开发服务器 ctrl+c 停止服务
cd my-project
npm run dev

完成以上步骤会告诉我们服务器IP：port，我们可以访问到默认界面

二. 项目目录认识

build -- 打包
config -- webpack环境的配置文件
dist -- 打包之后生成的要上传到服务器的文件
node_modules -- 模块
src -- 开发环境：components单文件组件 router配路由
static -- 静态文件：css js
index.html -- 首页

三.项目执行流程

项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

app.vue中的<router-view/> 是标签的简写形式(h5规定)，完整的是双标签那样(<router-view></router-view>)

四.添加自己的组件

src/components/ 新建自己的单文件组件 -- 路由方式显示组件 -- src/router/index.js -- 导入组件、配路由 -- 注意：路径和注册组件，name将来做路由跳转的时候才需要

//导入
import mycom1 from '@/components/mycom1'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //配置自己的路由
    {
      path: '/mycom1',  //在哪显示(/代表首页)
      name: 'mycom1',   //路由跳转用
      component: mycom1 //注册组件
    }
  ]
})

测试：localhost：8080/#/组件名（这里特别说明一下，中间会默认加#）

五.写自己的程序

1.在路由文件中我们发现默认根路径的路由是：

{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
},

这就是默认的显示页面，我们将其删除写自己的路由。

2.显示自己组件的方式（路由和标签）：

1、路由：src/components/ 新建自己的单文件组件 -- 路由方式显示组件 -- src/router/index.js -- 导入组件、配路由

注意：路径和注册组件，name将来做路由跳转的时候才需要

2.标签：写好的组件用双标签直接显示（自测小bug：如果用标签方式导入组件，组件名字首字母最好大写）

那么到底选择哪种方式呢？
如果是页面打开直接显示的并且不变标签直接显示
如果是通过单击切换显示的就配路由

六.顶部菜单

先创建顶部菜单组件，将html放入组件中

将css放在static文件夹下，在index.html文件中link进来即可(因为是单页面开发，最终只有一个页面)

同时删除app.vue中的style的css
菜单的切换效果

<template>
<ul class="nav navbar-nav">
    <li :class= "[(num==0)?'active':'']" @click="num=0"><a href="#">菜单1</a></li>
    <li :class= "[(num==1)?'active':'']" @click="num=1"><a href="#">菜单2</a></li>
</ul>     
</template>

<script>
export default {
  data:function(){
     return{num:0}     
  }
}
</script>

七.跨域请求

1.src文件夹下的main.js导入axios模块
import axios from 'axios'
Vue.prototype.axios = axios
2.服务器配置文件config/index.js 找proxyTable，字典里面加入
'/apis': {
target: 'http://localhost:7890',
changeOrigin: true,
pathRewrite: {
'^/apis': ''
}
}
3.在组件的js部分书写生命周期mounted，this.axios()
4.因为我们修改了服务器配置文件所以要重启node服务