vue--后台管理项目-myweb5135

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue-结构

1-1 mian.js入口文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入组件

Vue.config.productionTip = false

new Vue({
  router,
  //路由挂载
  render: h => h(App)
}).$mount('#app')
//router函数把App根组件渲染在页面上；

1-2 app.vue

依次对应：
vue 结构
行为
样式

1-3 router.js

//简化初始组建
import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
 
]

const router = new VueRouter({
  routes
})

export default router

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、页面组件

1.login.vue

<template>
  <div>

      denglu
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
//支持less语法
//scoped 只在本组件生效

</style>>

ess语法 安装less-loder

安装less

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

双引号变单引号

{
  "semi": false,取消分号
  "singleQuote": true 用单引号表示字符串
}

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

三 页面展示

1： login 登录页面

2. 后台管理项目页面