900字范文 > 用python+vue+node开发单页面网站

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

时间：2021-10-17 11:29:15

一.开发前准备

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

详情见：/mrwangweijin/article/details/78106955

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

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

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

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

// 生成一个基于 webpack 模板的新项目$ vue init webpack my-project// 启动开发服务器 ctrl+c 停止服务cd my-projectnpm 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>