-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
项目分析
简单分析 |
|---|
"""
1、业务逻辑：登录注册 - 主页（基础信息展示） - 课程页（复杂信息展示）- 课程订单生产与支付 - 上线订单生成
2、实际项目开发的技术点：
git版本控制
第三方短信认证
接口缓存 - redis数据库
celery异步任务，接口缓存异步同步数据
支付宝支付
真实服务器项目上线
3、前台：页面现成的、前后台的数据交互代码、element-ui、jq、bootstrap、原生
"""pip全局换源
代码语言：javascript复制"""
1、采用国内源，加速下载模块的速度
2、常用pip源：
-- 豆瓣：https://pypi.douban.com/simple
-- 阿里：https://mirrors.aliyun.com/pypi/simple
3、加速安装的命令：
-- >: pip install -i https://pypi.douban.com/simple 模块名
"""永久配置安装源
Windows |
|---|
"""
1、文件管理器文件路径地址栏敲：%APPDATA% 回车，快速进入 C:Users电脑用户AppDataRoaming 文件夹中
2、新建 pip 文件夹并在文件夹中新建 pip.ini 配置文件
3、新增 pip.ini 配置文件内容
"""MacOS、Linux |
|---|
"""
1、在用户根目录下 ~ 下创建 .pip 隐藏文件夹，如果已经有了可以跳过
-- mkdir ~/.pip
2、进入 .pip 隐藏文件夹并创建 pip.conf 配置文件
-- cd ~/.pip && touch pip.conf
3、启动 Finder(访达) 按 cmd shift g 来的进入，输入 ~/.pip 回车进入
4、新增 pip.conf 配置文件内容
"""配置文件内容 |
|---|
"""
[global]
index-url = http://pypi.douban.com/simple
[install]
use-mirrors =true
mirrors =http://pypi.douban.com/simple/
trusted-host =pypi.douban.com
"""虚拟环境的搭建
优点 |
|---|
1、使不同应用开发环境相互独立
2、环境升级不影响其他应用，也不会影响全局的python环境
3、防止出现包管理混乱及包版本冲突windows
Windows安装 |
|---|
# 建议使用pip3安装到python3环境下
pip3 install virtualenv
pip3 install virtualenvwrapper-win配置虚拟环境管理器工作目录 |
|---|
# 配置环境变量：
# 控制面板 => 系统和安全 => 系统 => 高级系统设置 => 环境变量 => 系统变量 => 点击新建 => 填入变量名与值
变量名：WORKON_HOME 变量值：自定义存放虚拟环境的绝对路径
eg: WORKON_HOME: D:Virtualenvs
# 同步配置信息：
# 去向Python3的安装目录 => Scripts文件夹 => virtualenvwrapper.bat => 双击MacOS、Linux
MacOS、Linux安装 |
|---|
# 建议使用pip3安装到python3环境下
pip3 install -i https://pypi.douban.com/simple virtualenv
pip3 install -i https://pypi.douban.com/simple virtualenvwrapper工作文件 |
|---|
# 先找到virtualenvwrapper的工作文件 virtualenvwrapper.sh，该文件可以刷新自定义配置，但需要找到它
# MacOS可能存在的位置 /Library/Frameworks/Python.framework/Versions/版本号文件夹/bin
# Linux可能所在的位置 /usr/local/bin | ~/.local/bin | /usr/bin
# 建议不管virtualenvwrapper.sh在哪个目录，保证在 /usr/local/bin 目录下有一份
# 如果不在 /usr/local/bin 目录，如在 ~/.local/bin 目录，则复制一份到 /usr/local/bin 目录
-- sudo cp -rf ~/.local/bin/virtualenvwrapper.sh /usr/local/bin配置 |
|---|
# 在 ~/.bash_profile 完成配置，virtualenvwrapper的默认默认存放虚拟环境路径是 ~/.virtualenvs
# WORKON_HOME=自定义存放虚拟环境的绝对路径，需要自定义就解注
VIRTUALENVWRAPPER_PYTHON=/usr/local/bin/python3
source /usr/local/bin/virtualenvwrapper.sh
# 在终端让配置生效：
-- source ~/.bash_profile使用 |
|---|
# 在终端工作的命令
# 1、创建虚拟环境到配置的WORKON_HOME路径下
# 选取默认Python环境创建虚拟环境：
-- mkvirtualenv 虚拟环境名称
# 基于某Python环境创建虚拟环境：
-- mkvirtualenv -p python2.7 虚拟环境名称
-- mkvirtualenv -p python3.6 虚拟环境名称
# 2、查看已有的虚拟环境
-- workon
# 3、使用某个虚拟环境
-- workon 虚拟环境名称
# 4、进入|退出 该虚拟环境的Python环境
-- python | exit()
# 5、为虚拟环境安装模块
-- pip或pip3 install 模块名
# 6、退出当前虚拟环境
-- deactivate
# 7、删除虚拟环境(删除当前虚拟环境要先退出)
-- rmvirtualenv 虚拟环境名称pycharm使用
新建项目 |
|---|

添加环境 |
|---|

使用环境 |
|---|

后台项目创建
创建虚拟环境 |
|---|
MacBook-pro:Virtualenvs driverzeng$ mkvirtualenv luffy安装django环境 |
|---|
## 安装django，drf和pymysql
pip install django==2.0.7
pip install djangorestframework
pip install pymysql
## 查看当前虚拟环境的包
(luffy) MacBook-pro:Virtualenvs driverzeng$ pip list
Package Version
------------------- -------
Django 2.0.7
djangorestframework 3.11.0
pip 20.1.1
PyMySQL 0.9.3
pytz 2020.1
setuptools 47.3.1
wheel 0.34.2创建django项目 |
|---|
## 先创建一个luffy的前台后台项目目录
(luffy) MacBook-pro:Desktop driverzeng$ mkdir luffy
## 进入luffy目录
(luffy) MacBook-pro:Desktop driverzeng$ cd luffy/
## 查看位置（我创建在我的桌面上了）
(luffy) MacBook-pro:luffy driverzeng$ pwd
/Users/driverzeng/Desktop/luffy
## 创建django项目，后台项目一般叫api
(luffy) MacBook-pro:luffy driverzeng$ django-admin startproject luffyapi重构目录项目
重构前 |
|---|
## 进入目录
(luffy) MacBook-pro:luffy driverzeng$ cd luffyapi/
## 查看当前目录结构
(luffy) MacBook-pro:luffyapi driverzeng$ tree
.
|____manage.py
|____luffyapi
| |______init__.py
| |____settings.py
| |____urls.py
| |____wsgi.pypycharm配置虚拟环境 |
|---|
重构目录，先使用pycharm打开项目，并且选择venv环境



创建app目录 |
|---|
创建app目录


创建apps包目录 |
|---|
将这些包移动到apps目录下，方便管理，否则目录会很乱

然后再在子luffyapi的目录下创建两个包目录，libs和utils


区分settings文件 |
|---|
在子luffy目录下创建一个settings包目录区分dev开发环境和prod生产环境。
再在settings包目录下创建两个文件，dev.py和prod.py
把源luffy的settings.py文件中的内容拷贝到dev.py中
然后将项目启动时读取原来的settings.py文件修改成读取settings包下的dev.py文件

这样配置完成之后，在pycharm中可以直接启动项目，但是...命令好像是不太行了。

因为我们需要修改manage.py文件中的settings配置
代码语言：javascript复制#!/usr/bin/env python
import os
import sys
if __name__ == "__main__":
## 修改这一行内容，原本是"luffyapi.settings"改成"luffyapi.settings.dev"
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffyapi.settings.dev")
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
raise ImportError(
"Couldn't import Django. Are you sure it's installed and "
"available on your PYTHONPATH environment variable? Did you "
"forget to activate a virtual environment?"
) from exc
execute_from_command_line(sys.argv)

改完后，项目启动成功，但是呢....上线后，在生产环境中，我们会用uwsgi调用django项目中的wsgi.py文件，所以我们还需要修改wsgi文件
代码语言：javascript复制"""
WSGI config for luffyapi project.
It exposes the WSGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/2.0/howto/deployment/wsgi/
"""
import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffyapi.settings.dev")
application = get_wsgi_application()

然后就可以删除settings.py文件了
重构后的目录结构 |
|---|
## 重构项目目录后
"""
├── luffyapi
├── logs/ # 项目运行时/开发时日志目录 - 文件夹
├── manage.py # 脚本文件
├── luffyapi/ # 项目主应用，开发时的代码保存 - 包
├── apps/ # 开发者的代码保存目录，以模块[子应用]为目录保存 - 包
├── libs/ # 第三方类库的保存目录[第三方组件、模块] - 包
├── settings/ # 配置目录 - 包
├── dev.py # 项目开发时的本地配置
└── prod.py # 项目上线时的运行配置
├── urls.py # 总路由
└── utils/ # 多个模块[子应用]的公共函数类库[自己开发的组件]
└── scripts/ # 保存项目运营时的脚本文件 - 文件夹
"""创建django的测试脚本 |
|---|
接下来，我们在scripts目录中，配置一下脚本文件，因为我们之前在学习orm的时候，使用脚本启动Django
test_django.py
代码语言：javascript复制import os, django
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffyapi.settings.dev")
django.setup()
from django.conf import settings
print(settings)配置国际化 |
|---|
在settings文件中配置国际化：
代码语言：javascript复制LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

后台项目环境配置
Django官网：TP
可以搜索logging，如果看中文可以把en替换成zh-hans
开发环境配置日志 |
|---|
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'formatters': {
'verbose': {
'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
},
'simple': {
'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
},
},
'filters': {
'require_debug_true': {
'()': 'django.utils.log.RequireDebugTrue',
},
},
'handlers': {
'console': {
'level': 'DEBUG',
'filters': ['require_debug_true'],
'class': 'logging.StreamHandler',
'formatter': 'simple'
},
'file': {
# 实际开发建议使用WARNING
'level': 'INFO',
'class': 'logging.handlers.RotatingFileHandler',
# 日志位置,日志文件名,日志保存目录必须手动创建，注：这里的文件路径要注意BASE_DIR代表的是小luffyapi
'filename': os.path.join(os.path.dirname(BASE_DIR), "logs", "luffy.log"),
# 'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/luffy.log"),
# 日志文件的最大值,这里我们设置300M
'maxBytes': 300 * 1024 * 1024,
# 日志文件的数量,设置最大日志数量为10
'backupCount': 10,
# 日志格式:详细格式
'formatter': 'verbose',
# 文件内容编码
'encoding': 'utf-8'
},
},
# 日志对象
'loggers': {
'django': {
'handlers': ['console', 'file'],
'propagate': True, # 是否让日志信息继续冒泡给其他的日志处理系统
},
}
}生产环境配置日志 |
|---|
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'formatters': {
'verbose': {
'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
},
'simple': {
'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
},
},
'filters': {
'require_debug_true': {
'()': 'django.utils.log.RequireDebugTrue',
},
},
'handlers': {
'console': {
'level': 'WARNING',
'filters': ['require_debug_true'],
'class': 'logging.StreamHandler',
'formatter': 'simple'
},
'file': {
# 实际开发建议使用WARNING
'level': 'ERROR',
'class': 'logging.handlers.RotatingFileHandler',
# 日志位置,日志文件名,日志保存目录必须手动创建，注：这里的文件路径要注意BASE_DIR代表的是小luffyapi
'filename': os.path.join(os.path.dirname(BASE_DIR), "logs", "luffy.log"),
# 'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/luffy.log"),
# 日志文件的最大值,这里我们设置300M
'maxBytes': 300 * 1024 * 1024,
# 日志文件的数量,设置最大日志数量为10
'backupCount': 10,
# 日志格式:详细格式
'formatter': 'verbose',
# 文件内容编码
'encoding': 'utf-8'
},
},
# 日志对象
'loggers': {
'django': {
'handlers': ['console', 'file'],
'propagate': True, # 是否让日志信息继续冒泡给其他的日志处理系统
},
}
}utils配置日志 |
|---|
在utils目录下创建一个logging.py文件
代码语言：javascript复制import logging
logger = logging.getLogger('django')测试日志使用 |
|---|
import os, django
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffyapi.settings.dev")
django.setup()
from django.conf import settings
print(settings)
from luffyapi.utils.logging import logger
logger.critical('测试致命错误logger')
logger.error('测试一般错误logger')
logger.warning('测试警告logger')
logger.info('测试正常信息logger')
logger.debug('测试调试信息logger')

utils添加环境变量 |
|---|
settings/dev.py
代码语言：javascript复制## 设置环境变量
import sys
sys.path.insert(0, BASE_DIR)scripts/test_django.py 生产环境中可以不配置这个文件，因为这是开发的过程中需要测试用的文件。
代码语言：javascript复制import os, django
import sys
## 添加环境变量
sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffyapi.settings.dev")
django.setup()
from django.conf import settings
print(settings)
from luffyapi.utils.logging import logger
logger.critical('测试致命错误logger')
logger.error('测试一般错误logger')
logger.warning('测试警告logger')
logger.info('测试正常信息logger')
logger.debug('测试调试信息logger')在settings文件中注册模块，也需要配置环境变量
settings/dev.py
代码语言：javascript复制## 设置环境变量
import sys
sys.path.insert(0, BASE_DIR)
APPS_DIR = os.path.join(BASE_DIR, 'apps')
sys.path.insert(1, APPS_DIR)因为我们做了目录的重构，所以我们需要把子luffyapi目录和apps目录都添加到环境变量中，这样一来，就可以直接注册项目了 。
代码语言：javascript复制INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'api',
'order',
'user',
]配置response和exception |
|---|
我们之前项目中自定义过 response 和 exception直接拿过来使用
utils/response.py
代码语言：javascript复制from rest_framework.response import Response
class APIResponse(Response):
def __init__(self, data_status=0, data_msg='ok', results=None, http_status=None, headers=None, exception=False, **kwargs):
data = {
'status': data_status,
'msg': data_msg,
}
if results is not None:
data['results'] = results
data.update(kwargs)
super().__init__(data=data, status=http_status, headers=headers, exception=exception)utils/exception.py
代码语言：javascript复制from rest_framework.views import exception_handler as drf_exception_handler
from rest_framework.views import Response
from rest_framework import status
from utils.logging import logger
def exception_handler(exc, context):
response = drf_exception_handler(exc, context)
if response is None:
logger.error('%s - %s - %s' % (context['view'], context['request'].method, exc))
return Response({
'detail': '服务器错误'
}, status=status.HTTP_500_INTERNAL_SERVER_ERROR, exception=True)
return response后台数据库配置
数据操作 |
|---|
## 创建数据库
mysql> create database luffy default charset utf8;
## 创建用户
mysql> grant all on luffy.* to luffy@'%' identified by 'Luffy123?';settings配置 |
|---|
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'luffy',
'HOST': '10.0.0.51',
'USER': 'luffy',
'PASSWORD': 'Luffy123?',
'PORT': 3306,
}
}配置使用pymysql |
|---|
luffyapi/__init__.py
代码语言：javascript复制import pymysql
pymysql.install_as_MySQLdb()数据库版本兼容问题 |
|---|
Django有些版本会导致数据库版本不兼容，需要修改源代码


建表
创建User模块 |
|---|
## 当前路径，如果不在apps目录下，一定要进入目录
(luffy) MacBook-pro:apps driverzeng$ pwd
/Users/driverzeng/Desktop/luffy/luffyapi/luffyapi/apps
## 在apps目录下创建user模块
(luffy) MacBook-pro:apps driverzeng$ python ../../manage.py startapp user创建User表 |
|---|
user/models.py
代码语言：javascript复制from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class User(AbstractUser):
mobile = models.CharField(max_length=11, unique=True)
## 头像这里，需要Pillow模块，pip install Pillow
icon = models.ImageField(upload_to='icon', default='icon/default.png')
class Meta:
db_table = 'luffy_user'
verbose_name = '用户表'
verbose_name_plural = verbose_name
def __str__(self):
return self.username注册user模块 |
|---|
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'user',
]配置media |
|---|
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'配置完，可以在子luffyapi目录下创建 media/icon

路由分发
主路由配置 |
|---|
luffyapi/urls.py
代码语言：javascript复制from django.contrib import admin
from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
## 路由分发user模块
path('user/', include('user.urls')),
## 图片上传路径，必须是正则路由
re_path('^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})
]将default.png文件放入media/icon目录下

自定义User表 |
|---|
settings/dev.py
代码语言：javascript复制AUTH_USER_MODEL = 'user.User'数据库迁移 |
|---|
(luffy) MacBook-pro:luffyapi driverzeng$ python manage.py makemigrations
(luffy) MacBook-pro:luffyapi driverzeng$ python manage.py migrate前台项目创建
node和vue环境 |
|---|
1.傻瓜式安装node:
官网下载：https://nodejs.org/zh-cn/
2.安装cnpm:
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装vue最新脚手架:
>: cnpm install -g @vue/cli
注：如果2、3步报错，清除缓存后重新走2、3步
>: npm cache clean --force
4.查看版本
MacBook-pro:luffyapi driverzeng$ vue -V
@vue/cli 4.3.1创建vue项目 |
|---|
## 进入项目目录
MacBook-pro:~ driverzeng$ cd /Users/driverzeng/Desktop/luffy/
## 创建项目
MacBook-pro:luffy driverzeng$ vue create luffycity
## 项目选择内容如下：
1. Manually select features
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
❯◉ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
2. ESLint with error prevention only
3. ◉ Lint on save
4. ❯ In package.json
5. ? Save this as a preset for future projects? (y/N) N

使用webstrom打开项目 |
|---|

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

1.在assets目录下创建css，js，img 2.删除components目录下的文件 3.在views目录下删除About.vue 4.修改router下的index.js
代码语言：javascript复制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
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router5.修改Home.vue文件
代码语言：javascript复制<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'Home',
components: {}
}
</script>6.修改app.vue文件
代码语言：javascript复制<template>
<div id="app">
<router-view/>
</div>
</template>创建启动方式 |
|---|

启动服务


新建global全局样式文件 |
|---|
assets/css/global.css
代码语言：javascript复制html, body, h1, h2, h3, h4, h5, h6, ul, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
input, button, textarea {
vertical-align: middle;
}配置全局样式 |
|---|
main.js
代码语言：javascript复制import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 配置全局样式
import '@/assets/css/global.css'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')创建settings.js全局自定义设置 |
|---|
assets/js/settings.js
代码语言：javascript复制export default {
base_url: 'http://127.0.0.1:8000'
}配置使用全局自定义设置 |
|---|
main.js
代码语言：javascript复制import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// 配置全局样式
import '@/assets/css/global.css'
// 配置全局自定义设置
import settings from "@/assets/js/settings";
Vue.prototype.$settings = settings
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')调用settings测试
App.vue
代码语言：javascript复制<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
created() {
console.log(this.$settings.base_url '/app/')
}
}
</script>Home.vue
代码语言：javascript复制<template>
<div class="home">
<h1>主页</h1>
</div>
</template>
<script>
export default {
name: 'Home',
components: {},
created() {
console.log(this.$settings.base_url '/home/')
}
}
</script>

axios配置 |
|---|
安装axios
代码语言：javascript复制## 使用yarn安装
MacBook-pro:luffy driverzeng$ yarn add axios
## 使用npm安装
MacBook-pro:luffy driverzeng$ sudo npm install --save axios导入axios
main.js
代码语言：javascript复制// 配置axios
import axios from 'axios'
Vue.prototype.$axios = axioscookie配置 |
|---|
安装vue-cookies
代码语言：javascript复制## yarn安装
MacBook-pro:luffy driverzeng$ yarn add vue-cookies
## npm安装
MacBook-pro:luffycity driverzeng$ npm install --save vue-cookies导入vue-cookies
main.js
代码语言：javascript复制// 配置cookies：vue-cookies
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookieselement-ui配置 |
|---|
安装element-ui
代码语言：javascript复制## yarn安装
MacBook-pro:luffy driverzeng$ yarn add element-ui
## npm安装
MacBook-pro:luffycity driverzeng$ npm install --save element-ui使用element-ui
代码语言：javascript复制// 配置element-ui：element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)验证element-ui
Home.vue
代码语言：javascript复制<template>
<div class="home">
<h1>主页</h1>
</div>
</template>
<script>
export default {
name: 'Home',
components: {},
created() {
console.log(this.$settings.base_url '/home/')
this.$message('123')
}
}
</script>

bootstrap JQuery配置 |
|---|
安装jQuery和bootstrap
代码语言：javascript复制## yarn安装jQuery
MacBook-pro:luffycity driverzeng$ yarn add jquery
## npm安装jQuery
MacBook-pro:luffycity driverzeng$ npm install --save jquery
## yarn安装bootstrap@3
MacBook-pro:luffycity driverzeng$ yarn addbootstrap@3
## npm安装bootstrap@3
MacBook-pro:luffycity driverzeng$ npm install --save bootstrap@3配置jQuery
在项目的根目录下创建vue.config.js
代码语言：javascript复制const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};配置bootstrap
main.js
代码语言：javascript复制// 配置bootstrap@3
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'测试bootstrap
代码语言：javascript复制<template>
<div class="home">
<h1>主页</h1>
<hr>
<button class="btn btn-primary">按钮</button>
<hr>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {},
created() {
console.log(this.$settings.base_url '/home/')
this.$message('123')
}
}
</script>

