原文地址：https://codeday.me/bug/20181212/453082.html
我最近有这个问题(结合Vue.js和Flask).
至少有两种方法可以组合它们,具体取决于你是创建1)一个简单的Vue.js应用程序还是2)一个更复杂的Vue.js应用程序需要使用像Webpack这样的模块捆绑器来组合Single-File Components或者npm包.
简单的Vue.js应用程序：
这实际上相当简单,非常强大.以下步骤可能不是“最佳实践”的方法,但它会让你开始：
>如果您希望Vue.js功能(“app”)位于其自己的页面上,请创建一个新的模板.html文件.否则只需打开您希望应用程序所在的.html模板文件.
>这是您的Vue.js模板代码的用武之地.
>在静态文件夹中创建一个新的JavaScript文件,在您要创建的此应用程序之后命名.
>这是您的Vue.js JavaScript代码的用武之地.
> .html模板文件的底部包含一个包含Vue.js的脚本标记.
>< script src =“https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js”>< / script>
>请注意,该版本号将更改,因此不要只复制该行.您可以获取最新版本here的链接.
>同样在该模板文件中,也在底部,包含一个脚本标记,用于加载刚刚创建的JavaScript文件.
>< script src =“%% url_for('static',filename ='js / YOUR_APP_NAME.js')%%”>< / script>
>在.html模板文件中创建一个id为app的新div.
>< div id =“app”>< / div>
>这是一个简单的“Hello World”示例模板：
<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>>请注意,此示例包含Flask模板文件中的Vue.js JavaScript代码,因此您无需单独包含Vue.js JavaScript.对于较小的项目,这可能更容易.
>如果您使用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__)"或者：
class Application(Flask):
def __init__(self, import_name, template_folder=None, root_path=None):
super(Application, self).__init__(
import_name,
template_folder=template_folder,
root_path=root_path,
static_folder=None
)
self.config.from_pyfile('config/base_setting.py')
self.jinja_options = Flask.jinja_options.copy()
self.jinja_options.update(dict(
variable_start_string='%%', # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}'
variable_end_string='%%',
))
# os.environ['ops_config'] = 'local'
# if 'ops_config' in os.environ:
# print('config/%s_setting.py' % os.environ['ops_config'])
# self.config.from_pyfile('config/%s_setting.py' % os.environ['ops_config'])
# db.init_app(self)
app = Application(__name__, template_folder=os.getcwd() + '/web/templates', root_path=os.getcwd())
>请注意,如果您切换Flask的语法,Flask-Bootstrap将无效,因为Flask-Bootstrap有自己的模板,但仍然包含“{{”/“}}”语法.您可以看到here如何更改Vue.js的语法,它比更改Flask的语法更容易.
>像往常一样提供页面. /像往常一样渲染模板文件.
>如果需要,可以使用Vue.js 2.0 Hello World JSFiddle进行更快速的原型设计,然后将代码复制到.html和.js文件中.
>确保小提琴使用的是最新版本的Vue.js！
简单！
使用Webpack的更复杂的Vue.js应用程序：
> Install Node(它带有npm,这是我们需要的).
>安装vue-cli：
> npm install -g @ vue / cli
>创建一个新的Vue.js Webpack项目：
> vue创建我的项目
>一种方法是创建服务器文件夹和客户端文件夹,其中server文件夹包含Flask服务器代码,客户端文件夹包含Vue.js项目代码.
>另一种方法是将Vue.js项目作为Flask项目中的文件夹包含在内.
>设置您的Webpack配置,以便在Flask服务器/模板文件夹中创建app.html文件,app.html所需的静态JavaScript和CSS在server / static / app /文件夹中创建,与静态文件隔离Flask应用程序的非Vue部分使用的资产.
>如果要将Vue.js项目与Flask项目结合使用,请在包含Vue.js项目的文件夹中运行npm run build,该项目将生成.html文件和多个静态文件(JavaScript和CSS).
1644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
