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

曾经终败给现在 2022-02-18 10:11 298阅读 0赞

# 一.开发前准备 #

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

详情见：[https://blog.csdn.net/mrwangweijin/article/details/78106955][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，我们可以访问到默认界面

# 二. 项目目录认识 #

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

# 三.项目执行流程  #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zMTQ0OTIwMQ_size_16_color_FFFFFF_t_70 1][]

项目是一个主文件**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服务**

# 八、打包上线 #

1、改代码 去掉自己组件中的代理名，准备上传到代理指定的服务器  
2、停止node服务  
3、运行：npm run build  
4、复制dist文件夹的文件到指定服务器的static目录下

[https_blog.csdn.net_mrwangweijin_article_details_78106955]: https://blog.csdn.net/mrwangweijin/article/details/78106955
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zMTQ0OTIwMQ_size_16_color_FFFFFF_t_70]: /images/20220218/ccec867fa01440289784a2bd99e6a7eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zMTQ0OTIwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220218/1ebc9e4258ac429481fff3804995beec.png