day04 kuffy前台搭建

一、kuffy前台搭建

1、vue环境

# 在cmd中执行

1.傻瓜式安装node: 
官网下载：https://nodejs.org/zh-cn/
    测试：node-v
    v16.14.0

2.安装cnpm: 
>: npm install -g cnpm --registry=https://registry.npm.taobao.org 
 # 因为npm比较慢，用淘宝的cnpm来替换npm

3.安装vue最新脚手架: 
>: cnpm install -g @vue/cli

注：如果2、3步报错，清除缓存后重新走2、3步
>: npm cache clean --force

2、创建项目

"""
前提：在目标目录新建luffy文件夹
>: cd 建立的luffy文件夹
>: vue create luffycity
"""

3、用pycharm打开

1、在terminal:
cd luffycity
npm run serve

2、配置pycharm

4、目录介绍

"""
├── luffycity
	├── public/          			# 项目共有资源
		├── favicon.ico				# 站点图标
		└── index.html				# 主页
    ├── src/      					# 项目主应用，开发时的代码保存
    	├── assets/      			# 前台静态资源总目录
    		├── css/				# 自定义css样式
    			└── global.css		# 自定义全局样式
    		├── js/					# 自定义js样式
				└── settings.js		# 自定义配置文件
			└── img/				# 前台图片资源
		├── components/    			# 小组件目录
		├── views/  				# 页面组件目录
		├── App.vue	    			# 根组件
		├── main.js	    			# 入口脚本文件
		├── router    		
			└── index.js			# 路由脚本文件
		store	    		
			└── index.js			# 仓库脚本文件
    ├── vue.config.js	    		# 项目配置文件
    └── *.*							# 其他配置文件
"""

# 任何组件都有三部分
template ：html相关的
style	:写css相关
script	：写js相关的

二、文件修订：目录中非配置文件的多余文件可以移除

1、App.vue

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

2、router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

3、Home.vue

<template>
    <div class="home">
    </div>
</template>

<script>
    export default {
        name: 'home',
        components: {
        },
    }
</script>

四、全局配置：全局样式、配置文件

1、assets/css/global.css

# 清除所有css样式
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}

2、assets/js/settings.js

export default {
    base_url: 'http://127.0.0.1:8000'
}

3、main.js

// 配置全局样式
import '@/assets/css/global.css'

// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在所有需要与后台交互的组件中：this.$settings.base_url + '再拼接具体后台路由'

4、总结

# 1 创建项目
 vue create luffy_front
    
# 2 使用pycharm打开，配置可以使用点击启动

# 3 删除App.vue中的代码
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

# 4 删除 Helloworld.vue 和About.vue
# 5 修改  router--index.js，删掉 About的路径

# 6 配置全局css--》assets--》css--》global.css
/* 声明全局样式和项目的初始化样式 */
/*
清除掉所有标签的默认样式
 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}

# 7 在main.js中引入
// 引入写的全局css global.css
import './assets/css/global.css'

# 8 安装axios
npm install axios

# 9 在main.js中引入
import axios from "axios";
// 原型,把axios放到Vue的原型中
// 以后在vue对象中直接通过  this.$axios 拿到的就是axios
Vue.prototype.$axios=axios

# 10 编写配置文件    assets---》js---》settings.js
export default {
    base_url:'http://127.0.0.1:8000'  // 后端地址
}

# 11 在main.js中配置
import settings from "./assets/js/settings";
Vue.prototype.$settings=settings


# 12 以后在组件中使用
     created() {
            this.$axios.get(this.$settings.base_url + '/home/test2').then(res => {
                console.log(res.data)
            })
 
        }