问题描述
我想同时使用Vue.js和Flask：Vue.js用于动态前端，Flask用于后端。我该怎么做？我最近有这个问题（结合Vue.js和Flask）。 b
$ b
至少有两种方法来组合它们，具体取决于您是在创建1）简单的Vue.js应用程序还是2）需要使用的更复杂的Vue.js应用程序像Webpack这样的模块打包工具来结合或npm包。
$ hr
$ b
简单的Vue.js应用程序：
这实际上相当简单，而且非常强大。下面的步骤可能不是最好的做法，但它会让你开始：
- 如果你想要Vue .js功能（app）在自己的页面上，创建一个新的模板
.html文件。否则，只需打开任何.html模板文件，您就可以使用该应用程序。
- 您的Vue.js模板代码将会继续。
- 在
static 文件夹，在你想创建这个应用程序后命名。
- 这是您的Vue.js JavaScript代码将会到达的地方。
- 这是您的Vue.js 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> - 创建一个新的
.html模板文件中的code>idapp。
$ b-
< div id =app>< / div>
-
- 像平常一样投放页面。 /像往常一样渲染模板文件。
- 如果需要，可以使用做一些更快的原型，然后将代码复制到
.html和.js文件。
- 确保小提琴使用最新版本的Vue.js！
$ b
-
简单！
使用Webpack的更复杂的Vue.js应用程序：
我为此创建了一个 server 文件夹和客户端文件夹，其中服务器文件夹包含我的Flask服务器代码，而 client 文件夹包含我的Vue.js项目代码（我使用 vue-cli 创建了一个Webpack项目）。当我想将我的Vue.js项目和我的Flask项目结合起来时，我从客户端中运行 npm run build 文件夹，它生成一个 app.html 文件和几个静态文件（JavaScript和CSS）。我建立了我的Webpack配置，以便在我的Flask server / templates 文件夹中创建 app.html 在 server / static / app / 文件夹中创建了 app.html 所需的静态JavaScript和CSS文件夹，我的Flask应用程序的非Vue部分所使用的静态资产。
$ b
我对我的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'launch'文件的名称改为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文件并创建静态资产。
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'，
$ b 这里（上面）我只是重命名'launch'页面，就像 webpack.dev.conf .js 。
routes.py ：
@ web_routes.route（'/ app'）
@login_required
def app（）：
如果current_user.datetime_subscription_valid_until< ; datetime.datetime.utcnow（）：
return redirect（url_for（'web_routes.pay'））
return render_template（'app.html'）
这里（上面）是我的渲染函数。我正在使用Flask的Blueprints功能（< blueprint_name> .route ），但不一定要。
I want to use Vue.js and Flask together: Vue.js for a dynamic front-end, and Flask for the back-end. How can I do that?
解决方案 I recently had this problem (combining Vue.js and Flask).
There are at least two ways to combine them, depending on whether you're creating 1) a simple Vue.js app or 2) a more-complicated Vue.js app that needs to use a module bundler like Webpack to combine Single-File Components or npm packages.
Simple Vue.js app:
This is actually fairly easy and very powerful on its own. The steps below may not be the 'best practice' way to do it, but it will get you started:
- If you want the Vue.js functionality (the "app") to be on its own page, create a new template
.html file. Otherwise just open whatever .html template file you want the app to be in.- This is where your Vue.js template code will go.
- Create a new JavaScript file in your
static folder, name it after this app you want to create.- This is where your Vue.js JavaScript code will go.
- At the bottom of the
.html template file include a script tag to include Vue.js.<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>- Note that that version number will change, so don't just copy that line. You can get the link for the most-recent version here.
- Also in that template file, also at the bottom, include a script tag to load the JavaScript file you just created.
<script src="%% url_for('static', filename='js/YOUR_APP_NAME.js') %%"></script>
- Create a new
div in the .html template file that has an id of app.<div id="app"></div>
- Serve the page as usual. / Render the template file as usual.
- If you want, use a Vue.js 2.0 Hello World JSFiddle to do some quicker prototyping, and then copy the code over into your
.html and .js files.- Make sure that the fiddle is using the most-recent version of Vue.js!
Easy!
More-complicated Vue.js app using Webpack:
What I did for this was to create a server folder and a client folder, where the server folder contains my Flask server code, and the client folder contains my Vue.js project code (I created a Webpack project using vue-cli). When I want to combine my Vue.js project with my Flask project, I run npm run build from within the client folder, which generates an app.html file and several static files (JavaScript and CSS). I set up my Webpack config so that the app.html file is created in my Flask server/templates folder, and the static JavaScript and CSS needed by app.html is created in a server/static/app/ folder, isolated from the static assets used by the non-Vue portions of my Flask app.
The exact changes I made to my Webpack config (via my git commit):
client/build/webpack.dev.conf.js:
new HtmlWebpackPlugin({
- filename: 'index.html',
- template: 'index.html',
+ filename: 'app.html',
+ template: 'app.html',
Here (above) I'm changing the name of the Vue.js 'launch' file to app.html so that it doesn't conflict with my Flask app's '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',
Here (above) I'm setting where the app.html file and static assets should be created.
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',
Here (above) I'm just renaming the 'launch' page, same as in 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')
Here (above) is my render function. I'm using Flask's Blueprints feature (<blueprint_name>.route) but you don't have to.
这篇关于我怎样才能将Vue.js和Flask结合起来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！