Hello，Flask & Vue

Webpack

webpack 是一个模块打包工具。什么意思呢？它将一堆文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。
image.png

install

  1. mkdir webpack-demo && cd webpack-demo
  2. npm init -y
  3. npm install webpack webpack-cli --save-dev

Test

  1. #构建如下目录
  2.   webpack-demo
  3.   |- package.json
  4.   |- /dist
  5.    |- index.html
  7.   |- /src
  8.    |- index.js
  10. #install loadsh
  11. > npm install --save lodash
  12. > vim src/index.js
  14.   import _ from 'lodash';
  16.   function component() {
  17.     var element = document.createElement('div');
  20.     // Lodash, now imported by this script
  21.     element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  23.     return element;
  24.   }
  26.   document.body.appendChild(component());
  28.  > vim dist/index.html
  30.   <!doctype html>
  31.   <html>
  32.    <head>
  33.      <title>起步</title>
  34. -    <script src="https://unpkg.com/lodash@4.16.6"></script>
  35.    </head>
  36.    <body>
  37. -    <script src="./src/index.js"></script>
  38. +    <script src="main.js"></script>
  39.    </body>
  40.   </html>

config

webpack.config.js
  1.   webpack-demo
  2.   |- package.json
  3. + |- webpack.config.js
  4.   |- /dist
  5.     |- index.html
  6.   |- /src
  7.     |- index.js
  11. var webpack = require('webpack')
  12. var path = require('path')
  13. var ExtractTextPlugin = require('extract-text-webpack-plugin')
  14. const {CleanWebpackPlugin} = require('clean-webpack-plugin')
  16. module.exports = {
  17.   entry: {
  18.     app: './src/main.js'
  19.   },
  20.   output: {
  21.     path: path.resolve(__dirname, './dist'),
  22.     filename: '[name].[hash:8].js'
  23.   },
  24.   module: {
  25.     rules:[
  26.       {
  27.         test: /\.css$/,
  28.         use: ExtractTextPlugin.extract({
  29.           use: 'css-loader'
  30.         })
  31.       },
  32.       { 
  33.         test: /\.js$/, 
  34.         exclude: /node_modules/, 
  35.         use: 'babel-loader'
  36.       }
  37.     ]
  38.   },
  39.   plugins: [
  40.     new ExtractTextPlugin('[name].[hash:8].css'),
  41.     new CleanWebpackPlugin(['./dist'])
  42.   ]
  43. }
  45. if (process.env.NODE_ENV == 'production') {
  46.   module.exports.plugins = (module.exports.plugins || []).concat([
  47.     new webpack.optimize.UglifyJsPlugin()
  48.   ])
  49. }

Flask & flask-sqlalchemy

install

pip install flask flask-sqlachemy

app.py

  1. #coding: utf-8
  3. from flask import Flask, jsonify
  5. app = Flask(__name__)
  7. @app.route('/api/hello', methods=['GET'])
  8. def hello():
  9.     return jsonify(ok=True, data='hello, world')
  11. if __name__ == '__main__':
  12.     app.run()

run app

python app.py

listing for 5000

Vue

install

npm install --golbal vue-cli

init

vue init webpack-somple hello-app
cd hello-app
npm install
npm run dev

App.vue

  1. <template>
  2.   <div id="app">
  3.     <h1>{{ msg }}</h1>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'app',
  10.   data () {
  11.     return {
  12.       msg: 'Hello, world!'
  13.     }
  14.   }
  15. }
  16. </script>
  18. <style>
  20. </style>

listing for 8080

axios

install

npm install --save axios

add The script in App.vue

  1. <template>
  2.   <div id="app">
  3.     <h1>{{ msg }}</h1>
  4.   </div>
  5. </template>
  7. <script>
  8. var axios = require('axios');
  10. export default {
  11.   name: 'app',
  12.   data () {
  13.     return {
  14.       msg: ''
  15.     }
  16.   },
  17.   mounted() {
  18.       axios.get('/api/hello')
  19.         .then(response => console.log(response.data))
  20.   }
  21. }
  22. </script>
  24. <style>
  26. </style>

add The prolicy in webpack.config.js

  1. devServer: {
  2.   historyApiFallback: true,
  3.   noInfo: true,
  4.   proxy: {"/api/*": {target: 'http://localhost:5000', host: 'localhost'}}
  5. }
  6. // api/*(8080) 的请求全部转发到我们的后端服务器
  8. ## App.vue
  9. mounted() {
  10.     axios.get('/api/hello')
  11.       .then(response => this.msg = response.data.data)
  12.   }
  13. // 将转发请求获取到的值赋值给App.vue里的msg

Vue

vue.js

Webpack

webpack 中文网