4、路飞前端配置

1、路飞前台项目创建

# 1-1.使用命令行创建
vue create luffycity

# 1-2.也可以使用Pycharm的创建
打开pycharm左上角的文件，点击新建项目，选择vue.js


# 2.重构目录，目录大概为下
"""
├── 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	    		# 项目配置文件
    └── *.*							# 其他配置文件
"""

使用命令行创建vue项目之后，如果想在pycharm快速运行，需要如下配置

2、全局css和js配置

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; /* 合并边框 */
}

settings.js

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

main.js

在Vue.config.productionTip = false 这行代码下复制

// 配置全局样式(使用全局的global.css)
import '@/assets/css/global.css'

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

3、前台配置axios...等

使用axios，elementui，bootstrap，jq等组件

# 需要先安装：在前端项目目录下的终端安装

# axios前后台交互
cnpm install axios

# cookies操作
cnpm install vue-cookies 

# element-ui页面组件框架
cnpm install element-ui

# bootstrap、jquery页面组件框架
cnpm install jquery
cnpm install bootstrap@3


# 以上组件的配置：main.js
// axios的配置
import axios from 'axios'
Vue.prototype.$axios = axios;

// cookies操作
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

// element-ui页面组件框架
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

// 配置bootstrap
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'


# 配置jquery：在根路径下创建vue.config.js
const webpack = require("webpack");
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};