Nat*_*les 30
我最近有这个问题(结合Vue.js和Flask).
根据您是创建1)一个简单的Vue.js应用程序还是2)一个更复杂的Vue.js应用程序需要使用像Webpack这样的模块捆绑器来组合单个文件,至少有两种方法可以将它们组合起来.组件或npm包.
简单的Vue.js应用程序:
这实际上相当简单,非常强大:
.html文件.否则只需打开.html您希望应用程序所在的模板文件.
如果您将Vue.js JavaScript代码放在与HTML相同的文件中,那么下面是一个简单的"Hello World"示例模板,您可以使用它来了解Flask模板文件中需要的内容:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
static文件夹中创建一个新的JavaScript文件,在您要创建的此应用程序之后命名.
.html模板文件的底部包含一个包含Vue.js的脚本标记.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>div的.html有一个模板文件id中app.
<div id="app"></div>如果你使用Jinja2来渲染模板,你需要添加几行代码来告诉Jinja2不要使用{{ }}语法来渲染变量,因为我们需要Vue.js的那些双花括号符号.以下是您需要添加到您的代码app.py:
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
variable_start_string='%%', # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
variable_end_string='%%',
))
app = CustomFlask(__name__) # This replaces your existing "app = Flask(__name__)"
.html和.js文件.
简单!
使用Webpack的更复杂的Vue.js应用程序:
npm install -g @vue/clivue create my-projectserver文件夹和一个client文件夹,其中该server文件夹包含Flask服务器代码,该client文件夹包含Vue.js项目代码.app.html在Flask server/templates文件夹中创建文件,并app.html在server/static/app/文件夹中创建所需的静态JavaScript和CSS ,与Flask应用程序的非Vue部分使用的静态资源隔离.npm run build从包含Vue.js项目的文件夹中运行,该项目将生成一个.html文件和几个静态文件(JavaScript和CSS).我对我的Webpack配置所做的确切更改(通过我的git commit):
client/build/webpack.dev.conf.js:
new HtmlWebpackPlugin({
- filename: 'index.html',
- template: 'index.html',
+ filename: 'app.html',
+ template: 'app.html',
这里(上图)我正在将Vue.js'启动'文件的名称更改为app.html,这样它就不会与我的Flask应用程序的'index.html'冲突.
client/config/index.js:
module.exports = {
build: {
env: require('./prod.env'),
- index: path.resolve(__dirname, '../dist/index.html'),
- assetsRoot: path.resolve(__dirname, '../dist'),
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
+ index: path.resolve(__dirname, '../../server/templates/app.html'),
+ assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+ assetsSubDirectory: '',
+ assetsPublicPath: '/static/app',
这里(上图)我正在设置应该创建app.html文件和静态资产的位置.
因为我们指示Webpack在Flask的"静态"文件夹(/static/app/)中生成静态资产......
htmlWebpack将自动正确设置包含文件中这些资产的相对URL .
src=/static/app/js/app.f5b53b475d0a8ec9499e.jsstatic/文件夹中,Flask假定该文件夹具有/static/etc.URL.
app.html文件.client/build/webpack.prod.conf.js:
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
- ? 'index.html'
+ ? 'app.html'
: config.build.index,
- template: 'index.html',
+ template: 'app.html',
在这里(上图)我只是重命名'发布'页面,与中相同webpack.dev.conf.js.
routes.py:
@web_routes.route('/app')
@login_required
def app():
if current_user.datetime_subscription_valid_until < datetime.datetime.utcnow():
return redirect(url_for('web_routes.pay'))
return render_template('app.html')
这里(上图)是我的渲染功能.我正在使用Flask的蓝图功能(<blueprint_name>.route),但你不必这样做.
Syc*_*jam 12
使用 vue-cli 或 Webpack 时，可以简化流程。只需创建
vue.config.js在您的 Vue 项目中，请参阅：Vue 配置
module.exports = {
outputDir: "../dist",
// relative to outputDir
assetsDir: "static"
};
然后配置您的烧瓶应用程序：
app.py
module.exports = {
outputDir: "../dist",
// relative to outputDir
assetsDir: "static"
};
注意，在flaskstatic_folder和template_folder不能相同。
| 归档时间： |
|
| 查看次数： |
6254 次 |
| 最近记录： |